*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Courier New",monospace;
}

body{
background:black;
color:white;
overflow:hidden;
}

video{
position:fixed;
top:50%;
left:50%;
width:100vw;
height:100vh;
object-fit:cover;
transform:translate(-50%,-50%);
z-index:-3;
}


.overlay{
position:fixed;
width:100%;
height:100%;
background:radial-gradient(circle at left, rgba(60,0,120,0.4), rgba(0,0,0,0.9));
z-index:-2;
}

.scanlines{
position:fixed;
width:100%;
height:100%;
background:repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.05),
rgba(255,255,255,0.05) 1px,
transparent 2px,
transparent 4px
);
z-index:5;
}

.vignette{
position:fixed;
width:100%;
height:100%;
box-shadow:inset 0 0 200px black;
z-index:6;
}


#glitchOverlay{
position:fixed;
width:100%;
height:100%;
z-index:40;
opacity:0;
pointer-events:none;
transition:opacity .2s;
}

#glitchOverlay img{
width:100%;
height:100%;
object-fit:cover;
}

#glitchOverlay.active{
opacity:1;
}


.menu{
position:absolute;
top:20%;
left:6%;
}

.title{
font-size:64px;
margin-bottom:40px;
}

.option{
font-size:28px;
margin:10px 0;
cursor:pointer;
opacity:.6;
}

.option.active{
opacity:1;
}

.selector::before{
content:">> ";
}

.footer{
position:absolute;
bottom:10px;
left:10px;
}


.loadingScreen{
position:fixed;
width:100%;
height:100%;
background:black;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
z-index:20;
opacity:0;
pointer-events:none;
transition:opacity .5s;
}

.loadingScreen.active{
opacity:1;
pointer-events:all;
}


.learnPage{
position:fixed;
top:-100%;
width:100%;
height:100%;
background:black;
transition:top .6s;
padding:80px 40px;
overflow-y:auto;
z-index:30;
}

.learnPage.active{
top:0;
}

.backBtn{
display:none;
position:fixed;
top:20px;
left:20px;
cursor:pointer;
}

.learnPage.active .backBtn{
display:block;
}


.faq{
background:rgba(20,20,20,0.9);
padding:20px;
margin-bottom:15px;
cursor:pointer;
animation:faqFloat 5s ease-in-out infinite;
}
.faq:nth-child(2){animation-delay:1s;}
.faq:nth-child(3){animation-delay:2s;}
.faq:nth-child(4){animation-delay:3s;}
.faq:nth-child(5){animation-delay:4s;}
.faq:nth-child(6){animation-delay:2.5s;}
.faq:nth-child(7){animation-delay:1.5s;}
.faq:nth-child(8){animation-delay:3.5s;}

@keyframes faqFloat{
0%{transform:translateY(0px);}
50%{transform:translateY(-6px);}
100%{transform:translateY(0px);}
}
.answer{
max-height:0;
overflow:hidden;
transition:max-height .4s;
line-height:1.5;
}
.faq.open .answer{
max-height:200px;
margin-top:10px;
}
.answer a{
color:#9cf;
}