* {
     box-sizing: border-box;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 @supports (-webkit-touch-callout: none) {
     img {
         -webkit-touch-callout: none
     }
 }

 @font-face {
     font-family: Poppins;
     src: url('../../nav/fonts/Poppins/Poppins-Light.ttf');
 }

 body {
     overflow: hidden;
     margin: 0px;
     user-select: none;
     background: #5AB1E7FF;
     background: radial-gradient(circle, #8FD0F7 0%, #5AB1E7FF 100%);
 }

 img#son_monde {
     width: 10vw;
     max-width: 50px;
     position: absolute;
     bottom: 1vh;
     right: 1vw;
     cursor: pointer;
     transition: transform 0.5s ease;
 }

 img#son_monde:hover {
     transform: scale(1.2);
     transform-origin: center;
 }

 input[type='checkbox'] {
     display: none;
 }

 .wrap-collabsible {
     margin: 1.2rem 0;
     position: absolute;
     z-index: 100;
 }

 .lbl-toggle {
     display: block;
     font-family: monospace;
     font-size: 1rem;
     text-transform: uppercase;
     text-align: center;
     padding: 0.1rem;
     color: #DDD;
     background: rgb(98, 139, 130);
     cursor: pointer;
     border-radius: 7px;
     transition: all 0.25s ease-out;
 }

 .lbl-toggle:hover {
     color: #FFF;
 }

 /* .lbl-toggle::before {
     content: ' ';
     display: inline-block;
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
     border-left: 5px solid currentColor;
     vertical-align: middle;
     margin-right: .7rem;
     transform: translateY(-2px);
     transition: transform .2s ease-out;
 }

 .toggle:checked+.lbl-toggle::before {
     transform: rotate(90deg) translateX(-3px);
 } */

  .lbl-toggle::after {
     content: ' ';
     display: inline-block;
     border-top: 8px solid transparent;
     border-bottom: 8px solid transparent;
     border-left: 8px solid currentColor;
     vertical-align: middle;
     margin-left: .7rem;
     transform: translateY(-2px);
     transition: transform .2s ease-out;
 }

 .toggle:checked+.lbl-toggle::after {
     transform: rotate(90deg) translateX(-3px);
 }

 .collapsible-content {
     max-height: 0px;
     overflow: hidden;
     transition: max-height .25s ease-in-out;
 }

 .toggle:checked+.lbl-toggle+.collapsible-content {
     //max-height: 350px;
     max-height: 90vh;
 }

 .toggle:checked+.lbl-toggle {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
 }

 .collapsible-content .content-inner {
     background:rgba(98, 139, 130,.2);
     border-bottom: 1px solid rgba(0, 105, 255, .45);
     border-bottom-left-radius: 7px;
     border-bottom-right-radius: 7px;
     padding: 0;
 }

 .content-inner {
     overflow-y: auto;
     height: fit-content;
     width: 10em;
     line-height: 1em;
 }

 .collapsible-content .content-inner::-webkit-scrollbar {
     -webkit-appearance: none;
 }

 .collapsible-content .content-inner::-webkit-scrollbar:vertical {
     width: 11px;
 }

 .collapsible-content .content-inner::-webkit-scrollbar:horizontal {
     height: 11px;
 }

 .collapsible-content .content-inner::-webkit-scrollbar-thumb {
     border-radius: 8px;
     border: 2px solid white;
     /* should match background, can't be transparent */
     background-color: rgba(0, 0, 0, .5);
 }

 canvas {
     cursor: grab
 }

 .loader {
     position: absolute;
     height: 100vh;
     width: 100vw;
     z-index: 101;
     display: flex;
     justify-content: center;
     align-items: center;
     pointer-events: none;
 }

 #preloader {
     visibility: hidden;
     opacity: 0;
     transition: opacity 500ms ease-in, visibility 0ms ease-in 500ms;
 }

 #preloader.show {
     visibility: visible;
     opacity: 1;
 }

 #annotationsPanel {
     display: flex;
     z-index: 100;
 }

 #annotationsPanel ul {
     color: white;
     font-family: monospace;
     padding: 0;
     list-style-type: none;
     margin: 0;
     max-height: 85vh;
 }

 .annotationLabel {
     color: #ffffff;
     font-family: monospace;
     pointer-events: none;
     font-size: 17px;
 }

 .annotationDescription {
     color: #ffffff;
     font-family: monospace;
     pointer-events: none;
     font-size: 14px;
     position: absolute;
     left: 25px;
     padding: 1em;
     width: 200px;

     background-color: rgba(151, 194, 184, 0.8);

     border-radius: 0.5em;
     transition: opacity 0.5s;
     display: none;
 }

 .annotationButton {
     width: 100%;
     height: auto;
     padding: 1vh;
     font-family: monospace;
     background-color: rgba(98, 139, 130, 0.8);
     border: solid 1px rgb(151, 194, 184);
     color: white;
     text-align: left;
     padding-left: 10px;
     cursor: pointer;
 }

 #jeux {
     position: absolute;
     z-index: 200;
     right: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
     padding: 1vw;
 }

 #jeux>div {
     background-color: white;
     border-radius: 30px;
     padding: 2em;
     box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
     transition: all 1s;
     transition-behavior: allow-discrete;
     scale: 1;
     opacity: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;

 }

 #jeux.closed {
     display: none;
     opacity: 0;
     scale: 0;
     width: 0;
 }

 #jeux h1 {
     font-family: Poppins;
     color: rgba(98, 139, 130, 0.8);
     font-size: 1.5em;
     margin: 0;
     padding: 0 0 10px 0
 }

 #jeux p {
     font-family: Poppins;
     font-size: clamp(10px, 3vw, 18px);
     max-width: 300px;
     color: #666666;
 }

 #jeux img {
     width: 90%;
     max-width: 400px;
     border-radius: 20px;
 }

 #jeux a {}

 #jeux a img {
     width: 50px;
     height: 50px;
 }

 @media (orientation: landscape) {
     #jeux>div {
         border-radius: 30px;
         width: auto;
         padding: 2vw;
     }

     #jeux img {
         max-width: 300px;
     }

     #jeux p {
         //font-size: clamp(10px, 3vw, 18px);
         flex-wrap: wrap;
     }

 }

 @media (orientation: portrait) {
     #jeux {
         position: absolute;
         z-index: 200;
         bottom: 0;
         display: flex;
         flex-direction: column;
         justify-content: end;
         align-items: center;
         width: 100vw;
         padding: 0;
         margin: 0;

         height: auto;
     }


     #jeux>div {
         width: 100vw;
         padding: 0;
         border-radius: 0;
     }

     #jeux p {
         font-family: Poppins;
         font-size: 3vw;
         margin-block-start: 0;
     }

     #jeux h1 {
         font-family: Poppins;
         color: rgb(151, 194, 184);
         font-size: 4vw;
         padding: 0 0 0 0
     }

     #jeux img {
         max-width: 300px;
     }

 }