@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700;800&display=swap');
:root{--dark:#21323D; --orange:#F39200}
body,html{margin:0;padding:0; font-family: 'Montserrat', sans-serif; background-color: #EFEFEF; color: var(--dark);} *,*::before,*::after{box-sizing:border-box; position:relative;}

img,video{width: 100%; display: block;}
.page{position: fixed; width: 100%;height: 100dvh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
background-color: #EFEFEF;
}

h1,h2,p{margin: 0;padding: 0;}

.logo{padding: 2rem; }


.center{display: grid; height: 100%; grid-template-rows: auto 1fr;}
.content{padding: 2rem; display:flex;align-items:center; justify-content:center; container-type: inline-size; }
a{text-decoration: none;}

.back{width:5rem;}
h1{font-size: clamp(3rem,10vw,5rem); font-weight: 900;}
h1 span
{clip-path: inset(0 0 calc(var(--rev) * 1%) 0); display: inline-block; transform: translateY(calc(var(--rev) * 1%)); --rev:100}
.pageContents,
.cases > div
{clip-path: inset(0 0 calc(var(--rev) * 1%) 0);transform: translateY(calc(var(--rev) * 1%)); --rev:100}

h2{font-size: 1rem; font-weight: 500; padding: 2rem 0;}
.footer{background-color:var(--dark); padding: 2rem; display:flex;align-items:center; justify-content:center; gap: 1rem;}
.footer a{color: white;}

.video{order:2;display:flex;align-items:flex-start; justify-content:flex-start; mix-blend-mode: multiply;}
.runvideo{position: absolute; clip-path: inset(2% 0); }

.menu,.start,.prestige,.coded{display: none;}

.loadedmenu .menu{display: block;}
.loadedmenu .start{display: none;}
.firstload .start{display: block;}
.loadedPrestige .prestige{display: block;}
.loadedCoded .coded{display: block;}
.longtext p{margin-bottom: 1rem; max-width: 600px;}
.longtext p:last-child{margin-bottom: 8rem;}





@container (max-width: 400px) {
    .longtext {
        mask-image: linear-gradient(black 70%,transparent);
        -webkit-mask-image: linear-gradient(black 70%,transparent);
      overflow-y: scroll;
      max-height: 40dvh;

    }
  }

.menu a,h3 {
    font-size: clamp(1.8rem,5vw,3rem);
    font-weight: 900;
    display: block;
    color: var(--dark);
    width: fit-content;
    isolation: isolate;
    cursor: pointer;
}
.menu a:before{content: ""; background-color: var(--orange); width:100%;height:100%;left:0;top:0; position: absolute; width: 0%; z-index: -1; transition: width .3s;}
.menu a:hover:before{width:100%;}

.menu a:nth-child(even){color: var(--orange);}
.menu a:nth-child(even):before{background-color: var(--dark);}



@media(max-height:700px){
    .content{padding: 0 2rem;}
    .back{width: 3rem;}
    .loadedPrestige .video,
    .loadedCoded .video{
       display: none;
    }

}




.runvideo{width: 60%;left: 50%; transform: translateX(-50%);top: 0;}
@media(min-width:600px){
  .runvideo{width: 100%;left: 0%; transform: translateX(0%);}
    .content{order:3;}
    .coded{max-height:auto;}
    .video{align-items:center; justify-content:center;}
    .footer{background-color:transparent;justify-content:space-between;}
    .footer a{color: var(--dark);}
    .center{grid-template-columns: 1fr 1fr; grid-template-rows:100%; }
    .logo img{width: 18rem; margin-left: auto;}

}

#loader{width:100%;height:100%;left:0;top:0;position: fixed; background-color: var(--orange);}

#imp{max-width: 800px;  margin: 0 auto; color: var(--dark);overflow-wrap: break-word;}
#imp h1{font-size: 2rem;margin-top: 2rem; color: var(--orange);}
#imp h2,
#imp h3
{font-size: 1rem;}

.closeviewer{position: absolute; top: 0;right: 0;padding: 0rem; cursor: pointer; z-index:100000; }
.closeviewer img{width: 3rem;}
dialog{background-color: #EFEFEF;}
dialog::backdrop{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

a{color:inherit;}

[data-imp] h2{font-size: 2rem; font-weight:700;}
[data-imp] p:has(strong){margin-top: 1rem;}