@font-face {
    font-family: "main";
    src: url(calluna.otf);
  }


  html {
    min-height: -webkit-fill-available;
    scroll-behavior: smooth;
  }

  body {
    background-color: rgb(0, 0, 0);
    margin: 0%;
    position: relative;
    font-family: "main", 'Times New Roman', serif;
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }


  h1{
    color: antiquewhite;
    font-size: 5vw;
    margin: 0;
    letter-spacing: 1vw;
    }
      
      
  @media (max-width: 600px) {h1 {font-size: 4vh; font-weight: 500;}}
    
    
  h2{
    color: antiquewhite;
    font-size: 7.2vh;
    margin: 0;
    }
      
      
  @media (max-width: 600px) {h2 {font-size: 28px; line-height: 10vh;}}
    
    
  h3{
    color: antiquewhite;
    font-size: 5vh;
    margin-left: 2vw;
    }
      
      
  @media (max-width: 600px) {h3 {font-size: 21px; margin: 10px}}
    
    
  h4{
    color: antiquewhite;
    font-size: 2vw;
    margin: 0;
    }
      
      
  @media (max-width: 600px) {h4 {font-size: 32px; margin-bottom: 24px}}



  .choice {
    height: 100vh;
    width: 100vw;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }

  .choice-slate {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;
    width: 800px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3));
    border-radius: 32px;
    border-style: solid;
    border-width: 2px;
    border-color: rgb(108, 108, 108);
  }

  #flag {
    position: absolute;
    margin-left: 85%;
    margin-top: -40%;
    height: 45px;
    width: 45px;
    opacity: 0.4;
    cursor: pointer
  }

  .browsing-question {
    color: antiquewhite;
    font-size: 24px;
  }

  .browsing-options {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 50%;
    width: 80%;
  }

  .browsing-option {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .icon-container {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(51, 51, 51);
    border-radius: 16px
  }

  #corporate-container {background-color: rgba(0, 0, 0, 0.8)}
  #private-container {background-color: rgba(0, 0, 0, 0.8)}

  .browsing-icon {
    height: 70px;
    width: 70px;
    margin: 10px
  }

  #corporate-icon {fill:rgb(50, 64, 80)}
  #private-icon {fill:rgb(50, 36, 66)}

  @media (max-width: 600px) {.choice-slate {height: max(50vh, 270px); width: 80vw}}
  @media (max-width: 600px) {.browsing-options {height: 60%; width: 100%}}
  @media (max-width: 600px) {#flag {display: none}}
  @media (max-width: 600px) {}

  .browsing-answer {
    color: antiquewhite;
    font-size: 18px;
    text-align: center;
  }

  #menu{
    position: fixed;
    height:100vh;
    width: 15vw;
    background-color: rgb(5, 5, 5);
    display: flex;
    flex-direction: column;
  }

  #top-buttons{
    display: flex;
    flex-direction: row;
    height: 4vw;
  }

  .top-div{width: 5vw; height: 4vw}
  
  .spacer{flex: 1}

  .triple-spacer{flex: 3}

  .to-private {height: 52px; 
    width: 52px;
    margin-left: 10px;
    margin-top: -2px}

  .language{
    height: 35px;
    width: 35px;
    margin-top: 1vh;
    margin-left: 1vw;
    cursor: pointer
  }

  .clientelle{
    height: 46px;
    width: 46px;
    margin-top: 1vh;
    margin-left: 1vw;
  }

  #logo{
    height: 25vh;
    background-image: url(Images/PELogo.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .button-container{
    display: flex;
    flex-direction: row;
    text-align: center;
    width: 15vw;
  }

  #menu-buttons{
    flex: 3;
  }

  .menu-button{
    color: antiquewhite;
    background-color: rgb(21, 21, 21);
    font-size: 1vw;
    margin: 1vh;
    width: 8vw;
    height: 5.5vh;
    border-width: 0;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .menu-button:hover{
    background-color: rgb(123, 123, 123);
  }

  .menu-button:active{
    background-color: rgb(255, 255, 255);
    color: black
  }

  .mobile-nav {display: none}

  #mobile-bar {
    position:fixed;
    height: 8vh;
    width: 100vw;
    background-color: rgb(5, 5, 5);
    z-index: 5;
    display: none;
    flex-direction: row;
  }

  .mobile-bar-div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8vh
  }
  .mobile-language {height: 5vh; opacity: 0; pointer-events: none;}
  
  .mobile-spacer {flex: 1; display: none}

  .mobile-logo {height: 80%; opacity: 0.5;}

  .mobile-menu-icon {
    height: 5vh;
    width: 5vh;
    margin: 1.5vh;
    background-image: url(Images/mobile-icon.png);
    background-size: cover;
    background-position: center;}

  #mobile-menu {
    position:fixed;
    display: flex;
    flex-direction: column;
    height: 45vh;
    width: 100%;
    margin-top: -80vh;
    z-index: 4;
    transition: all 0.2s;
  }

  .mobile-link {text-decoration: none}

  .mobile-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    height: 7vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
    background-color: rgba(18, 11, 3, 0.9);
    border-style: solid;
    border-width: 2px;
    border-color: rgb(96, 90, 83);
    border-radius: 5px;
  }

  .mobile-menu-text{
    color: antiquewhite;
    font-family: Geneva, Verdana, sans-serif;
  }

  .content{
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 85vw;
    height: 100vh;
    margin-left: 15vw;
    background-color: rgb(0, 0, 0);
    scroll-behavior: smooth;
  }

  #home{
    height: 100vh;
    width: 100%;
    background-color:black;
  }

  .mobile-menu-spacer {
    width: 100%;
    height: 8vh;
    display: none}

  #titlebanner{
    width: 100%;
    height: 25vh;
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/TitleBanner.webp);
    background-size: cover;
    background-position: center;
    text-align: center;
    line-height: 25vh;
  }

  #title{
    color: antiquewhite;
    font-size: 5vw;
    margin: 0;
    letter-spacing: 1vw;
  }

  #taglinebanner{
    width: 100%;
    height: 10vh;
    background-color: black;
    text-align: center;
    line-height: 6vh;
  }

  #tagline{
    color: antiquewhite;
    font-size: 2vw;
    margin: 0;
  }

  #eventbanner-container{
    display: flex;
    flex-direction: row;
    height: 100vh;
    padding: 1vh;
  }

  .bannerlink{text-decoration: none}
  .email-link:link{color: antiquewhite}

  .event-img{
    height: 62vh;
    width: 24vw;
    position: relative;
    background-size: cover;
    background-position: center;
  }

  .event-gradient{
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    transition: opacity 0.6s;
  }

  #room-img{background-image: url(Images/room.webp)}
  #game-img{background-image: url(Images/competition.webp)}
  #hunt-img{background-image: url(Images/hunt.webp)}

  #room-gradient{
    background: linear-gradient(to bottom, 
    rgba(73, 2, 2, 0.75), 
    rgba(38, 1, 1, 1))}

  #game-gradient{
    background: linear-gradient(to bottom, 
    rgba(47, 0, 94, 0.75), 
    rgba(23, 0, 44, 1))}

  #hunt-gradient{
    background: linear-gradient(to bottom, 
    rgba(0, 35, 67, 0.75), 
    rgb(0, 35, 67))}

  .event-img:hover .event-gradient{
    opacity: 0.6;
  }

  .home-event-div{
    position: absolute;
    z-index: 3;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
  }

  .home-banner-title {
    color: antiquewhite;
    font-size: 2.1vw;
    font-weight: 400;
  }
  .home-banner-text{
    color: antiquewhite;
    font-size: 2.8vh
  }

  #nrs {font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}

  .home-banner-tagline{
    color: antiquewhite;
    font-size: 2.5vh
  }

  #flash-text{
    transition: all ease-in 0.1s; 
    transition: all ease-out 0.1s;
  }

  #hunt-img:active #flash-text{
    color: white;
    font-weight: 900;
  }

  #about{
    min-height: 100vh;
    width: 100%;
    background-image: url(Images/about.webp);
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
  }

  #transitionbanner-in{
    width: 100%;
    height: 5vh;
    background: linear-gradient(to bottom, black, rgba(0, 0, 0, 0))
  }

  #about-div{
    background: linear-gradient(to bottom, 
    rgba(23, 17, 9, 0.95),
    rgba(23, 17, 9, 0.8));
    min-width: 10vw;
    max-width: 60vw;
    min-height: 10vh;
    border-radius: 15px;
    margin: auto;
    padding-left: 3vw;
    padding-right: 3vw;
    padding-top: 3vh;
    padding-bottom: 3vh;
    text-align: justify;
    text-justify: distribute;
  }

  #about-text{
    color: antiquewhite;
    margin: 5vw, 5vh;
    font-size: 3vh;
    line-height: 5vh;
  }

  #transitionbanner-out{
    width: 100%;
    height: 5vh;
    background: linear-gradient(to top, black, rgba(0, 0, 0, 0))
  }
  
  .sectionbanner{
    width: 100%;
    height: 20vh;
    background-size: cover;
    background-position: center;
    text-align: center;
    line-height: 20vh;
  }

  #room-events {margin-bottom: 50vh;}

  #room-events-banner{
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/RoomsBanner.webp);
  }

  .minor-tagline{
    color: antiquewhite;
    font-size: 1.5vw;
    margin: 0;
    font-style: italic;
  }

  .event-text {
    color: antiquewhite;
    margin: 5vw, 5vh;
    font-size: 3vh;
  }

  .mobile-break {display: none}

  .event-instruction-grid {
    height: 50vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 8fr 1fr;
    grid-auto-rows: 1fr;
  }

  #horizontal-grid-spacer {grid-column: span 5}
  
  #vertical-grid-spacer {grid-row: span 3}

  .instructions-cell {
    height: 12vh; 
    display:flex;
    align-items: center;
  }

  .product-container{
    width: 70vw;
    height: 45vh;
    margin-left: 7.5vw;
    margin-right: 7.5vw;
    margin-top: 5vh;
    margin-bottom: 5vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  #rooms-container {background-color: rgb(20, 2, 2)}
  #games-container {background-color: rgb(7, 2, 15); height: 52vh}

  .product-header{
    width: 100%; 
    height: 11vh;
    display: flex;
    flex-direction: row;
    box-shadow: 0px 0px 16px 8px rgba(5, 5, 5, 0.75);
  }

  #rooms-header {background: linear-gradient(to right, rgba(45, 1, 1, 1), rgba(45, 1, 1, 0.5));}
  #games-header {background: linear-gradient(to right, rgba(16, 1, 39, 1), rgba(16, 1, 32, 0.5));}

  .product-title{
    color: antiquewhite;
    font-size: 5vh;
    margin-left: 2vw;
  }

  .difficulties-text{
    color: rgb(154, 141, 125);
    font-size: 1.8vh;
    margin-right: 4vh;
    margin-top: 0.85vh
  }

  .unavailable-difficulty {
    color: rgb(51, 46, 41);
    font-size: 2vh;
    margin-right: 2vh;}

  .product-title-div{
    flex: 8; 
    display: flex;
    align-items: center}

  .difficulties-container {
    display: flex;
    flex-direction: row;
  }

  .difficulties-mention-div {
    display: flex;
    align-items: top;
    justify-content: end;
  }

  .offered-difficulties-div {
    display: flex;
    align-items: top;
    justify-content: right;
  }

  .product-body{flex: 13; display: flex;}

  .product-img-container{
    display: flex;
    flex: 8;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .product-img {
    height: 100%;
    width: 100%;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    box-shadow: 0px 0px 16px 8px rgba(5, 5, 5, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fingerprint {
    display: none;
    fill: rgb(255, 255, 255); 
    height: 150px;
    opacity: 0.5}
    
  .fade {
    animation: fade 1s ease-in-out forwards;
  }
  
  @keyframes fade {
  0% {opacity: 0}
  40% { opacity: 1 }
  100% { opacity: 0}
  }

  #whispers-img {background-image: url(Images/whispers.webp)}
  #monolith-img {background-image: url(Images/monolith.webp); background-position: top;}
  #damocles-img {background-image: url(Images/damocles.webp)}
  #heist-img {background-image: url(Images/criminal.webp)}
  #secret-img {background-image: url(Images/illuminati.webp)}
  #school-img {background-image: url(Images/magic.webp)}

  .product-img-overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.6s;
    background: linear-gradient(to bottom, 
    rgb(20, 4, 4), rgb(0, 0, 0));
    display: flex;
    text-align: center;
  }

  .product-img:hover .product-img-overlay{opacity: 0.8}

  .story-container {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
  }

  .story-text {    
    font-size: 1.1vw;
    font-style: italic;
    font-stretch: ultra-condensed;
    color: rgb(154, 141, 125);
    text-align: justify;
    text-justify: distribute;
    margin: auto 1vh;
  }

  .product-text {
    display: flex;
    flex-direction: column;
    flex: 10;
    justify-content: center;
    align-content: center;
    
  }

  .product-description {
    display: flex;
    flex: 5;
    align-items: center;
    justify-content: center;
    text-align: justify;
    text-justify: distribute;
    background-color: rgba(40, 23, 52, 0.4);
    border-radius: 4px;
    box-shadow: 0px 0px 16px 8px rgba(5, 5, 5, 0.75);
  }

  .description-text {
    color: antiquewhite;
    font-size: 1.3vw;
    margin-left: 2vw;
    margin-right: 2vw
  }

  .product-specifics {
    display: flex;
    flex-direction: row;
    background-color: rgba(40, 23, 52, 0.4);
    border-radius: 4px;
    box-shadow: 0px 0px 16px 8px rgba(5, 5, 5, 0.75);
  }

  .specifics-subsection {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .specifics-text {color: antiquewhite; font-size: 3vh}

  .book-side {
    display: flex;
    flex: 6;
    align-items: center;
    justify-content: center;
  }

  .book-button-container{
    height: 100%;
    width: 100%;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    background-color: rgba(40, 23, 52, 0.4);
    border-radius: 4px;
    box-shadow: 0px 0px 16px 8px rgba(5, 5, 5, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .golden-btn + .golden-btn {margin-top: 1em}

  .golden-btn {
    display: inline-block;
    outline: none;
    font-family: inherit;
    font-size: 1em;
    box-sizing: border-box;
    border: none;
    border-radius: .3em;
    height: 2.75em;
    line-height: 2.5em;
    text-transform: uppercase;
    padding: 0 1em;
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
                inset 0 -2px 5px 1px rgba(139,66,8,1),
                inset 0 -1px 1px 3px rgb(207, 187, 109);
    background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    border: 1px solid #a55d07;
    color: rgb(120,50,5);
    text-shadow: 0 2px 2px rgba(207, 187, 109, 1);
    cursor: pointer;
    transition: all .2s ease-in-out;
    background-size: 100% 100%;
    background-position:center;
  }

  .golden-btn:hover {
    background-size: 150% 150%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
                  inset 0 -2px 5px 1px #b17d10,
                  inset 0 -1px 1px 3px rgba(207, 187, 109,1);
    border: 1px solid rgba(165,93,7,.6);
    color: rgba(120,50,5,.8);
  }
  .golden-btn:active {
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
                inset 0 -2px 5px 1px #b17d10,
                  inset 0 -1px 1px 3px rgba(207, 187, 109,1);
  }


  #game-events{margin-bottom: 50vh}

  #game-events-banner{
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/GamesBanner.webp);
    background-position: bottom;
  }

  #events{
    min-height: 100vh;
    width: 100%;
    background-color:black
  }


  #levels{
    min-height: 100vh;
    width: 100%;
    background-color:rgb(0, 0, 0);
    text-align: center;
  }

  #levelsbanner{
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/LevelsBanner.webp);
  }

  .banner-title{
    color: antiquewhite;
    font-size: 7.2vh;
    margin: 0;
  }

  #levels{margin-bottom: 50vh}

  .levels-content {
    height: 80vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -2px;
  }

  .levels-text{
    color: antiquewhite;
    margin: 5vw, 5vh;
    font-size: 3vh;
  }

  .levels-text-div {
    display: flex; 
    align-items: center;
    line-height: 200%;}

  #level-advice {text-align: left}

  #FAQ{margin-bottom: 50vh}

  #faqbanner{
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/FAQBanner.webp);
  }
  @media (max-width: 600px) {#faqbanner{display: none}}

  #m-faqbanner{
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/m-FAQBanner.webp);
  }
  @media (min-width: 600px) {#m-faqbanner{display: none}}

  .FAQ-content{
    min-height: 80vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: justify; 
    text-justify: distribute;
  }

  .FAQ-section {
    color: rgb(95, 88, 79);
    font-size: 2em;
    margin-left: 10vw;
    margin-right: 20vw;
    margin-top: 2em;
    margin-bottom: 0.8em;
  }

  .FAQ-question {
    color: rgb(255, 225, 187);
    font-size: 1.5em;
    margin-left: 10vw;
    margin-right: 20vw;
    margin-top: 0.75em;
    margin-bottom: 0em;
  }

  .FAQ-answer {
    color: antiquewhite;
    font-size: 1.15em;
    line-height: 150%;
    margin-left: 10vw;
    margin-right: 20vw;
    margin-top: 0.8em;
    margin-bottom: 1em;
  }

  @media (max-width: 600px){.FAQ-content{text-align: left}}
  @media (max-width: 600px){.FAQ-section{font-size: 1.4em;}}
  @media (max-width: 600px){.FAQ-question{font-size: 1.1em;}}
  @media (max-width: 600px){.FAQ-answer{font-size: 1em;}}


  #contact{
    min-height: 100vh;
    width: 100%;
    background-color:rgb(0, 0, 0);
  }

  #contactbanner{
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/contact.webp);
  }

  .contact-content {
    height: 80vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .contact-text-div {align-items: center}

  .contact-text {
    color: antiquewhite; 
    font-size: 3vh;
    }

  .contact-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 2fr 1fr 3fr 2fr;
    grid-template-rows: 3fr 1fr 3fr;
    gap: 2px;
  }

  #horizontal-grid-spacer {grid-column: span 5}
  
  #contact-vertical-grid-spacer {grid-row: span 3}

  .contact-cell {
    display:flex;
    align-items: center;
    justify-content: left;
  }

  .contact-info {
    display:flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 8px 8px rgb(0, 0, 0) inset;
  }

  #phone-div {
    background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.8), 
      rgba(0, 0, 0, 0.8)), 
      url(Images/phone.webp)}

  #email-div {
    background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.9), 
      rgba(0, 0, 0, 0.9)), 
      url(Images/email.webp)}

  .social-media-div {
    height: 25vh; 
    width: 100%; 
    display: flex;
    justify-content: center;
  }

  .social-media-button {
    height: 70px;
    width: 70px;
    margin: 20px;
    background-color: rgb(0, 0, 0);
    border-style: solid;
    border-color: rgb(59, 57, 44);
    border-width: 3px;
    cursor: pointer;
    transition: all 0.2s
  }

  #twitter-button:hover {
    border-color:rgb(29, 161, 242);
    box-shadow: 0 0 8px 3px rgb(29, 161, 242)
  }
  #instagram-button:hover {
    border-color:rgb(221, 42, 123);
    box-shadow: 0 0 8px 3px rgb(221, 42, 123)
  }
  #facebook-button:hover {
    border-color:rgb(66, 103, 178);
    box-shadow: 0 0 8px 3px rgb(66, 103, 178)
  }
  #linkedin-button:hover {
    border-color:rgb(0, 114, 177);
    box-shadow: 0 0 8px 3px rgb(0, 114, 177)
  }

  #twitter-button:hover #twitter-svg{fill:rgb(29, 161, 242)}
  #instagram-button:hover #instagram-svg{fill:rgb(221, 42, 123)}
  #facebook-button:hover #facebook-svg{fill:rgb(66, 103, 178)}
  #linkedin-button:hover #linkedin-svg{fill:rgb(0, 114, 177)}

  .social-media-icon {
    height: 32px;
    width: 32px;
    fill: rgb(59, 57, 44);
    transition: all 0.2s;}
  
  #instagram-svg{height: 30px}
  #facebook-svg{height: 28px}
  #linkedin-svg{height: 48px}


  #footer{
    background-image: linear-gradient(to top, 
    rgba(0, 0, 0, 0.7), 
    rgba(0, 0, 0, 0.9)), 
    url(Images/footer.webp);
    background-position: center;
  }

  .footer-text{
    color: antiquewhite;
    font-size: 3vh;
    margin: 0;
  }

  #booking-section {
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: -10;
    opacity: 0;
    position: fixed;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-content: center;
    justify-content: center;
  }
  
  .booking-slate {
    height: 90vh;
    width: 90vw;
    display: flex;
    flex-direction: column;
    margin-top: 5vh;
    margin-bottom: 5vh;
    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 1));
    border-radius: 32px;
    border-style: solid;
    border-color: rgba(154, 125, 87, 0.436);
    border-width: 2px;
  }

  #bookings-header-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 15vh 5vh;
  }

  .bookings-header-div {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #close-button-container {
    display: flex;
    justify-content: right;
    align-items: top;
  }

  #close-button {
    cursor: pointer;
    height: 32px;
    width: 32px;
    margin-top: 32px;
    margin-right: 32px;
    background-color: rgba(0, 0, 0, 0);
    border-style: none;
    transition: all 0.2s}

  #X-icon {
    height: 32px;
    width: 32px;
    fill: rgb(116, 106, 90);
    transition: all 0.2s;
  }

  #close-button:hover #X-icon{fill:rgb(67, 8, 8)}

  .bookings-grid {
    flex: 1;
    display: grid;
    gap: 2px;
    grid-template-columns: 1fr 7fr 5fr 2fr;
    grid-template-rows: 30% 30% 30% 10%;
  }

  .bookings-grid-vertical-spacer {grid-row: span 3}
  .mobile-grid-vertical-spacer {display: none}

  .booking-event-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .event-grid-vertical-spacer {grid-row: span 3;}

  .event-grid-minor-spacer {grid-row: span 2;}
  
  .question-mark-container {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: right;
  }

  .clarification-div {
    position: absolute;
    background-color: rgba(5, 5, 5, 0.95);
    border-style: solid;
    border-width: 2px;
    border-color: rgb(45, 41, 38);
    left: 175px;
    width: 27vh;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 20px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    pointer-events: none;
    z-index: 15;
  }

  .clarification-text {
    font-size: 2.2vh;
    color: antiquewhite;
    margin: 0 
  }

  .question-mark-container:hover .clarification-div {
    opacity: 1;
  }

  .question-icon {
    height: 18px;
    width: 18px;
    fill: rgb(136, 127, 116);
    transition: all 0.2s;
    cursor: pointer;}

  .current-level-div {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: right;
  }

  .current-level-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
  }

  .current-level-text {
    color: antiquewhite;
    font-size: 1.9vh;
    margin: 5px;
    font-family: Geneva, Verdana, sans-serif;
  }

  .challenge-selector-container {
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
    justify-content: right;}

  .level-changer {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(18, 18, 18);
    left: 3%;
    width: 100px;
    height: 30px;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(97, 97, 97);
    pointer-events: none;
  }

  .change-text {
    font-size: 1.6vh;
    color: antiquewhite;
    font-family: Geneva, Verdana, sans-serif;
    margin-left: -2px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  #challenge-selector {
    width: 100px;
    opacity: 0}
  
  #challenge-selector:focus {opacity: 1;}

  .booking-event-grid {
    display: grid;
    gap: 5px;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    grid-auto-rows: 1fr;
  }

  .test-div {background-color: aqua; width: 200px; height: 100px; margin:10px}

  .booking-text-container {
    display: flex;
    flex-direction: column;
  }

  .booking-input-container {
    display: flex;
    flex-direction: column;
  }

  .booking-text-div{
    display:flex;
    align-items: center;
  }

  .booking-text {
      color: antiquewhite;
      font-size: 2.4vh;
      margin: 5px
  }

  .select-event {
    background-color: rgb(24, 24, 24);
    color: antiquewhite;
    height: 30px;
    width: 190px;
    font-size: 14px;
    padding: 4px;
    border-radius: 4px;
    border-color: rgb(189, 189, 189);
    margin: 5px;
  }

  #duration-div {display: none}
  #duration-text-div {display: none}

  .calendar-div {
    background-color: rgb(5, 5, 5); 
    grid-row: span 2;
    display: grid;
    grid-template-columns: repeat(7, 14.28%);
    grid-template-rows: repeat(8, 12.5%);
  }

  .calendar-text {
    color: antiquewhite;
    font-size: 2.2vh;
    margin: 5px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  }
  @media (max-width: 600px) {.calendar-text {font-size: 14px;}}

  .calendar-header{
    grid-column: span 7;
    display: flex;
    flex-direction: row;
  }

  .previous-month {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .next-month {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .current-month {
    flex: 5; 
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .calendarIcon {height: 25%}

  .weekday {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(19, 15, 41);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .weekdayMarker {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(19, 15, 41);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .dayLabel {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(19, 15, 41);
    grid-column: span 7;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .generatedDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .dayDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: rgb(44, 246, 219);
    transition: all 0.5s;
  }


  #booked-text {
    color: rgb(41, 40, 45);
  }

  #selected-text {
    color: rgb(10, 0, 40);
    font-weight: 900;
  }

  .timeDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .innerTimeDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: rgb(22, 69, 0);
    height: 80%;
    width: 90%;
    transition: all 0.5s;
  }

  .booking-details-container {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .textboxes-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  #venue-question-container {margin-top: 20px}

  .venue-text-box {
    background-color: rgb(24, 24, 24);
    color: antiquewhite;
    font-size: 16px;
    padding: 4px;
    margin: 5px; 
    margin-top: 20px
  }

  .contact-box{
    background-color: rgb(24, 24, 24);
    color: antiquewhite;
    height: 20px;
    font-size: 16px;
    padding: 4px;
    margin: 5px; 
    margin-bottom: 20px
  }

  #venue-question-text {margin-right: 20px;}
  .yesbox {margin-right: 15px; margin-top: -1px}
  .nobox {margin-left: 15px; margin-top: -1px}
  #postcode-textbox {width: 82px}
  #address-textbox {width: 287px}
  #email-textbox {width: 265px}
  #phone-textbox {width: 104px}

  #comment-area {
    background-color: rgb(24, 24, 24);
    color: rgb(90, 90, 90);
    resize: none;
    font-size: 16px;
    width: 395px;
    height: 80px;
    font-family: Geneva, Verdana, sans-serif;
  }


  #other-arrangements-div {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: justify;
    text-justify: distribute;
  }

  .other-arrangements-text {
      color: antiquewhite;
      font-size: min(18px, 1.4vw);
      margin-top: 0;
      margin-bottom: 20px;
      margin-right: 20px;
      margin-left: 20px;
  }

  .to-shop-div {display: flex; flex-direction: column;}

  .price-div {
    flex: 1; 
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #player-price {
    font-weight: 900;
    color: rgb(218, 255, 209);
    display: table;
    margin: 0 auto;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  }

  .terms-agreement-text{
    color: antiquewhite;
    font-size: 12px;
    margin: 5px
  }

  .terms-link {color: antiquewhite}

  .shop-button-container {
    flex: 5; 
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @media (max-width: 600px) {#menu {display: none;}}
  @media (max-width: 600px) {#mobile-bar {display: flex;}}
  @media (max-width: 600px) {#mobile-menu {display: flex;}}
  @media (max-width: 600px) {.mobile-menu-spacer {display: block}}
  @media (max-width: 600px) {.mobile-spacer {display: block}}
  @media (max-width: 600px) {.content {width: 100%;
                                       margin-left: 0;}}

  @media (max-width: 600px) {#eventbanner-container {padding: 0;}}
  @media (max-width: 600px) {.event-img {margin-top: 1vh;
                                         margin-bottom: 1vh;
                                         margin-right: 4%;
                                         margin-left: 4%;
                                         width: 92%;
                                         height: max(23vh, 150px)}}
  @media (max-width: 600px) {#game-img{background-image: url(Images/m-competition.webp); background-position: top}}                                       
  @media (max-width: 600px) {#eventbanner-container {flex-direction: column; height: 76vh}}
  @media (max-width: 600px) {#title {font-size: 4vh; font-weight: 500;}}
  @media (max-width: 600px) {#titlebanner {height: 12vh; 
                                           line-height: 10vh;
                                           background-image: linear-gradient(to bottom, 
                                           rgba(42, 42, 42, 0.281), 
                                           rgb(0, 0, 0)), 
                                           url(Images/m-TitleBanner.webp);}}
  @media (max-width: 600px) {#taglinebanner {height: 5vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));}}
  @media (max-width: 600px) {#tagline {font-size: 16px; line-height: 5vh; margin-top: -2vh}}
  @media (max-width: 600px) {#dark-spacer {background-color: black;}}
  @media (max-width: 600px) {.home-banner-title {font-size: 20px; line-height: 18px;}}
  @media (max-width: 600px) {.home-banner-text {font-size: 16px; line-height: 14px; margin: 0}}
  @media (max-width: 600px) {.home-banner-tagline {font-size: 14px}}
  @media (max-width: 600px) {.wide-screen-break {display:none}}
  @media (max-width: 600px) {.event-gradient {opacity: 0.8}}

  @media (max-width: 600px) {#about {display: flex; 
                                     align-items: center; 
                                     justify-items: auto;
                                     background-image: url(Images/m-about.webp)}}
  @media (max-width: 600px) {#about-div {max-width: none;
                                         width: 80%; 
                                         margin-left: 10%; 
                                         margin-right: 10%;
                                         margin-top: auto;
                                         margin-bottom: auto;
                                         padding: none}}
  @media (max-width: 600px) {#about-text {font-size: 17px;
                                          line-height: 25px;
                                          margin-top: 1.5vh;
                                          margin-bottom: 1.5vh;
                                          margin-left: 10px;
                                          margin-right: 10px}}

  @media (max-width: 600px) {.banner-title {font-size: 28px; line-height: 10vh;}}
  @media (max-width: 600px) {.sectionbanner {height: 10vh}}
  @media (max-width: 600px) {.taglinebanner {height: 5vh}}
  @media (max-width: 600px) {.minor-tagline {font-size: 14px; 
                                             line-height: 12px;
                                             margin-right: 4vh;
                                             margin-left: 4vh}}
  @media (max-width: 600px) {.event-text {font-size: 18px}}
  @media (max-width: 600px) {.mobile-break {display: block}}

  @media (max-width: 600px) {#room-events-banner{background-image: linear-gradient(to bottom, 
                                                                 rgba(42, 42, 42, 0.281), 
                                                                 rgb(0, 0, 0)), 
                                                                   url(Images/m-RoomsBanner.webp)}}
  @media (max-width: 600px) {.event-instruction-grid {height: max(60vh, 500px);
                                                      grid-template-rows: 1fr 3fr 3fr 3fr 1fr;
                                                      justify-items: center;
                                                      align-items: center;}}
  @media (max-width: 600px) {.instructions-cell {align-items: center; justify-content: center;}}
  @media (max-width: 600px) {.product-container {width: 90vw;
                                                 height: max(85vh, 560px);
                                                 margin: 5vw}}
  @media (max-width: 600px) {.product-title {font-size: 21px; margin: 10px}}
  @media (max-width: 600px) {.product-header {flex-direction: column; min-height: 70px;}}
  @media (max-width: 600px) {.product-title-div {flex: 3}}
  @media (max-width: 600px) {.difficulties-container {flex: 2}}
  @media (max-width: 600px) {.difficulties-text {font-size: 11px;
                                                 margin-left: 12px;
                                                 margin-right: 10px;
                                                 margin-bottom: 0}}
  @media (max-width: 600px) {.unavailable-difficulty {font-size: 10px}}
  @media (max-width: 600px) {#difficulties {margin-right: 10px}}
  @media (max-width: 600px) {.product-body {flex-direction: column; height: auto}}
  @media (max-width: 600px) {.product-img-container {margin: 10px; margin-top: 20px; flex: 12}}
  @media (max-width: 600px) {.product-img {margin: 0px}}
  @media (max-width: 600px) {.fingerprint {display: block}}
  @media (max-width: 600px) {.story-text {font-size: 14px;}}
  @media (max-width: 600px) {.product-description {margin: 10px}}
  @media (max-width: 600px) {.description-text {font-size: 16px; margin: 15px}}
  @media (max-width: 600px) {.product-specifics {margin: 10px}}
  @media (max-width: 600px) {.specifics-text {font-size: 20px}}
  @media (max-width: 600px) {.book-side {margin: 10px; flex:5}}
  @media (max-width: 600px) {.book-button-container {margin: 0}}
  @media (max-width: 600px) {#games-container {height: max(95vh, 630px)}}

  @media (max-width: 600px) {#game-events-banner{background-image: linear-gradient(to bottom, 
                                                                  rgba(42, 42, 42, 0.281), 
                                                                  rgb(0, 0, 0)), 
                                                                    url(Images/m-GamesBanner.webp)}}
  
  @media (max-width: 600px) {#levelsbanner{background-image: linear-gradient(to bottom, 
                                                           rgba(42, 42, 42, 0.281), 
                                                           rgb(0, 0, 0)), 
                                                             url(Images/m-LevelsBanner.webp)}}     
                                                                                                                            @media (max-width: 600px) {.levels-text {font-size: 17px; line-height: 150%;}}
  @media (max-width: 600px) {#levels-advice {text-align: center;}}
  @media (max-width: 600px) {#levels-guide {margin-right: 20vw; margin-left: 20vw; text-align: center;}}
  @media (max-width: 600px) {#find-out-button {height: 60px; width: 120px; font-size: 16px}}

  @media (max-width: 600px) {#contactbanner{background-image: linear-gradient(to bottom,
                                                            rgba(42, 42, 42, 0.281),
                                                            rgb(0, 0, 0)), 
                                                            url(Images/m-contact.webp)}}
  @media (max-width: 600px) {.contact-text-div {display: flex; text-justify: distribute}}
  @media (max-width: 600px) {.contact-text {font-size: 15px; margin-right: 20px; margin-left: 20px}}
  @media (max-width: 600px) {#phone {font-size: 11px;}}
  @media (max-width: 600px) {#email {font-size: 11px;}}
  @media (max-width: 600px) {#contact-vertical-grid-spacer {display: none}}
  @media (max-width: 600px) {.contact-grid {grid-template-columns: 1fr 1fr;}}
  @media (max-width: 600px) {.social-media-div {margin-right: 50px; margin-left:50px}}
  @media (max-width: 600px) {.social-media-button {margin: 10px}}
  @media (max-width: 600px) {#twitter-button {border-color:rgb(29, 161, 242); box-shadow: 0 0 8px 3px rgb(29, 161, 242)}}
  @media (max-width: 600px) {#instagram-button {border-color:rgb(221, 42, 123); box-shadow: 0 0 8px 3px rgb(221, 42, 123)}}
  @media (max-width: 600px) {#facebook-button {border-color:rgb(66, 103, 178); box-shadow: 0 0 8px 3px rgb(66, 103, 178)}}
  @media (max-width: 600px) {#linkedin-button {border-color:rgb(0, 114, 177); box-shadow: 0 0 8px 3px rgb(0, 114, 177)}}
  @media (max-width: 600px) {#twitter-svg {fill:rgb(29, 161, 242)}}
  @media (max-width: 600px) {#instagram-svg {fill:rgb(221, 42, 123)}}
  @media (max-width: 600px) {#facebook-svg {fill:rgb(66, 103, 178)}}
  @media (max-width: 600px) {#linkedin-svg {fill:rgb(0, 114, 177)}}

  @media (max-width: 600px) {#footer{background-image: linear-gradient(to top,
                                                     rgba(0, 0, 0, 0.7), 
                                                     rgba(0, 0, 0, 0.9)), 
                                                       url(Images/m-footer.webp); height: 100px; line-height: 100px;}}
  @media (max-width: 600px) {#footer-text{line-height: 100px}}                                                     

  @media (max-width: 600px) {.booking-slate {border-radius: 16px}}
  @media (max-width: 600px) {#bookings-header-grid {width: 90vw; 
                                                    grid-template-rows: 10vh 1fr; 
                                                    grid-template-columns: 50px 1fr 50px;}}
 
  @media (max-width: 600px) {#close-button {margin: 10px}}
  @media (max-width: 600px) {#X-icon {height: 20px}}
  @media (max-width: 600px) {.booking-event-div {width: 90vw}}
  @media (max-width: 600px) {.booking-event-grid {width: 90vw}}
  @media (max-width: 600px) {.mobile-grid-vertical-spacer {display: block; grid-row: span 6; width: 9vw}}
  @media (max-width: 600px) {.booking-text {font-size: 16px;}}
  @media (max-width: 600px) {.booking-slate {height: 250vh; margin-top: 2.5vh}}
  @media (max-width: 600px) {.bookings-grid {grid-template-columns: 1fr 8fr 1fr;
                                             grid-template-rows: 2fr 2fr 5fr 2fr;
                                             width: 90vw;}}
  @media (max-width: 600px) {.bookings-grid-vertical-spacer {display: none}}
  @media (max-width: 600px) {.booking-event-div {width: 72vw}}
  @media (max-width: 600px) {.clarification-div {left: 30px}}
  @media (max-width: 600px) {.calendar-div {width: 72vw; grid-row: span 1}}


  @media (max-width: 600px) {.booking-details-container {grid-row: span 1}}
  @media (max-width: 600px) {.textboxes-div {flex-direction: column;}}
  @media (max-width: 600px) {#venue-question-text {font-size: 15px}}
  @media (max-width: 600px) {#venue-answer {flex-direction: row;}}
  @media (max-width: 600px) {#postcode-textbox {margin: 15px; margin-top: 50px}}
  @media (max-width: 600px) {#address-textbox {width: 60vw; margin: 15px}}
  @media (max-width: 600px) {#phone-textbox {width: 60vw; margin: 15px}}
  @media (max-width: 600px) {#email-textbox {width: 60vw; margin: 15px}}
  @media (max-width: 600px) {#comment-area {width: 60vw; height: 40vw; margin: 15px}}
  @media (max-width: 600px) {.terms-agreement-text {font-size: 14px;}}
  @media (max-width: 600px) {#purchase-button {height: 50px; 
                                               width: 120px; 
                                               font-size: 18px;
                                               background-color: rgb(48, 48, 48);}}
  @media (max-width: 600px) {.other-arrangements-text {font-size: 14px;}}
  




















  


  

  
  #test-puzzle-banner{
    width: 100%;
    height: 35vh;
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/TestPuzzleBanner.webp);
    background-size: cover;
    background-position: center;
    text-align: center;
    line-height: 35vh;
  }

  #test-puzzles-minor-tagline {font-size: 2.6vw;}

  #instructions-container{
    height: 60vh;
    margin-top: 0vh;
    display:flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
  }

  .instruction-container {
    flex: 2;
    display:flex;
    align-items: center;
    text-align: center;
  }

  .instructions{
    color: antiquewhite;
    font-size: 3vh;
    margin: 0;
  }

  .puzzle-container{
    width: 100%;
    min-height: 100vh;
    margin-top: 50vh;
    margin-bottom: 20vh;
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-justify: distribute;
    background-color: rgb(0, 0, 0);
  }

  .puzzle-title{
    color: antiquewhite;
    font-size: 2vw;
    margin: 0;
  }

  .puzzle-text{
    color: antiquewhite;
    font-size: 3vh;
    margin: 10px;
  }








  .message {
    margin: 12px;
    width: 20vw; 
    min-width: 330px; 
    height: auto}
  
  #message2 {
    width: 30vw; 
    min-width: 330px; 
    height: auto}

  #message3 {
    width: 30vw; 
    min-width: 330px; 
    height: auto}

  .textBox1 {
    background-color: rgb(24, 24, 24);
    color: rgb(175, 255, 247);
    height: 26px;
    width: 154px;
    font-size: 18px;
    padding: 4px;
    text-transform: uppercase;
    margin: 24px
  }

  .textBox2 {
    background-color: rgb(24, 24, 24);
    color: rgb(230, 214, 255);
    height: 26px;
    width: 154px;
    font-size: 18px;
    padding: 4px;
    text-transform: uppercase;
    margin: 24px
  }

  .textBox3 {
    background-color: rgb(24, 24, 24);
    color: rgb(255, 188, 101);
    height: 26px;
    width: 154px;
    font-size: 18px;
    padding: 4px;
    text-transform: uppercase;
    margin: 24px
  }

  ::placeholder {color: rgb(112, 112, 112)}
  :-ms-input-placeholder {color: rgb(42, 42, 42)}
  ::-ms-input-placeholder {color: rgb(42, 42, 42)}

  .indicator {
    height: 20px;
    width: 20px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(48, 48, 48);
    background-color: rgb(10, 10, 10);}


    .upcoming-element{margin-top: -2px;}








  .select1 {
    background-color: rgb(24, 24, 24);
    color: rgb(175, 255, 247);
    height: 37px;
    width: 54px;
    font-size: 18px;
    padding: 4px;
    border-radius: 4px;
    border-color: rgb(189, 189, 189);
    margin: 24px
  }

  .select2 {
    background-color: rgb(24, 24, 24);
    color: rgb(230, 214, 255);
    height: 37px;
    width: 54px;
    font-size: 18px;
    padding: 4px;
    border-radius: 4px;
    border-color: rgb(189, 189, 189);
    margin: 24px
  }

  .select3 {
    background-color: rgb(24, 24, 24);
    color: rgb(255, 188, 101);
    height: 37px;
    width: 54px;
    font-size: 18px;
    padding: 4px;
    border-radius: 4px;
    border-color: rgb(189, 189, 189);
    margin: 24px
  }



  
  .matchstick{
    width: 42vh; 
    max-width: 80%;
    margin: 12px}

  .matchstick-text{text-align: justify; width: 50vw}











  #rune-container {height: 130vh}
  .rune-series {
    width: 3vw; 
    min-width: 30px; 
    height: auto;
    margin: 12px
  }

  #rune-text {margin: 24px}

  .rune-answers{
    display: grid;
    grid-template-columns: repeat(8, 6vh);
    gap: 2vw;
  }

  .rune-option{
    display: flex;
    justify-content: center;
    align-content: center;
  }

  .rune{
    width: 3vw; 
    min-width: 30px; 
    height: 3vw;
    min-height: 30px
  }









  #bongard-container{height: 180vh;}

  .bongard-examples{
    width: 65vh; 
    max-width: 95%;
    margin: 12px}

  .bongard-answers{
    display: grid;
    grid-template-columns: repeat(5, 13vh);
  }

  .bongard-text{
    color: antiquewhite;
    font-size: 3vh;
    margin: 0 auto;
    line-height: 10vh;
  }

  .bongard{
    width: 15vh; 
    max-width: 78px; 
    height: auto; 
    margin: 12px}

  .grid-cell{display: flex; flex-direction: column}
  .radio-button{vertical-align: middle;}

  .grid-cell {
    display: grid; 
    align-content: center; 
    justify-content: center;}
  
  .a {
    display: grid; 
    align-content: center; 
    justify-content: right
  }

  .b {
    display: grid; 
    align-content: center; 
    justify-content: left
  }

  #coins1-container{height: 160vh}
  #coins2-container{height: 182vh}
  #coins3-container{height: 200vh}
  .coinrules-container{
    width: 50vw;
    display: flex;
    flex-direction: row;
  }
  .instruction-text-container{
    flex: 6;
    text-align: justify;
    justify-content: center;
    text-justify: distribute;
    display: flex;
    flex-direction: column;
  }
  .coinstructions {width: 10vw; min-width: 20vh; margin: 12px}
  #coinstructions3 {width: 14vw}
  #coins1-img{
    height: 54vh;
    max-height: 95vw; 
    width: auto;
    margin: 12px}

  #coins2-img{
    height: 76vh; 
    max-height: 99vw; 
    width: auto;
    margin: 12px}

  #coins3-img{
    height: 82vh; 
    max-height: 80vw; 
    width: auto;
    margin: 12px}

  .next-container{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .next-button-1 {
    margin-bottom: 20vh;
    background-color: rgb(24, 24, 24);
    padding: 2vh 5vh;
    font-size: 3vh;
    border-radius: 20px;
    color: rgb(175, 255, 247);
    border-color: rgb(175, 255, 247);
    cursor: pointer;
  }

  .next-button-1:hover {
    background: linear-gradient(rgb(36, 54, 53), rgb(25, 37, 35));
  }
  
  .next-button-2 {
    margin-bottom: 20vh;
    background-color: rgb(24, 24, 24);
    padding: 2vh 5vh;
    font-size: 3vh;
    border-radius: 20px;
    color: rgb(214, 190, 250);
    border-color: rgb(214, 190, 250);
    cursor: pointer;
  }

  .next-button-2:hover {
    background: linear-gradient(rgb(45, 38, 56), rgb(33, 27, 41));
  }

  .next-button-3 {
    margin-bottom: 20vh;
    background-color: rgb(24, 24, 24);
    padding: 2vh 5vh;
    font-size: 3vh;
    border-radius: 20px;
    color: rgb(255, 188, 101);
    border-color: rgb(255, 188, 101);
    cursor: pointer;
  }

  .next-button-3:hover {
    background: linear-gradient(rgb(54, 40, 20), rgb(35, 26, 14));
  }

  #emboldened {font-weight:900; color: white; text-decoration: underline;}

  @media (min-width: 1000px) {
    input[type="radio"] {
      -ms-transform: scale(1.5); /* IE 9 */
      -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
      transform: scale(1.5);
    }}
  @media (max-width: 600px) {#test-puzzle-banner {height: 15vh;
                                                  background-image: linear-gradient(to bottom, 
                                                  rgba(42, 42, 42, 0.281), 
                                                  rgb(0, 0, 0)), 
                                                  url(Images/m-TestPuzzleBanner.webp)}}
  @media (max-width: 600px) {#puzzle-banner-title {
    font-size: 46px; line-height: 15vh;}}
  @media (max-width: 600px) {#test-puzzles-minor-tagline {font-size: 26px}}
  @media (max-width: 600px) {.instruction-container {width: 60%}}
  @media (max-width: 600px) {#instructions-container {margin-bottom: 50vh}}
  @media (max-width: 600px) {
    .coinrules-container {width: 90%; flex-direction: column}}
  @media (max-width: 600px) {
    .puzzle-container {
      width: 100%; 
      margin-top: 0vh;
      margin-bottom: 30vh
    }}
  @media (max-width: 600px) {#bongard-container {height: auto}}
  @media (max-width: 600px) {#coins1-container {height: auto}}
  @media (max-width: 600px) {#coins2-container {height: auto}}
  @media (max-width: 600px) {#coins3-container {height: auto}}
  @media (max-width: 600px) {.coinstructions {margin-top: 32px}}
  @media (max-width: 600px) {.matchstick-text {width: 90%}}
  @media (max-width: 600px) {
    .rune-answers {
      grid-template-columns: repeat(8, 12vw);
      grid-template-rows: 6vh; 
      gap: 0
    }}
  @media (max-width: 600px) {
    .bongard-answers {grid-template-columns: 15vw 15vw 30vw 15vw 15vw}}
  @media (max-width: 600px) {.puzzle-text {font-size: 18px}}
  @media (max-width: 600px) {
    .puzzle-title {font-size: 32px; margin-bottom: 24px}}
  @media (max-width: 600px) {.spacer {display: none;}}








  .result-content{
    display: grid;
    grid-template-columns: 10vw 20vw 40vw 20vw 10vw;
    grid-template-rows: 1fr;
  }

  .regular-sidebar {background: linear-gradient(black, antiquewhite)}
  .challenging-sidebar {background: linear-gradient(black, rgb(175, 255, 247))}
  .ambitious-sidebar {background: linear-gradient(black, rgb(214, 190, 250))}
  .outrageous-sidebar {background: linear-gradient(black, rgb(255, 188, 101))}

  .virdict-div {
    height: 55vh;
    display: flex;
    flex-direction: column}

  .result-div {
    display:flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
    }
  
  .stat-div {
    display:flex;
    flex-direction: column;
    flex: 0.5;
    text-align: center;
  }
  
  .stat-text {
      font-size: 1.75vh;
      color: rgb(99, 86, 59);
  }
  
  #result-text {font-size: 4vh;}

  #regular-text {font-size: 5vh; color: antiquewhite; font-weight: 600}
  #challenging-text {font-size: 5vh; color: rgb(175, 255, 247); font-weight: 600}
  #ambitious-text {font-size: 5vh; color: rgb(214, 190, 250); font-weight: 600}
  #outrageous-text {font-size: 5vh; color: rgb(255, 188, 101); font-weight: 600}

  #result {
    align-content: center;
    justify-content: center;
    align-items: center
  }

  #identity {
    text-align: justify;
    text-justify: distribute;}

  #identity-text {font-size: 2.5vh;font-style: italic}

  #button-div {
    align-content: center;
    justify-content: center;
    align-items: center;
    word-break: break-all;
  }


  @media (max-width: 600px) {.virdict-div {height: 75vh}}
  /* @media (max-width: 600px) {#empty-div {display: none}} */
  @media (max-width: 600px) {
    .result-content {grid-template-columns: 3fr 1fr 220px 1fr 3fr;}}
  @media (max-width: 600px) {#result-text {font-size: 16px}}
  @media (max-width: 600px) {#challenging-text {font-size: 28px}}
  @media (max-width: 600px) {#outrageous-text {font-size: 28px}}
  @media (max-width: 600px) {#identity-text {font-size: 16px}}
  @media (max-width: 600px) {#identity {text-align: left}}
  @media (max-width: 600px) {.menu-button {height: 60px; width: 120px; font-size: 16px}}
  @media (max-width: 600px) {.stat-text {font-size: 12px}}
  

  







  #success-banner{
    width: 100%;
    height: 35vh;
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/success.webp);
    background-size: cover;
    background-position: center;
    text-align: center;
    line-height: 35vh;
  }


  .success-sidebar {background: linear-gradient(black, rgb(0, 34, 46))}
  #thanks-text {font-size: 5.5vh;}
  #success-text {font-size: 2.8vh; color: antiquewhite; font-weight: 600}
  #changes-text {font-style: italic}


  @media (max-width: 600px) {#success-banner{background-image: linear-gradient(to bottom, 
                                                             rgba(42, 42, 42, 0.281), 
                                                             rgb(0, 0, 0)), 
                                                               url(Images/m-success.webp);}}
  @media (max-width: 600px) {#thanks-text {font-size: 32px}}
  @media (max-width: 600px) {#success-banner-title {font-size: 46px}}
  @media (max-width: 600px) {#success-text {font-size: 22px}}
  @media (max-width: 600px) {#changes-text {font-size: 14px}}
  
  
  
  
  
  
  
  
  
  
  
    .referral-outer-div{
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0, 0, 0);
    scroll-behavior: smooth;
  }


  #referral-banner{
    width: 100%;
    height: 35vh;
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/Referral.webp);
    background-size: cover;
    text-align: center;
    line-height: 35vh;
  }

  @media (max-width: 600px) {#referral-title {
    font-size: 28px; line-height: 15vh;}}

  .referral-sidebar {background: linear-gradient(black, rgb(145, 87, 12))}


  @media (max-width: 600px) {#referral-banner {height: 15vh;
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.281), 
    rgb(0, 0, 0)), 
    url(Images/m-Referral.webp)}}


  .referral-content{
    display: grid;
    grid-template-columns: 10fr 20fr 40fr 20fr 10fr;
    grid-template-rows: 1fr;
  }

  @media (max-width: 600px) {
    .referral-content {grid-template-columns: 3fr 1fr 220px 1fr 3fr;}}


  .referral-info-div {
    height: auto;
    display: flex;
    flex-direction: column}


  .referral-modular-div {
    display:flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    }
  
  #first-referral-div {
      text-align: left; 
      margin-top: 0px;
      margin-bottom: -20px;
  }

  .referral-large-text{
    color: rgb(120, 110, 98);
    font-size: 3.5vh;
    line-height: 4.5vh;
    font-style: italic;
  }

    #referral-games-button{
        width: 9vw;
    }

  @media (max-width: 600px) {
    .referral-large-text {font-size: 15px;
                          line-height: 20px;
                          margin-top: -5px}}

  @media (max-width: 600px) {
    #referral-games-button {font-size: 1em; width: auto; padding: 3vh}}

  .referral-medium-text{
    color: antiquewhite;
    font-size: 3vh;
    line-height: 4vh;
  }
  

  @media (max-width: 600px) {
    .referral-medium-text {font-size: 15px;
                          line-height: 18px;}}



  .referral-small-text{
    color: antiquewhite;
    font-size: 2vh;
    line-height: 5vh;
  }
  

  @media (max-width: 600px) {
    .referral-small-text {font-size: 10px;
                          line-height: 12px;}}

  #email-error-div {display: none}

  .error-text {
    color: rgb(181, 0, 0);
    font-size: 1em;
    line-height: 1.1em;
    margin-top: -5px
  }

  .generate-code-button {
    background-color: rgb(24, 24, 24);
    padding: 2vh 5vh;
    font-size: 3vh;
    border-radius: 20px;
    color: rgb(2, 143, 56);
    border-color: rgb(2, 143, 56);
    cursor: pointer;
  }

  .generate-code-button:disabled,
    button[disabled]{
      color: rgb(104, 104, 104);
      border-color: rgb(104, 104, 104);
      cursor: default
}

  @media (max-width: 600px) {
    .generate-code-button {padding: 12px 15px;
                          font-size: 1em;}}

  #code-div {display: none}

  .referral-code-text {
    color: rgb(32, 208, 100);
    font-size: 2em;
  }

  @media (max-width: 600px) {
    .referral-code-text {font-size: 1.6em;}}

  #FAQ-title{display:flex}

  @media (max-width: 600px) {
    #FAQ-title {display:none}}

  #mobile-FAQ-title {display:none}

  @media (max-width: 600px) {
    #mobile-FAQ-title {display:flex}}

  .referral-FAQ-title{
    color: antiquewhite;
    font-size: 4vh;
    line-height: 5vh;
  }

  @media (max-width: 600px) {
    .referral-FAQ-title {font-size: 30px;
                          line-height: 30px;}}

  #referral-FAQ-div {
    display: block;
    text-align: left;
    margin-top: 0px;
    }
  

  .referral-FAQ-question {
    color: rgb(255, 225, 187);
    font-size: 1.5em;
    margin-top: 0.75em;
    margin-bottom: 0em;
  }

  @media (max-width: 600px) {
    .referral-FAQ-question {font-size: 1.1em}}

  .referral-FAQ-answer {
    color: antiquewhite;
    font-size: 1.15em;
    line-height: 150%;
    margin-top: 0.8em;
    margin-bottom: 1.8em;
  }

  @media (max-width: 600px) {
    .referral-FAQ-answer {font-size: 1em}}
  
  @media (max-width: 600px) {
    #referral-link-button {height: 50px; width: 120px; font-size: 16px}}
  
  #last-referral-div {margin: 100px}
  
  
  
   .gen-button{
    color: rgb(169, 241, 236);
    background-color: rgb(35, 35, 35);
    font-size: 1.5vw;
    font-family: inherit;
    margin: 1vh;
    width: 15vw;
    height: 3.4vw;
    border-width: 0;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .gen-button:hover{
    background-color: rgb(123, 123, 123);
  }

  .gen-button:active{
    background-color: rgb(255, 255, 255);
    color: black
  }

  .gen-button:disabled,
    button[disabled]{
      color: rgb(104, 104, 104);
      cursor: default;
      pointer-events: none;
}

  #confirmation-button {width: 10vw}
  @media (max-width: 600px) {
    #confirmation-button {width: 45vw}}






.gift-content{
    display: grid;
    grid-template-columns: 10vw 20vw 40vw 20vw 10vw;
    grid-template-rows: 1fr;
  }
@media (max-width: 600px) {
    .gift-content {grid-template-columns: 3fr 1fr 220px 1fr 3fr; height: 80vh}}

#gift-banner{
    width: 100%;
    height: 25vh;
    background-image: linear-gradient(to bottom, 
    rgba(42, 42, 42, 0.5), 
    rgb(0, 0, 0)), 
    url(Images/gift.webp);
    background-size: cover;
    background-position: center;
    text-align: center;
    line-height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gift-banner-title {
    color: antiquewhite;
    font-size: max(3.5vw, 40px);
    margin: 0;
  }

  @media (max-width: 600px) {.gift-banner-title {
    line-height: 60px;
    font-size: 8vw;
  }}

  .gift-tagline{
    color: antiquewhite;
    font-size: max(2vw, 20px);
    margin: 0;
    font-style: italic;
  }

  @media (max-width: 600px) {.gift-tagline {line-height: 24px;
                                            margin-right: 4vh;
                                            margin-left: 4vh}}

  .gift-div {
    min-height: 65vh;
    display: flex;
    flex-direction: column}

  #gift {flex-direction: column;}

  #gift-button-div {flex-direction: column;}
  @media (max-width: 600px) {#gift-button-div {flex: 0.5}}

  .gift-sidebar {background: linear-gradient(black, rgb(46, 10, 0))}

  #gift-title-text {
    color: antiquewhite;
    margin: 10px;
    font-size: max(1.6vw, 20px);}

  @media (max-width: 600px) {#gift-title-text {font-size: 22px;}}


  #info-text {margin: 10px; font-size: max(1.1vw, 16px); color: rgb(129, 109, 84)}
  
  @media (max-width: 600px) {#info-text{font-size: min(4vw, 13px);
                                        line-height: 20px;}}
  
  #gift-specifics-text {font-size: 16px; font-style: italic; margin: 5px; text-align: left;}

  @media (max-width: 600px) {#gift-specifics-text {margin: 0 0 30px 0}}

  #gift-contact-text {font-size: 16px; font-style: italic; margin: 5px; text-align: left; color:rgb(129, 109, 84)}

  @media (max-width: 600px) {#gift-contact-text {margin: 0 0 50px 0}}

  .price-text{font-size: max(1.4vw, 18px); color: #4a412b; margin: 10px 0 20px 0}

  @media (max-width: 600px) {}

  #gift-details {
    text-align: left;
    flex-direction: column;
    align-items: center;
    display:flex;
    justify-content: center;
    flex: 0.5}

  @media (max-width: 600px) {#gift-details {flex: 1}}

  .terms-div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    grid-column-end: span 5;
    margin: 10 0 0 0;
  }

  .left-text-div {
    display: flex;
    flex-direction: column;
    justify-content: left;
    text-align: left;
  }

  .special-terms-div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-column-end: span 7;
    margin: 10 0 0 0;
  }

  .terms-agreement-text{
    color: antiquewhite;
    font-size: 10px;
    margin: 5px
  }

  .terms-link {color: antiquewhite}

  #gift-button {margin: 20px 0 10px 0}

  @media (max-width: 600px) {#gift-banner{background-image: linear-gradient(to bottom, 
                                                             rgba(42, 42, 42, 0.281), 
                                                             rgb(0, 0, 0)), 
                                                               url(Images/m-gift.webp);
                                                              height: 20vh}}
  @media (max-width: 600px) {#gift-banner-title {font-size: 46px}}
  @media (max-width: 600px) {#gift-text {font-size: 22px}}
  @media (max-width: 600px) {#gift-contact-text {font-size: 14px}}