body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, #F09A4D, #C1D9E6, #049CC8);
    font-family: 'zabars', Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
}


h1 {
    position: absolute;
    top: -20px;
    font-size: 70px;
    letter-spacing: 4px;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);
    color: #ff9f00;
}


canvas {
    display: block;
    border-radius: 20px;
    border: 1px solid rgba(131, 128, 128, 0.01);
}


.enterFullscreenIcon {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 9px;
    right: 15px;
}


.enterFullscreenIcon:hover {
    cursor: pointer;
    transition: all 225ms ease-in-out;
    transform: scale(1.2);
}


.exitFullscreenIcon {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 13px;
    right: 15px;
}


.exitFullscreenIcon:hover {
    cursor: pointer;
    transition: all 225ms ease-in-out;
    transform: scale(1.2);
}


.positionRelative {
    position: relative;
}


.startScreenContainer {
    position: relative;
    border-radius: 20px;
}


.startScreen {
    width: 820px;
    height: 480px;
    border-radius: 20px;
}

.spinner {
    width: 100px;
    height: 100px;
    animation: spinner-8k6ao5lg 2.4000000000000004s infinite;
    border-radius: 50%;
    background-color: #ff9f00;
    transform-origin: center;
}

@keyframes spinner-8k6ao5lg {
    0% {
        transform: perspective(288px) rotateY(0deg);
    }

    10% {
        transform: perspective(288px) rotateY(-65deg);
    }

    90%,
    100% {
        transform: perspective(288px) rotateY(2880deg);
    }
}



.gameOverScreen {
    width: 820px;
    border-radius: 20px;
    animation: scale-in-center 225ms cubic-bezier(0.250, 0.460, 0.450, 0.940) 100ms both;
}


.btnContainer {
    margin-top: -55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.btnRestart {
    background-color: #ff9f00;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    height: 50px;
    width: 240px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 25px;
    font-family: 'zabars', Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
    animation: scale-in-center 225ms cubic-bezier(0.250, 0.460, 0.450, 0.940) 100ms both;
}


.btnRestart:hover {
    cursor: pointer;
    transition: all 225ms ease-in-out;
    background-color: #FFDE00;
}


.btnMainMenu {
    background-color: #ff9f00;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    height: 50px;
    width: 240px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 25px;
    font-family: 'zabars', Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
    animation: scale-in-center 225ms cubic-bezier(0.250, 0.460, 0.450, 0.940) 100ms both;
}


.btnMainMenu:hover {
    cursor: pointer;
    transition: all 225ms ease-in-out;
    background-color: #FFDE00;
}


.keyboardButton {
    width: 40px;
    height: 40px;
    padding-left: 15px;
}


.keyboardIcon {
    font-size: 25px;
    font-weight: bolder;
}


.audioOnIcon {
    background-color: rgba(248, 212, 95, 0.4);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    position: absolute;
    right: 80px;
    top: 9px;
}


.audioOnIcon:hover {
    cursor: pointer;
    transition: 225ms ease-in-out;
    transform: scale(1.2);
}


.audioOffIcon {
    background-color: rgba(248, 212, 95, 0.4);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    position: absolute;
    right: 80px;
    top: 9px;
}


.audioOffIcon:hover {
    cursor: pointer;
    transition: 225ms ease-in-out;
    transform: scale(1.2);
}


.btnPlay {
    width: 30px;
    height: 30px;
    padding-left: 6px;
    padding-top: 2px;
}


.positionAbsoluteLeft {
    position: absolute;
    left: 30px;
    bottom: 10px;
    display: flex;
    flex-direction: row;
    gap: 30px;
}


.positionAbsoluteRight {
    position: absolute;
    right: 30px;
    bottom: 10px;
    display: flex;
    flex-direction: row;
    gap: 30px;
}


.btnMobile {
    width: 40px;
    height: 40px;
}


.containerGameControlls {
    width: 820px;
    height: 480px;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 20px;
    border: 1px solid rgba(131, 128, 128, 0.01);
    color: #ff9f00;

}

.controlDiv {
    display: flex;
    align-items: center;
    width: 300px;
    justify-content: space-between;
}


.containerGameControlls h2 {
    font-size: 35px;
    margin-top: 15px;
    margin-bottom: 20px;
}


.containerGameDescription {
    width: 820px;
    height: 480px;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border-radius: 20px;
    color: #ff9f00;
}


.containerGameDescription h2 {
    font-size: 35px;
    margin-top: 15px;
    margin-bottom: 60px;
}


.containerGameDescription span {
    font-size: 28px;
}

.playBtn {
    position: absolute;
    top: 12px;
    right: 55%;
    background-color: #ff9f00;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    height: 50px;
    width: 80px;
    font-size: 25px;
    font-family: 'zabars', Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
}

.playBtn:hover {
    cursor: pointer;
    transition: all 225ms ease-in-out;
    transform: scale(1.1);
    background-color: #FFDE00;
}

.InfoBtn {
    position: absolute;
    top: 12px;
    right: 29%;
    background-color: #ff9f00;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    height: 50px;
    width: 80px;
    font-size: 25px;
    font-family: 'zabars', Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
}

.InfoBtn:hover {
    cursor: pointer;
    transition: all 225ms ease-in-out;
    transform: scale(1.1);
    background-color: #FFDE00;
}

.controlBtn {
    position: absolute;
    top: 12px;
    right: 42%;
    background-color: #ff9f00;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    height: 50px;
    width: 80px;
    font-size: 25px;
    font-family: 'zabars', Arial, Helvetica, sans-serif;
    letter-spacing: 2px;
}

.controlBtn:hover {
    cursor: pointer;
    transition: all 225ms ease-in-out;
    transform: scale(1.1);
    background-color: #FFDE00;
}


.steeringIcon {
    width: 30px;
    height: 30px;
}


.border {
    height: 55px;
    width: 55px;
    background-color: rgba(248, 212, 95, 0.4);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.border-absolute {
    position: absolute;
    left: 35px;
    top: 30px;
    height: 55px;
    width: 55px;
    background-color: rgba(248, 212, 95, 0.4);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.border-absolute:hover {
    cursor: pointer;
    transition: all 225ms ease-in-out;
    transform: scale(1.1);
}


.arrowBack {
    position: absolute;
    left: 15px;
    width: 40px;
    height: 40px;
}



.infoIcon {
    width: 30px;
    height: 30px;
}




.loadingScreenContainer {
    width: 820px;
    height: 480px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    border-radius: 20px;
}


/*************************** Class only for loading Screen ***************************/
.hide {
    display: none;
}

/*************************** Class only for loading Screen ***************************/


.containerWithTextAndIcon {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.winScreenContainer {
    width: 820px;
}


.winScreenContainer h2 {
    font-size: 35px;
    margin: 0;
    text-align: center;
    animation: scale-in-center 225ms cubic-bezier(0.250, 0.460, 0.450, 0.940) 100ms both;
}


.winScreenContainer .btnContainer {
    display: flex;
    justify-content: space-between;
}


.imgTrophyContainer {
    display: flex;
    justify-content: center;
}


.imgTrophyContainer img {
    width: 180px;
    padding-top: 15px;
    animation: scale-in-center 225ms cubic-bezier(0.250, 0.460, 0.450, 0.940) 100ms both;
}


.d-none {
    display: none !important;
}

.displayNone {
    display: none;
}

/*************************** Classe only for Fullscreen ***************************/
.canvasFullScreen {
    width: 100%;
    height: 100%;
}


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


.winScreenContainerFullScreen h2 {
    padding-top: 180px;
}


.imgTrophyContainerFullScreen img {
    width: 230px;
    padding-bottom: 155px;
}


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


/*************************** Classe only for Fullscreen ***************************/


/*************************** Only Keyframes ***************************/
@keyframes scale-in-center {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


@keyframes rotate-center {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}