body{
    display: flex;
    justify-content:center;
    align-items:center;
    flex-direction: column;
    font-family: 'zabras', Arial, Helvetica, sans-serif;
    background-image: url('img/desert-1270345_1920.jpg') ;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    margin: 0;
}

.header{
    display: flex;
    font-size: 74px;
    letter-spacing: 3px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

@font-face 
    {
    font-family: 'zabras';
    src: url('fonts/Zabars.ttf') format('truetype');    
}

canvas {
    background-color: black;
    display: block;
}

.startImg{
    width: 720px;
    height: 480px;
}

#screenTurn{
    display: none;
    font-size: 58px;
    color: black;
}

#wonMessage{
    display: none;
    font-size: 58px;
    padding-top: 80px;
    color: black;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
      opacity: 0;
    }
  }

.gameSetting{
    justify-content: center;
}

.characterWalking{
    font-size: 32px;
    padding-right: 24px;
    color: yellowgreen;
}

.btnSetting{
    cursor: pointer;
    position: absolute;
    border-color: orange;
    border-radius: 100%;
    background-color: orange;
    height: 32px;
    width: 32px;
}
#btnLeft{
    left: 50px;
    bottom: 20px;
}
#btnRight{
    left: 125px;
    bottom: 20px;
}

#btnUp{
    right: 100px;
    bottom: 20px;    
}

#btnThrow{
    right: 175px;
    bottom: 20px;
}

#volspeaker{
    right: 50px;
    top: 26px;
}
#volMute{
    right: 50px;
    top: 26px;
}

.start-btn{
    position: absolute;
    bottom: 395px;
    cursor: pointer;
    width: 180px;
    height: 40px;
    background-color: rgb(248, 204, 121);
    font-size: 34px;
    font-family: 'zabras', Arial, Helvetica, sans-serif;
}

.restart-btn-container{
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    top: 20px;
}

.start-btn-container{
    position: relative; /*************/
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    top: 20px;
}

/* #stop-img{
    top: 0px;
    height: 100%;
}
 */
#phoneTurn{
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    top: 250px;
}

#gameWon{
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    top: 300px;
}

#restart{
    position: absolute;
    bottom: 165px;
    /* top: 260px; //////////////*/

}

.start-btn:active{
    box-shadow: 0 1px #666;
    transform: translateY(4px);
}

.start-btn:hover{
    background-color:  rgb(243, 184, 75);
}

.d-none{
    display: none;
}

.enterfullscreen{
    /* display: flex; */
    cursor: pointer;
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 24px;
    height: 24px;
}

.exitFullscreen{
    cursor: pointer;
    position: absolute;
    right: -650px;
    bottom: -350px;
    width: 32px;
    height: 32px; 
}

.container{
    position: relative; 
    justify-content: center;
    align-items: center;
    /* height: 100vh;   */
}

@media only screen and (max-width: 720px){
    canvas {
        width:  100%;
    }
    .startImg{
        width:  100%;
    }
}

@media only screen and (max-width: 400px){
  
    .container{
        opacity: 0.5;
    }

    #screenTurn{
        display: flex;
    }
}

@media only screen and (max-height: 689px){
    .header{
        display: none;
    }

    .start-btn{
        bottom: 350px;
        
    }
    .gameSetting{
        display: none;
    }
}

@media only screen and (max-height: 480px){
    canvas{
        height:  100vh;
    }
    .startImg{
        height: 100vh;
    }
    .container{
        height: 100vh;
    }
}