body {
    background: black;
    margin: 0;
    padding: 0;
    font-family: 'Helvetica';
}


#instructions {
    background-color: rgba(0,0,0,0.75);
    color: white;
    text-align: center;
    padding: 32px;
    margin: 0px;
    display: inline;
    border: 2px solid white;
}


#help {
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding: 4px;
    color: white;
}


#level {
    display: inline-block;
    position: absolute;
    width:120px;
    height:65px;
    font-size: 30px;
    padding-left: 15px;
    color:white;
    bottom: 0;
    left:0;
    font-weight: bold;
     line-height: 60px;
    /* top:100px; */
    margin: 0px;
}


#profile{
    display: inline-block;
    position: absolute;
    color: white;
    width:300px;
    height:65px;
    font-size: 30px;
    padding-left: 15px;
    line-height: 60px;
    top:6vh;
    margin: 0px;
    font-weight: bold;
}


#logos{
    position: absolute;
    width:100%;
    height: 200px;
    padding: 0;
    margin: 0;
}


/* #hp{
    height:96px;
    width:350px;
} */


/* #technest{
    float:right;
    height:82px;
    width:350px;
    top:20px;
} */


#timer{
    position: absolute;
    top:6vh;
    left:230px;
    line-height: 60px;
    width:200px;
    height:65px;
    color: white;
    font-size:30px;
    margin:auto;
    text-align: center;
    font-weight: bold;
}


#timer p{
    color: white;
    font-size:30px;
    margin:auto;
    text-align: center;
    font-weight: bold;
}


#score_box{
    position: absolute;
    top:6vh;
    left:0;
    line-height: 60px;
    width:250px;
    height:65px;
    color: white;
    font-size:30px;
    margin:auto;
    text-align: center;
    font-weight: bold;
}


#score{
    color: white;
    font-size:30px;
    margin:auto;
    text-align: center;
    font-weight: bold;
    display: block;
}


#exit{
    position: absolute;
    background-color: 	rgba(24, 21, 21, 0.822);
    right:0;
    top:0px;
    /* box-shadow: 5px 5px grey; */
    line-height: 60px;
    text-align:center;
    width:55px;
    border-radius: 10px;
    height:55px;
    color: white;
    font-size:30px;
    margin:auto;
    font-weight: bold;
}


#exit a{
    text-decoration: none;
    color: white;
}


#exit a:hover{
    transform: scale(2);
}

/*
#welcome{
        background: linear-gradient(-45deg, #e0e25f, #c1dd5c, #246279, #23d5ab);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
        width:100vw;
    height:100vh;
    background-color:white;
    color:black;
    position:absolute;
    font-size:80px;
    opacity:0.5;
    z-index:20000000;
     margin:auto;
     text-align: center;


    }*/

#welcome{
    background-color: black;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#welcome img{
    margin-top: 180px;
}
#start {
    margin-top: 30px;
    padding: 0px 23px;
    background-color: #f3e7f9;
    border-radius: 6px;
    border-style: none;
    cursor: pointer;
    font-size: 25px;
    font-weight: bolder;
  }



    
    @keyframes gradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
    
 /*   

#welcome p{
    color: #000;
    font-size:5rem;
    font-weight: bold;
    font-family: Helvetica;
    text-shadow: 
      0 1px 0 #ccc, 
      0 2px 0 #c9c9c9, 
      0 3px 0 #bbb, 
      0 4px 0 #b9b9b9, 
      0 5px 0 #aaa, 
      0 6px 1px rgba(0,0,0,.1), 
      0 0 5px rgba(0,0,0,.1), 
      0 1px 3px rgba(0,0,0,.3), 
      0 3px 5px rgba(0,0,0,.2), 
      0 5px 10px rgba(0,0,0,.25), 
      0 10px 10px rgba(0,0,0,.2), 
      0 20px 20px rgba(0,0,0,.15);
  
    margin-top:20%;
}
*/


#joy{
    display: none;
}


#stick{
    display: none;
}


#warning-message { display: none; }
@media only screen and (orientation:portrait){
  
    #warning-message {
        background-color: white;
        color: black;
      display:block;
      position: absolute;
      height: 100vh;
      text-align: center;
      width: 100vw;
      display: block;
      margin: auto;
      font-weight: bold;
      font-size: larger; 
      z-index:50000000;
    }

    #warning-message p{
        margin: auto;
        margin-top:50%;
        font-size: 50px;
        width: 70%;
    }
    #welcome{
        display: none;
    }
}
@media only screen and (orientation:landscape){
    #warning-message { display:none; }
    
}
/*
@media (max-width:1200px){
    #joy{
        display: block;
    }
    
    #stick{
        display: block;
    }
    hp{
        width: 1000px;
        height: 55px;
    }
    technest{
        width: 200px;
        height: 47px;
    }
} */

@media only screen and (max-width:1000px){
    #hp{
        width: 200px;
        height: 55px;
    }
    #technest{
        width: 200px;
        height: 47px;
    }
    #joy{
        display: block;
    } 
    
    #stick{
        display: block;
    }
    #profile{
        top:50px;
        font-size: 20px;
    }
    #level{
        bottom: 0;
        left:0;
        font-size: 20px;
    }
    #score_box{
        top:50px;
        font-size: 20px;
        left:0
    }
    #score{
        font-size: 20px;
        
    }
    #timer p{
        font-size: 20px;
    }
    #timer{
        top:50px;
        font-size: 20px;
        width:120px;
    }
    #welcome img{
        margin-top: 80px;
    }
    
}