/* Hide scrollbar for Chrome, Safari and Opera */
 body::-webkit-scrollbar {
     display: none;
 }

 /* Hide scrollbar for IE, Edge and Firefox */
 body {
     -ms-overflow-style: none;
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
 }

 body {
     margin: 0;
     height: 100vh;
     font-family: Zabars, Arial, Helvetica, sans-serif;
     text-align: center;
     background-image: url(./img/5_background/desert.jpg);
     background-repeat: no-repeat;
     background-position: left bottom;
     background-size: cover;
     backdrop-filter: blur(5px);
     overflow: hidden;
 }

 h1 {
    font-size: 72px;
    letter-spacing: 4px;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.5);
    margin-block-start: 0;
    padding-top: 0.67em;
}

 canvas {
     background-color: black;
     border-radius: 16px;
     height: 480px;
     width: 720px;
 }

 .content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 720px;
     height: 480px;
     border-radius: 16px;
     box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;
     display: flex;
     justify-content: center;
     overflow: hidden;
 }

 .image-layer,
 .button-layer {
     background-color: transparent;
     border-radius: 16px;
     height: 100%;
     width: 100%;
     position: absolute;
 }

 .button-layer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

 #rotate-device-container {
     z-index: 30;
     display: none;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100vw;
     height: 100vh;
     flex-direction: column;
     align-items: center;
     z-index: 50;
     background: rgba(255, 255, 255, 0.3);
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(6px);
 }

 #rotate-device-container img {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 90%;
     height: 80%;
     background-color: transparent;
     border-radius: 20px;
     color: white;
     flex-direction: column;
     align-items: center;
     z-index: 50;
 }

 #gamecontrols-container {
     position: absolute;
     z-index: 60;
     border-radius: 16px;
     top: 5%;
     left: 5%;
     height: 90%;
     width: 90%;
     background-color: rgba(238, 238, 238, 0.5);
     background-image: url(img/9_intro_outro_screens/gamecontrols.jpg);
     background-position: center;
     background-size: cover;
     box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;
 }

 .gamecontrollsContent {
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     padding-left: 10%;
 }

 #btn-closeGamecontrols {
     position: absolute;
     top: 18px;
     right: 18px;
     height: 24px;
     width: 24px;
 }

 #btn-closeGamecontrols:hover {
     cursor: pointer;
 }

 .control-item {
     display: flex;
     align-items: center;
 }

 .control-icon {
     width: 72px;
     height: auto;
     margin-right: 10px;
     animation: icon-animation 1.5s infinite;
 }

 .control-item p {
     margin: 0;
     font-size: 24px;
     color: #000;
 }

 .btn-column {
     height: calc(100% - 20px);
     padding: 8px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
     box-sizing: border-box;
 }

 .btn-upperRow,
 .btn-lowerRow {
     height: 8%;
 }

 .btn {
     height: 100%;
     /* width: fit-content; causes problems in firefox */
     border-radius: 50%;
     background-color: rgb(255, 204, 24);
     padding: 8px;
     margin: 2px;
     transition: all 225ms ease-in-out;
     border: 1px solid black;
     box-shadow: 0 10px 6px -6px #111111;
 }

 .btn:hover {
     cursor: pointer;
     transform: scale(1.1);
     background-color: rgb(73, 202, 238);
     box-shadow: 0 10px 6px -6px #000;
 }

 #btn-start {
    color: black;
    font-size: 2.5rem;
    font-family: 'Zabars', sans-serif;
    padding: 12px 20px 12px 20px !important;
    text-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: 0.1s all ease-in-out;
    height: unset !important;
    min-height: 125%;
    border-radius: 8px !important;
    margin-top: 16% !important;
}

 .d-none {
     display: none;
 }

 .desktop-hidden {
    display: none;
 }
 
 @keyframes icon-animation {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

 /* Smartphones */
 @media only screen and (max-width: 720px) {
     canvas {
         /* width: calc(100% - 140px); */
         width: 100%;
         /* height: unset; */
     }

     .content {
         width: 100%;
         /* height: unset; */
         background-image: none;
     }

     .button-layer {
         height: 100%;
         width: 98%;
         border: 0;
     }

     .btn-column {
         height: calc(100% - 24px);
         padding-bottom: 20px;
     }

     /* #rotate-device-container {
        display: block; */
     /* } */
 }

 @media only screen and (max-width: 720px) and (min-height: 600px) {

     #rotate-device-container {
         display: block;
     }
 }

 @media only screen and (max-height: 750px) {
     .mobile-hidden {
         display: none;
     }

     .mobile-visible {
         display: block;
     }


 }

 @media only screen and (max-height: 480px) {
     canvas {
         height: 100vh;
         width: 100%;
         border-radius: 0;
     }

     .content {
         height: 100vh;
         width: 100%;
         border-radius: 0;
     }

     .image-layer {
         border-radius: 0;
     }

     .button-layer {
         height: 100%;
     }

     .desktop-hidden {
        display: unset;
     }
 }