*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
overflow-y: auto;
overflow-x: hidden;
background:black;
font-family:Consolas,monospace;
color:white;
}
#loading,
#terminal-page,
#video-page,
#final-page{

position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;

}
#loading{
background:black;
z-index:999;
}
.loader{
font-size:20px;
letter-spacing:5px;
animation:pulse 1s infinite;
}
@keyframes pulse{
50%{
opacity:.3;
}
}

.bg{

position:absolute;
inset:0;
background:url("../assets/bg.jpg");
background-size:cover;
background-position:center;
filter:
brightness(.25)
blur(2px);
}
#cursor{
color:#00ff99;
animation:blink .8s infinite;
}

@keyframes blink{
50%{
opacity:0;
}
}

.terminal{

background:
repeating-linear-gradient(
0deg,
rgba(255,255,255,.03),
rgba(255,255,255,.03) 1px,
transparent 1px,
transparent 3px
),
rgba(0,0,0,.65);

min-height:500px;
position:relative;
width:85%;
max-width:900px;
padding:35px;
padding-bottom:80px;
max-height:80vh;
overflow-y:auto;

border:1px solid rgba(0,255,170,.4);
backdrop-filter:blur(10px);

box-shadow:
0 0 10px rgba(0,255,170,.2),
0 0 30px rgba(0,255,170,.2),
0 0 60px rgba(0,255,170,.15),
0 0 100px rgba(0,255,170,.1);
}
#terminal{
min-height: 100%;
font-size:18px;
line-height:1.8;
color:#00ff99;
white-space:pre-wrap;

}
#terminal-page{
    overflow-y: auto;
    -webkit-overflow-scrolling:touch;
}
.terminal::-webkit-scrollbar{
    width: 6px;
}

#video-page{
display:none;
background:black;
}
#rotate-overlay{
    position:fixed;
    inset:0;

    display:none;
    justify-content:center;
    align-items:center;

    background:black;

    z-index:9999;
}

.rotate-box{

    color:white;
    font-size:1.2rem;
    text-align:center;

    animation:pulse 1.5s infinite;
}

@keyframes pulse{

    0%{
        opacity:.4;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.4;
    }
}
#pause-text{

position:absolute;
font-size:32px;
letter-spacing:5px;
display:none;
pointer-events:none;

}

#player{

width:100vw;
height:100vh;
object-fit:cover;
filter:
brightness(.95)
contrast(1.05);

}

#video-page::after{

content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
repeating-linear-gradient(
0deg,
rgba(255,255,255,.02),
rgba(255,255,255,.02) 1px,
transparent 1px,
transparent 3px
);

}

#final-page{
display:none;
background:black;
}
.final-content{
text-align:center;
animation:fade 3s forwards;
}
.final-content h1{
font-size:60px;
font-weight:300;
letter-spacing:8px;
}
.final-content p{
margin-top:20px;
opacity:.6;
letter-spacing:4px;
}
@keyframes fade{
from{
opacity:0;
}
to{
opacity:1;
}
}