.award_pics img,.welcome img{object-fit:contain;object-fit:contain}
#clockwork,#pharaohs{text-align:center;padding:6rem 10% 6rem;height:fit-content; margin-top:-6rem; margin-bottom: 8rem;}
.welcome{width:100%;height:100vh;min-height:300px;background:url(assets/welcome-background-pharaohs.webp) right/cover no-repeat;overflow:hidden}
.book,.learn,.welcome_book{box-shadow:0 0 .75rem .15rem var(--shadow)}
.welcome img{display:block;width:80%;height:auto;max-height:60vh;margin:0 auto;padding-top:max(15vh,85px);-webkit-filter:drop-shadow(0rem 0rem 0.3rem var(--shadow));filter:drop-shadow(0rem 0rem .3rem var(--shadow))}
.welcome_book{display:block;width:fit-content;margin:0rem auto;padding:1.2rem 2.5rem;font-size:1.7rem;font-weight:700;background-color:var(--orange);color:var(--black);border:none;cursor:pointer;border-radius:.15rem}
.faq_box button{background-color:transparent}
.learn{background-color:var(--shadow)}
.welcome_book:focus-visible,.welcome_book:hover{background-color:var(--white);color:var(--orange)}
.welcome_book:focus-visible{outline-color:var(--orange)}
@media screen and (min-width:375px){
    .welcome_book{margin:1rem auto;padding:1rem 2.5rem;font-size:1.6rem}}
@media only screen and (max-height:775px) and (max-width:1199.5px) and (orientation:landscape){
    .welcome_book {font-size: 1.2rem; padding: .8rem 1.5rem; margin-top: 0;}}
#about,#contact,#games h2,#awards h2,main{text-align:center}
main>section{margin:1.5rem auto}
section section{margin-top: 2rem;}
#about{background-color: var(--black);box-shadow:0 -.45rem .7rem var(--shadow);padding: 2.5rem 0;}
#contact address,#info{margin-top:2.3rem}
#info>.note{font-weight:700;font-size:1.3rem;letter-spacing:.075rem}
.info{margin-top:-1rem}.info h3{margin-bottom:.5rem}
.info .note{color:var(--lt-gray);font-size:1rem;width:75%;margin:.75rem auto 0}
/* #games{background-color:var(--black);box-shadow:0 -.45rem .7rem var(--shadow);padding-top:2.5rem;margin-bottom: 0;} */
.games_quicklinks{display: grid; grid-template-columns: auto; text-align: center;width: 80%;margin: 0 auto 8rem;}
.games_quicklinks > div{margin: 1rem auto;position: relative; width: 100%;}
.games_quicklinks a{cursor: pointer;display: block;font-size: 1.8rem;font-weight: 700;color: var(--white);line-height: 1.3;text-shadow: .2rem .2rem .15rem var(--deep-black);transition:color 0.2s ease-in-out;}
.games_quicklinks a img{opacity: 0.75;transition:opacity 0.2s ease-in-out}
.games_quicklinks a:hover, .games_quicklinks a:hover img, .games_quicklinks a:focus-visible, .games_quicklinks a:focus-visible img{color: var(--orange); opacity: 1}
.games_quicklinks span:first-of-type{position: absolute;display: flex; text-align: center;top: 0; left: 0; width: 100%; height: 100%;justify-content: center; flex-direction: column; align-items: center;}
.games_quicklinks span:nth-of-type(2n){position: absolute;display: flex; text-align: center;top: 75%; left: 0; width: 100%;justify-content: center; flex-direction: column; align-items: center;font-size: 1rem;}
.games_quicklinks img{display: block; width: 100%; height: auto; margin: 0 auto;border-radius: 1rem;box-shadow: 0 0 0.5em var(--shadow);}
#awards{width:80%;margin:-4.5rem auto 1rem;text-align: center;}
.award_pics img{width:auto;max-width:100%;height:auto;max-height:60%;margin:auto}
#games form,#games h3,.basic-info div{width:fit-content}
.award_pics{display:grid;grid-template-columns:15% 15% 15% 15% 15%;justify-content:space-between;margin:0 auto}
#faq .question,.basic-info{grid-template-columns:auto auto}
.room-info p{margin-bottom:1rem}
.basic-info p,.room-info>div>p{text-shadow:.2rem .1rem .15rem var(--deep-black);font-size:1.2rem}
#games h3{color:var(--white);margin:0 auto;text-transform:uppercase;font-size:1.6rem;font-weight:700;letter-spacing:.1rem;text-shadow:.2rem .1rem .2rem var(--shadow)}
#awards h2{color:var(--white);margin:0 auto;text-transform:uppercase;font-size:2rem;font-weight:700;letter-spacing:.1rem;}
#clockwork img,#pharaohs img{-webkit-filter:drop-shadow(0.2rem 0.1rem .15rem var(--shadow));filter:drop-shadow(.25rem .15rem .1rem var(--shadow))}
.basic-info{display:inline-grid;gap:1rem}
.basic-info img{display:inline-block;width:4.5rem;height:auto}
.basic-info p{font-weight:400;margin-top:-.75rem}
#games .video__iframe{aspect-ratio:16/9;width:100%;height:auto;border-radius:.25rem;position:relative}
#games .video__notice p{margin-bottom:0}
#games .video__notice button{font-size:.85rem;font-weight:500;padding:.4rem 1rem;margin-top:.25rem;border:none;cursor:pointer;background-color:var(--white);color:var(--black);border-radius:.15rem;opacity:.95}
#faq a:focus,#faq a:hover,#faq hgroup p,.faq_box.active .question,.learn{color:var(--orange)}
#games .video__notice button:focus-visible,#games .video__notice button:hover{color:var(--white);background-color:var(--orange);outline-color:var(--white)}
#games form{padding:2%;background-color:var(--shadow);border:1px solid var(--orange);border-radius:.2rem}
#games .video__notice.notice_hidden{max-height:0;visibility:hidden;padding:0;margin:0}
.room-menu{margin:2rem auto .5rem;display:grid;justify-content:space-around}
.faq_section,.why{margin-left:auto;margin-right:auto}
.room-menu a{font-weight:700;padding:1rem 2.2rem;font-size:1.6rem;border:3px solid var(--orange);border-radius:.15rem}
.learn{text-shadow:.12rem .1rem .15rem var(--deep-black);margin-bottom: 2rem;}
.learn:focus-visible,.learn:hover{color:var(--orange);background-color:var(--white);border-color:var(--white);text-shadow:none}
.learn:focus-visible{outline-color:var(--orange)}
.book{color:var(--black);background-color:var(--orange)}
.book:focus-visible,.book:hover{color:var(--orange);background-color:var(--white);border-color:var(--white)}
@media screen and (min-width:1200px) {
    .games_quicklinks{grid-template-columns: 48% 48%; gap: 4%;}
    .games_quicklinks a{font-size: 1.75rem}
    .room-menu{grid-template-columns:auto auto}
    .room-menu a{font-size: 1.3rem;}
    .book{margin-bottom: 2rem;}
}
#contact a,#faq a,.faq_box .question{color:var(--white)}
#faq hgroup,.faq_box{border-bottom:2px solid var(--lt-gray)}
.book:focus-visible{outline-color:var(--orange)}
.answer{font-size:1.1rem}
#pharaohs{background:url(assets/pharaohs-foreground-simple.webp) right center/cover no-repeat,url(assets/pharaohs-background.webp) center/cover no-repeat}
#clockwork{background:url(assets/clockwork-foreground-small.webp) left center/cover no-repeat,url(assets/clockwork-background.webp) center/cover no-repeat}
.why{width:80%}
.why h3{font-size: 2rem;}
.why p{font-size: 1.2rem}
#contact a,.answer,.faq_box{display:block}
#faq h2{padding-top:4rem;margin-top:-4rem}
#faq hgroup p{font-size:1.3rem;font-weight:700;margin-top:-.5rem}
#faq hgroup{padding-bottom:1.5rem;width:80%;margin:0 auto}
.faq_box button{width:100%;cursor:pointer}
#faq a{text-decoration:none;font-weight:700}
.faq_box{padding:1rem 0;line-height:1.75;cursor:pointer}
.faq_box .question{font-weight:500;font-size:1.3rem}
.faq_section{width:80%}
#faq .question{display:grid;justify-content:center;gap:1rem;align-items:center;width:fit-content;margin:0 auto;padding:0}
.answer{color:var(--lt-gray);max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease-in-out,margin-top .2s ease-in-out}
.question svg{fill:none;stroke:var(--white);stroke-width:6.5;width:1rem;height:auto;transition:transform .15s ease-in-out}
#faq .faq_box:focus-visible{outline:5px solid var(--orange)}
.faq_box.active .question svg{stroke:var(--orange);transform:rotate(-180deg)}
.faq_box.active .answer{visibility:visible;margin-top:.3rem}
.faq_box:first-of-type.active .answer{max-height:5rem}
.faq_box:nth-of-type(2n).active .answer{max-height:10rem}
.faq_box:nth-of-type(3n).active .answer{max-height:15rem}
.faq_box:nth-of-type(4n).active .answer{max-height:5rem}
.faq_box:nth-of-type(5n).active .answer{max-height:19rem}
.faq_box:nth-of-type(6n).active .answer{max-height:9rem}
.faq_box:nth-of-type(7n).active .answer{max-height:26rem}
.faq_box:nth-of-type(8n).active .answer{max-height:21rem}
.faq_box:last-of-type.active .answer{max-height:33rem}
@media screen and (min-width:750px){
    .faq_box .question{font-size:1.2rem}
    #faq p{font-size:.85rem}
    .question svg{width:.85rem}
    .answer{font-size:1rem}}
@media screen and (min-width:1200px){
    main{text-align:left}
    #info h2,#info>.note,.info{text-align:center}
    .info{display:grid;width:80%;margin:0 auto;grid-template-columns:50% 50%;justify-content:space-between}
    #games .video__iframe,#games .video__notice button,#games form{box-shadow:1 1 .75rem .15rem var(--shadow)}
    #pharaohs h3{font-size:1.8rem;margin-left:0;text-align:left}
    #clockwork h3{font-size:1.8rem;margin-right:0;text-align:right}
    .basic-info{margin-top:-.35rem;display:grid}
    #pharaohs .basic-info{justify-content:flex-start}
    #clockwork .basic-info{justify-content:flex-end}
    .basic-info img{width:3.5rem;height:auto}
    .basic-info p{font-size:1rem}
    #pharaohs .room-info>div>p{font-size:1.1rem;text-align:left;width:70%;margin-right:auto}
    #clockwork .room-info>div>p{font-size:1.1rem;text-align:right;width:70%;margin-left:auto}
    #games .video__iframe{display:block;width:30rem}
    #pharaohs .video__iframe,#pharaohs form{margin-right:auto}
    #clockwork .video__iframe,#clockwork form{margin-left:auto}
    #games form{width:60%}
    #games .video__notice button,#games .video__notice p{font-size:.75rem}
    #games .video__notice button{padding:1%}
    #pharaohs .room-menu{justify-content:flex-start;gap:1rem}
    #clockwork .room-menu{justify-content:flex-end;gap:1rem}
    .why{display:grid;grid-template-columns:auto auto;justify-content:space-between;width:80%}
    .why section{width:85%;margin-left:auto;margin-right:auto}
    .why h3{font-size:1.4rem}
    .why p{font-size: .9rem;}
    #faq hgroup{margin-left:10%}
    .faq_box .question{font-size:1.1rem}
    #faq .question{margin-left:0;text-align:left}
    .answer{text-align:left;font-size:.9rem}}
#contact h2{width:fit-content;padding:0 2.3rem;border-bottom:2px solid var(--orange);margin:0 auto 2rem;padding-top:2.8rem;margin-top:-2.8rem}
#contact address span::selection{color:var(--orange)}
#contact a{width:fit-content;margin:2rem auto;font-size:1.1rem;font-weight:700}
#contact a:focus-visible,#contact a:hover{color:var(--orange)}