html, body{
    margin:0;
    padding:0;
    background:black;
    color:white;
    font-family:Georgia, serif;
    overflow-x:hidden;
}

.projector{
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.05;
    z-index:9999;
    background:repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        white 3px,
        transparent 4px
    );
}

.hidden{
    display:none !important;
}

/* LANDING */

#landing{
    width:100vw;
    height:100vh;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background:black;
}

#landing::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("assets/images/websitebackgroundclosed.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    filter:blur(15px) brightness(.35);
    transform:scale(1.1);
    z-index:0;
}

#landing::after{
    content:"";
    position:absolute;
    inset:0;
    background:url("assets/images/websitebackgroundclosed.png");
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    z-index:1;
}

.landing-content{
    position:relative;
    z-index:2;
    text-align:center;
}

.landing-content h1{
    color:orange;
    font-size:5rem;
    text-shadow:0 0 15px red, 0 0 35px red;
}

.landing-content p{
    font-size:1.6rem;
    font-weight:bold;
    text-shadow:0 0 10px black;
}

#enterButton{
    background:#990000;
    color:white;
    border:2px solid red;
    padding:16px 45px;
    font-size:1.2rem;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 0 15px red;
}

#enterButton:hover{
    background:red;
    transform:scale(1.05);
}

/* GATE FLASH */

#gateFlash{
    display:none;
    position:fixed;
    inset:0;
    background:black;
    z-index:9998;
    justify-content:center;
    align-items:center;
    color:orange;
    font-size:5rem;
    font-weight:bold;
    text-align:center;
    text-shadow:0 0 20px red, 0 0 50px red;
}

#gateFlash.show{
    display:flex;
    animation:gateFlicker .15s infinite;
}

@keyframes gateFlicker{
    0%{opacity:1;}
    50%{opacity:.45;}
    100%{opacity:1;}
}

.fade-out{
    animation:fadeOut 1s forwards;
}

@keyframes fadeOut{
    from{opacity:1;}
    to{opacity:0;}
}

/* MIDWAY */

#midway{
    background:black;
    min-height:100vh;
}

.midway-hero{
    width:100vw;
    height:100vh;
    position:relative;
    background:url("assets/images/websitebackgroundopen.png");
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    background-color:black;
    overflow:hidden;
}

.midway-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("assets/images/websitebackgroundopen.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    filter:blur(15px) brightness(.35);
    transform:scale(1.1);
    z-index:0;
}

.midway-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:url("assets/images/websitebackgroundopen.png");
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    z-index:1;
}

.midway-map{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    padding-top:40px;
}

.tent{
    width:110px;
    height:90px;
    border:1px solid red;
    background:rgba(0,0,0,.55);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    color:white;
    transition:.3s;
}

.tent:hover{
    background:rgba(120,0,0,.65);
    transform:scale(1.08);
    box-shadow:0 0 20px red;
}

.tent span{
    margin-top:8px;
    font-size:.8rem;
    font-weight:bold;
}

/* CONTENT */

.content-section{
    max-width:900px;
    margin:80px auto;
    padding:25px;
    border:1px solid rgba(255,0,0,.25);
    background:rgba(0,0,0,.65);
    backdrop-filter:blur(3px);
}

.content-section h2{
    color:orange;
    text-shadow:0 0 10px red;
}

.content-section p{
    line-height:1.6;
}