@font-face {
    font-family: 'zabras';
    src: url('fonts/Zabars.ttf') format('truetype');
    /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('img/vecteezy_desert-forest-landscape-at-sunset-time-scene-with-many-cactuses_.jpg');
    font-family: 'zabras', Arial, Helvetica, sans-serif;
    background-size: cover;
    object-fit: contain;
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
}

h1 {
    font-size: 64px;
}

canvas {
    background-color: black;
    border-radius: 25px;
    display: block;

}

.pics {
    width: 720px;
    height: 480px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 25px;
    z-index: 1;
}

.content {
    position: relative;
}

#endScreenGameOver,
#endScreenLose {
    display: none;
}

.d-none {
    display: none;
}

#startGame,
#restartGameLose,
#restartGameWin {
    width: 150px;
    height: 35px;
    color: white;
    background-image: linear-gradient(to right, #FF8008 0%, #FFC837 51%, #FF8008 100%);
    margin: 10px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: #9a3a17;
    border-radius: 10px;
    display: block;
    position: absolute;
    bottom: 0;
    left: calc(38%);
    border: solid #9a3a17 2px;
    font-family: 'zabras';
    font-size: 18px;
    z-index: 1;

}

#startGame,
#restartGameLose,
#restartGameWin:hover {
    background-position: right center;
    /* change the direction of the change here */
    color: #2ca9ce;
    text-decoration: none;
    display: block;
}

.music {
    background-color: #2ca9ce;
}


/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */

.fade-out {
    -webkit-animation: fade-out 1.0s ease-out 1s both;
    animation: fade-out 1.0s ease-out 1s both;
}


@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#controls {
    background-image: linear-gradient(to right, #FF8008 0%, #FFC837 51%, #FF8008 100%);
    opacity: 85%;
    z-index: 2;
    display: none;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}




.controls-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 40px;
    width: calc(70%);

}

.btn-key {
    width: 132px;
    height: 50px;
    border: solid 2px black;
    display: flex;
    justify-content: center;
    border-radius: 14px;
    -webkit-box-shadow: -10px 13px 15px 5px #000000;
    box-shadow: -10px 15px 20px -2px #000000;
}


.controls-cont-line {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 8px;
}

.line {
    display: flex;
    width: 220px;
    justify-content: space-between;
}

/* 
.line span {
    margin-left: 12px;
} */


.controls-cont span {
    margin-left: 26px;
    margin-bottom: 18px;
    font-size: 45px;
}

.icons-cont {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    width: 64px;
    height: 35px;
    align-items: center;
    justify-content: space-between;
}

.icons {
    width: 24px;
    height: 24px;
    transition: transform 225ms ease-in-out;
}

.icons:hover {
    width: 28px;
    height: 28px;
    transform: scale(1.1);
    transform-origin: center;

}

#gamePause {
    position: absolute;
    top: 24px;
    right: 98px;
}

/********** Smartphones only ********/

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

    #startScreen,
    #endScreenLose,
    #endScreenGameOver {
        width: 100% !important;
    }

    .pics {
        width: 100%;
        height: 100%;
    }

    .action-Btn-Container {
        width: 100% !important;
    }

}


@media only screen and (max-width:600px) {
    .rotate-Screen-cont {
        display: flex;
        justify-content: center;
        align-items: center;
    }

}


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

    h1 {
        display: none;
    }

    #startScreen,
    #endScreenLose,
    #endScreenGameOver {
        height: 100vh;
        z-index: 1;
    }

    .pics {
        height: 100vh;
    }

    .left-cont {
        display: block !important;
    }

    .right-cont {
        display: block !important;
    }

    #startGame,
    #restartGameLose,
    #restartGameWin {
        z-index: 1;
    }

    .controls-cont {
        font-size: 32px;
    }

    .controls-cont span {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .btn-key {
        width: 100px;
        height: 35px;
    }

    #btn-fullScreen {
        display: none;
    }

}


@media screen and (orientation: landscape) {
    /* h1 {
        display: none;
    } */

    .pics {
        /* height: 100vh; */
        width: 100%;
    }


    #startScreen,
    #endScreenLose,
    #endScreenGameOver {
        height: unset;
    }
}

/* 
@media  screen and (orientation: portrait) {
    h1 {
        display: block;
    }

    .pics {
        height: 100vh;
        /* width: 100%; */
/* } */

/* 
    #startScreen,
    #endScreenLose,
    #endScreenGameOver {
        height: 100vh;
    }
}  */


.rotate-Screen-cont {
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 85%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.rotate-Screen-cont div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rotate-Screen-cont span {
    color: white;
    font-size: 42px;
}

.rotate-Screen-cont img {
    margin-bottom: 16px;
}

.action-Btn-Container {
    display: flex;
    justify-content: space-between;
    width: 720px;
    position: absolute;
    bottom: 140px;

}

.action-btn {
    display: flex;
    justify-content: center;

}

.left-cont {
    position: absolute;
    bottom: 13px;
    left: 12px;
    display: none;
}



.right-cont {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: none;
}


#btnRight,
#btnLeft,
#btnJump,
#btnThrow {
    width: 40px;
    height: 40px;
    border: solid 2px black;
    display: flex;
    justify-content: center;
    border-radius: 14px;
    -webkit-box-shadow: -10px 13px 15px 5px #000000;
    box-shadow: -10px 15px 20px -2px #000000;

}

#btnRight,
#btnLeft,
#btnJump,
#btnThrow img {
    width: 40px;
    height: 40px;
}

#btnRight,
#btnLeft {
    margin-left: 12px;
}

#btnJump,
#btnThrow {
    margin-right: 12px;
}

#btn-fullScreen {
    position: absolute;
    bottom: 12px;
    right: 12px;
}