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

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'zabars', Arial, Helvetica, sans-serif;
    margin: 0;
}

.bodyMainPage {
    overflow: hidden;
}

h1 {
    color: rgb(237, 103, 54);
    font-size: 5em;
    letter-spacing: 5px;
    text-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);
    margin-block-start: 0em;
    margin-block-end: 0em;
}

canvas {
    background-color: black;
    border: 3px solid rgb(248 227 219);
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);

}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    cursor: pointer;
}

.msgTurnDevice {
    display: none
}

.panelUnderCanvas {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 808px;
    height: 100px;
    margin-top: -85px;
}

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

.transparent {
    opacity: 0;
    z-index: -999;
}

.fullscreen {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    top: 0;
    left: 0;
    height: 100svh;
    width: 100%;
    background-image: url("img/5_background/background_behind_canvas.svg");
    background-size: 100svh 100%;
}

.gameScreenContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100svh;
    width: 100%;
    max-height: 730px;
}

.pauseGame {
    height: 40px;
    margin-right: 4px;
}

.pauseGame:hover {
    cursor: pointer;
}

.unpauseGame {
    height: 50px;
}

.unpauseGame:hover {
    cursor: pointer;
}

.disableSound {
    height: 40px;
    width: 50px;
}

.disableSound:hover {
    cursor: pointer;
}

.enableSound {
    height: 42px;
    width: 50px;
}

.enableSound:hover {
    cursor: pointer;
}

.fullscreenFalse {
    height: 40px;
    width: 50px;
}

.fullscreenFalse:hover {
    cursor: pointer;
}

.fullscreenTrue {
    height: 40px;
    width: 50px;
}

.fullscreenTrue:hover {
    cursor: pointer;
}

.panelUnderCanvas img:hover {
    cursor: pointer;
}

.description {
    display: flex;
    width: 700px;
    justify-content: space-evenly;
    align-items: flex-start;
}

.description p {
    color: white;
    font-size: 2em;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px rgb(0, 0, 0, 0.5);
    margin-block-start: 0em;
    margin-block-end: 0em;
}

.descriptionImg {
    height: 35px;
    margin-left: -15px;
    padding-right: 10px;
    filter: invert(90%);
}

.descriptionImgSpacebar {
    margin-left: -15px;
    margin-top: -12px;
    width: 60px;
    margin-right: 10px;
    filter: invert(90%);
}

.descriptionImgD {
    width: 40px;
    margin-top: -5px;
    margin-left: -15px;
    filter: invert(90%);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    justify-content: center;
}

.startImg {
    margin-top: 20px;
    height: 90svh;
    max-height: 700px;
    width: 80%;
    max-width: 1000px;
}

.startText {
    color: red;
    font-size: 4em;
    letter-spacing: 5px;
    text-shadow: 2px 2px 4px rgb(0, 0, 0, 0.5);
    margin-top: -10svh;
    background-color: #ebebeb;
    border-radius: 30px;
    width: 30%;
    max-width: 350px;
    height: 10svh;
    max-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.startText:hover {
    cursor: pointer;
    background-color: rgb(141 141 141 / 50%);
}

.overlayWin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.overlayWinImg {
    height: 90svh;
    max-height: 552px;
    width: 80%;
    max-width: 828px;
}

.overlayLose {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    
}

.overlayLoseImg {
    margin-top: 14px;
    height: 554px;  
    width: 828px;
    border-radius: 10px;
}

.legalNoticeAndPrivacyPolicyContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding-top: 7svh;
}

.legalNotice {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1em;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px rgb(0, 0, 0, 0.5);
    margin-block-start: 0em;
    margin-block-end: 0em;
    color: #ebebeb;
}

.privacyPolicy {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1em;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px rgb(0, 0, 0, 0.5);
    margin-block-start: 0em;
    margin-block-end: 0em;
    color: #ebebeb;
}

.legalNoticeBackgroundImg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100svh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0.45;
    z-index: -1;
}

.legalNoticeTextContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 80%;
    padding-bottom: 5svh;
}

.legalNoticeText {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.privacyPolicyBackgroundImg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100svh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
    opacity: 0.45;
}

.privacyPolicyTextContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 80%;
    padding-bottom: 5svh;
}

.privacyPolicyText {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.mobileButtons {
    display: none;
}

.mobileButtonsMove {
    gap: 20px;
}

.arrowLeftMobile, .arrowRightMobile, .jumpMobile, .throwBottleMobile {
    height: 40px;
    width: 40px;
}

.arrowLeftMobile, .arrowRightMobile, .jumpMobile, .throwBottleMobile:hover {
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background-color: rgb(251,227,192); 
}

::-webkit-scrollbar-thumb {
    background-color: #f9ad21; 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ff8c00;
    cursor: pointer
};