*{box-sizing:border-box}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}
table{border-collapse:collapse;border-spacing:0}
body,html{overscroll-behavior-y:contain}
body{margin:0;padding:0;overflow:hidden;height:100vh;width:100vw}
canvas{display:block}
#coords{position:absolute;background:rgba(0,0,0,.7);color:#fff;padding:5px;border-radius:3px;pointer-events:none;font-family:sans-serif;font-size:12px;display:none}
.loading{position:absolute;height:100vh;width:100vw;z-index:999}
.loading .start{font-family:"League Gothic",sans-serif;text-transform:uppercase;font-size:1.68em;line-height:1.68em;display:block;padding:.22em .45em .2em;text-align:center;width:80%}
.loading .background{position:absolute;height:100%;width:100%;top:0;left:0;background-image:url(../img/StartPage.webp);background-position:center;background-repeat:no-repeat;background-attachment:inherit;-webkit-background-size:auto 100%;-moz-background-size:auto 100%;-o-background-size:auto 100%;background-size:auto 100%;pointer-events:none;-webkit-transition:.2s opacity linear;-moz-transition:.2s opacity linear;-ms-transition:.2s opacity linear;-o-transition:.2s opacity linear;transition:.2s opacity linear}
.loading.started{pointer-events:none}
.loading.started .background{opacity:0}
.loading .border{position:absolute;top:0;left:0;right:0;bottom:0;border:2em solid #fff;pointer-events:none;-webkit-transition:.4s border-width ease-out;-moz-transition:.4s border-width ease-out;-ms-transition:.4s border-width ease-out;-o-transition:.4s border-width ease-out;transition:.4s border-width ease-out}
.loading .border.hidden{border-width:0}
.loading .panel-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}
.loading .panel{height:100%;width:35em;background:#fff;position:relative;color:#383838;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Work Sans",sans-serif;overflow:hidden;-webkit-transition:.6s width cubic-bezier(.77,0,.175,1),.3s opacity linear;-moz-transition:.6s width cubic-bezier(.77,0,.175,1),.3s opacity linear;-ms-transition:.6s width cubic-bezier(.77,0,.175,1),.3s opacity linear;-o-transition:.6s width cubic-bezier(.77,0,.175,1),.3s opacity linear;transition:.6s width cubic-bezier(.77,0,.175,1),.3s opacity linear;pointer-events:auto;background-color:rgba(255,255,255,.45);box-shadow:0 0 10px 1px rgba(0,0,0,.25);backdrop-filter:blur(10px)}
.loading .footer{position:absolute;bottom:0;left:0;padding:2em 3.28125em;padding-top:0;width:100%}
.loading .footer p{text-align:center;padding-top:10px;border-top:1px solid #383838}
.loading .main{font-weight:500}
.loading .main .description{margin-top:1em;font-size:1.2em;margin-bottom:1em;line-height:1.65}
.loading .about,.loading .main{position:absolute;top:0;left:0;transition:.5s cubic-bezier(.165,.84,.44,1) transform;transition:.5s cubic-bezier(.165,.84,.44,1) -webkit-transform;transition:.5s cubic-bezier(.165,.84,.44,1) -moz-transform;-webkit-transition:.5s cubic-bezier(.165,.84,.44,1) transform;-webkit-transition:.5s cubic-bezier(.165,.84,.44,1) -webkit-transform;-webkit-transition:.5s cubic-bezier(.165,.84,.44,1) -moz-transform;-moz-transition:.5s cubic-bezier(.165,.84,.44,1) transform;-moz-transition:.5s cubic-bezier(.165,.84,.44,1) -webkit-transform;-moz-transition:.5s cubic-bezier(.165,.84,.44,1) -moz-transform;padding:3.28125em 3em 3em 3.28125em;width:100%}
.loading .main{-webkit-transition:.2s opacity linear;-moz-transition:.2s opacity linear;-ms-transition:.2s opacity linear;-o-transition:.2s opacity linear;transition:.2s opacity linear}
.loading h1{font-size:4em}
.loading .title{font-family:"League Gothic",sans-serif;text-transform:uppercase;font-weight:400;line-height:1}
.loading .start{display:none;cursor:pointer;outline:0;background:#0051bc;color:#fff}
.loading .start:hover{background:#054db1}
.loading .progress{background:#a9e1fc;position:relative;display:none}
.loading .progress .content{position:relative;color:#fff;z-index:1}
.loading .progress .progress-overlay{background:#0051bc;position:absolute;top:0;left:0;height:100%;width:0%;z-index:0}
.loading .progress,.loading .start{margin:.5em 0;border:none;font-family:"League Gothic",sans-serif;text-transform:uppercase;font-size:1.68em;line-height:1.68em;padding:.22em .45em .2em;text-align:center;width:100%}
.loading .progress .text{margin-right:.2em}
.loading.hidden{height:0%}
.loading .main.hidden{opacity:0}
.loading .border.hidden{border-width:0}
.sponsor{display:flex;gap:10px;justify-content:center;align-items:center}
.sponsor .col{height:40px;border-radius:10px;background-color:#fff;overflow:hidden;margin-bottom:10px}
.sponsor .col img{height:100%}
#credit-btn,.description a{text-decoration:underline;cursor:pointer;color:#000}
#credit-btn:hover,.description a{color:#0051bc}
@media screen and (min-width:800px){
.loading .illustration{display:none}
}
@media screen and (max-width:800px){
.loading{background:0 0}
.loading .panel{height:60%;position:absolute;bottom:0;width:100%;padding:2.0625em;background-color:#fff}
.loading .main .main-content{padding-top:2em}
.loading .illustration{background:url(../img/StartPage.webp) center;background-size:cover}
.loading .about,.loading .main{padding:2.0625em;width:100%}
.loading h1{font-size:3.5em}
.loading .main .description{margin-top:.5em;margin-bottom:1.5em}
.loading .progress,.loading .start{width:100%;font-size:200%}
.loading .about .description{font-size:140%}
.loading .about .close{top:2.7em}
.loading .footer{padding:2em 2.0625em 2.0625em;width:100%}
.loading .footer .sharing{float:right;margin-bottom:0}
.loading .footer .credits{width:70%}
.in-app .panel{display:none}
.in-app .panel.visible{display:block!important}
}
@media screen and (max-width:800px) and (orientation:landscape){
.loading .about .description{font-size:100%}
.loading .main .illustration{display:none}
.loading .main .main-content{padding-top:0}
}
@media screen and (max-width:320px) and (max-height:500px){
.loading .about .description{font-size:130%}
}
@media screen and (min-width:2100px){
html{font-size:21px}
}
@media screen and (max-width:2000px){
html{font-size:20px}
}
@media screen and (max-width:1900px){
html{font-size:19px}
}
@media screen and (max-width:1800px){
html{font-size:18px}
}
@media screen and (max-width:1700px){
html{font-size:17px}
}
@media screen and (max-width:1500px){
html{font-size:16px}
}
@media screen and (max-width:1300px){
html{font-size:15px}
}
@media screen and (max-width:1100px){
html{font-size:14px}
}
@media screen and (max-width:900px){
html{font-size:13px}
}
@media screen and (max-width:700px){
html{font-size:13px}
}
@media screen and (max-width:600px){
html{font-size:12px}
}
@media screen and (max-width:500px){
html{font-size:11px}
}
@media screen and (max-width:450px){
html{font-size:10px}
}
@media screen and (max-width:350px){
html{font-size:9px}
}
.modal-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:rgba(255,255,255,.45);box-shadow:0 0 10px 1px rgba(0,0,0,.25);backdrop-filter:blur(10px)}
.modal{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:-15px;margin-left:-15px;height:90%;width:70%;flex-direction:column;gap:15px;position:relative;flex-wrap:wrap}
.modal .col{position:relative;padding-left:15px;padding-right:15px;height:100%}
.modal .col:first-child{width:50%;flex:50%}
.modal .col:last-child{width:50%;flex:50%}
.modal .author,.modal .modal-image,.modal .modal-info{background:#fff;position:relative;color:#383838;border-radius:1rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:"Work Sans",sans-serif;overflow:hidden;-webkit-transition:.6s width cubic-bezier(.77,0,.175,1),.3s opacity linear;-moz-transition:.6s width cubic-bezier(.77,0,.175,1),.3s opacity linear;-ms-transition:.6s width cubic-bezier(.77,0,.175,1),.3s opacity linear;-o-transition:.6s width cubic-bezier(.77,0,.175,1),.3s opacity linear;transition:.6s width cubic-bezier(.77,0,.175,1),.3s opacity linear;pointer-events:auto;background-color:rgba(255,255,255,.45);box-shadow:0 0 10px 1px rgba(0,0,0,.25);backdrop-filter:blur(10px);width:100%;height:100%;padding:1.5em}
.modal .modal-image{display:flex;justify-content:center;align-items:center;height:fit-content}
.modal .author,.modal .close,.modal .img-control,.modal .modal-image,.modal .modal-info{transform:scale(0);transition:all .2s cubic-bezier(.6,-.28,.735,.045)}
.modal .author.show,.modal .close.show,.modal .img-control.show,.modal .modal-image.show,.modal .modal-info.show{transform:scale(1);transition:all .2s cubic-bezier(.175,.885,.32,1.275)}
.modal .author{width:fit-content;margin-top:10px;padding:1em 1.5em;height:fit-content;background:#0051bc;color:#fff}
.modal .modal-info{display:flex;flex-direction:column;height:fit-content}
.modal .title{position:relative;font-size:2em;margin-bottom:1em;font-family:"League Gothic",sans-serif;text-transform:uppercase;font-weight:400;line-height:1}
.modal .title::before{content:"";width:20%;height:5px;position:absolute;left:0;bottom:-.3em;background-color:#0051bc}
.modal .description{padding:1rem;overflow-y:auto;max-height:400px}
.modal .description::-webkit-scrollbar{width:5px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:5px;background-color:rgba(255,255,255,.45)}
.modal .description::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:5px;background-color:rgba(255,255,255,.45)}
.modal .description::-webkit-scrollbar-thumb{border-radius:5px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#0051bc}
.modal .description::-webkit-scrollbar-thumb:hover{background-color:#c75d0b}
.modal .description p{margin-bottom:1em}
.modal .close{position:absolute;right:-1.5em;top:1em;z-index:999}
.modal .video-control{position:absolute;bottom:0;left:0;right:0;width:100%;display:none;justify-content:center;align-items:center;z-index:1;font-family:"Work Sans",sans-serif}
.modal .video-control.show{display:flex}
.modal .video-control a{color:#fff;background-color:red;border-radius:20px;padding:10px 20px;text-align:center}
.modal .detail-control{display:none;position:absolute;top:-10px;right:0;left:0;justify-content:center;align-items:center;z-index:1}
.modal .img-control{position:absolute;left:-1.5em;top:2em;z-index:999;display:flex;gap:1em;flex-direction:column}
.modal .modal-image img{box-shadow:0 0 10px 1px rgba(0,0,0,.25)}
.modal .close,.modal .open-detail,.modal .reset,.modal .zoom-in,.modal .zoom-out{background-color:rgba(255,255,255,.174);box-shadow:0 0 10px 1px rgba(0,0,0,.25);backdrop-filter:blur(10px);color:#383838;font-size:1em;border:none;border-radius:50%;width:3em;height:3em;display:flex;justify-content:center;align-items:center;padding:1.5em;-webkit-transition:.1s background-color cubic-bezier(.77,0,.175,1),.3s opacity linear;-moz-transition:.1s background-color cubic-bezier(.77,0,.175,1),.3s opacity linear;-ms-transition:.1s background-color cubic-bezier(.77,0,.175,1),.3s opacity linear;-o-transition:.1s background-color cubic-bezier(.77,0,.175,1),.3s opacity linear;transition:.1s background-color cubic-bezier(.77,0,.175,1),.3s opacity linear}
.modal .close:hover,.modal .open-detail:hover,.modal .reset:hover,.modal .zoom-in:hover,.modal .zoom-out:hover{background-color:#0051bc;color:#fff;cursor:pointer}
@media screen and (max-width:450px){
.modal{flex-wrap:unset;width:100%}
.modal .img-control{left:0;top:0;right:0;width:100%;top:unset;justify-content:center;flex-direction:unset}
.modal .close{position:fixed;top:10px;right:10px;z-index:99;height:40px;width:40px}
.modal .detail-control{display:flex}
.modal .col{height:unset}
.modal .col:first-child{width:100%;flex:100%}
.modal .col:last-child{width:100%;flex:100%}
}
@media screen and (max-width:800px){
.modal .description{max-height:100%}
.modal .video-control{bottom:50vh}
.modal .col .modal-image{height:100%}
.modal .col.modal-detail{-webkit-transition:.4s top ease-out;-moz-transition:.4s top ease-out;-ms-transition:.4s top ease-out;-o-transition:.4s top ease-out;transition:.4s top ease-out;position:absolute;top:80vh;left:0;right:0;width:100vw;padding:0;height:80vh;z-index:2}
.modal .author{margin:0 auto;margin-top:20px}
.modal .modal-info{height:70%}
.modal .col.modal-detail.open{top:20vh}
}
.instructions{position:absolute;top:50%;left:50%;height:20em;width:40em;margin:-10em 0 0 -20em;pointer-events:none;display:table;background:url(../img/instructions-bg.webp) no-repeat;background-size:100%;padding-top:5em;-webkit-transition:1s opacity linear;-moz-transition:1s opacity linear;-ms-transition:1s opacity linear;-o-transition:1s opacity linear;transition:1s opacity linear;opacity:0}
.instructions .p{color:#fff;font-family:"Work Sans",sans-serif}
.instructions.visible{opacity:1}
.instructions .inner{display:table-row;vertical-align:middle;height:100%;width:100%;text-align:center}
.instructions .hand{position:relative;left:0;height:5em;background:url(../img/hand.webp) no-repeat center;background-size:auto 100%;margin-bottom:2em;-webkit-animation:2s handAnimation cubic-bezier(.445,.05,.55,.95) infinite alternate;-moz-animation:2s handAnimation cubic-bezier(.445,.05,.55,.95) infinite alternate;-ms-animation:2s handAnimation cubic-bezier(.445,.05,.55,.95) infinite alternate;-o-animation:2s handAnimation cubic-bezier(.445,.05,.55,.95) infinite alternate;animation:2s handAnimation cubic-bezier(.445,.05,.55,.95) infinite alternate}
@-webkit-keyframes handAnimation{
0%{-webkit-transform:translateX(3em);-moz-transform:translateX(3em);-ms-transform:translateX(3em);-o-transform:translateX(3em);transform:translateX(3em)}
100%{-webkit-transform:translateX(-3em);-moz-transform:translateX(-3em);-ms-transform:translateX(-3em);-o-transform:translateX(-3em);transform:translateX(-3em)}
}
@-moz-keyframes handAnimation{
0%{-webkit-transform:translateX(3em);-moz-transform:translateX(3em);-ms-transform:translateX(3em);-o-transform:translateX(3em);transform:translateX(3em)}
100%{-webkit-transform:translateX(-3em);-moz-transform:translateX(-3em);-ms-transform:translateX(-3em);-o-transform:translateX(-3em);transform:translateX(-3em)}
}
@-ms-keyframes handAnimation{
0%{-webkit-transform:translateX(3em);-moz-transform:translateX(3em);-ms-transform:translateX(3em);-o-transform:translateX(3em);transform:translateX(3em)}
100%{-webkit-transform:translateX(-3em);-moz-transform:translateX(-3em);-ms-transform:translateX(-3em);-o-transform:translateX(-3em);transform:translateX(-3em)}
}
@keyframes handAnimation{
0%{-webkit-transform:translateX(3em);-moz-transform:translateX(3em);-ms-transform:translateX(3em);-o-transform:translateX(3em);transform:translateX(3em)}
100%{-webkit-transform:translateX(-3em);-moz-transform:translateX(-3em);-ms-transform:translateX(-3em);-o-transform:translateX(-3em);transform:translateX(-3em)}
}
#toggleAbout{position:fixed;top:10px;left:10px;z-index:99}
#toggleAbout:hover{background-color:#0051bc;color:#fff}
.speaker{height:40px;width:40px;padding:5px;border-radius:50%;position:relative;overflow:hidden;display:inline-block;cursor:pointer;display:flex;justify-content:center;align-items:center;font-size:1rem;background-color:rgba(255,255,255,.174);box-shadow:0 0 10px 1px rgba(0,0,0,.25);backdrop-filter:blur(10px);color:#383838}
body{margin:0;font-family:Arial,sans-serif}
.open-btn{margin:20px;padding:10px 20px;background:#007bff;color:#fff;border:none;cursor:pointer;border-radius:6px}
.overlay{position:fixed;top:0;left:0;height:100%;width:100%;background:rgba(0,0,0,.4);display:none;z-index:999}
.side-panel{position:fixed;top:0;left:-100%;height:100%;width:100%;max-width:100%;background:#fff;box-shadow:2px 0 8px rgba(0,0,0,.3);transition:left .3s ease;z-index:1000;padding:20px}
@media (min-width:768px){
.side-panel{width:40%;max-width:600px}
}
.side-panel.active{left:0}
.overlay.active{display:block}
.side-panel h1{font-family:"League Gothic",sans-serif;text-transform:uppercase;font-weight:400;line-height:1;font-size:3em}
.side-panel p{margin:.5em 0}
.side-panel a,.side-panel a:active,.side-panel a:focus,.side-panel a:hover,.side-panel a:visited{color:#000;font-weight:600}
.close-btn{position:absolute;top:15px;right:15px;background:0 0;border:none;font-size:24px;cursor:pointer;color:#333}
.close-btn:hover{color:#0051bc}
.side-panel ul{list-style:unset;padding:20px}