body{
    background:black;
    color:white;
    font-family:Georgia, serif;
    margin:0;
    padding:0;
    overflow-x:hidden;
}

/* CRT projector effect */

.projector{
    position:fixed;
    width:100%;
    height:100%;
    pointer-events:none;
    opacity:.05;
    z-index:9999;

    background:
    repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        white 3px,
        transparent 4px
    );
}

/* Landing Screen */

.landing{
    height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
}

.landing h1{
    font-size:4rem;
    color:orange;
    text-shadow:0 0 20px red;
    margin-bottom:20px;
}

.landing p{
    font-size:1.5rem;
    margin-bottom:40px;
}

.landing button{
    background:darkred;
    color:white;

    border:2px solid red;

    padding:18px 40px;

    font-size:1.2rem;
    font-weight:bold;

    cursor:pointer;

    transition:.3s;
}

.landing button:hover{
    background:red;
    transform:scale(1.05);
}

/* Gate Flash */

.gate-flash{
    display:none;

    height:100vh;

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

    font-size:5rem;
    font-weight:bold;

    color:red;
    text-shadow:
        0 0 10px orange,
        0 0 30px red,
        0 0 60px darkred;
}

/* Hidden Content */

.hidden{
    display:none;
}

/* Main Midway */

header{
    text-align:center;
    padding-top:100px;
    padding-bottom:100px;
}

header h1{
    font-size:4rem;
    color:orange;
    text-shadow:0 0 20px red;
}

.tagline{
    font-size:1.5rem;
}

/* Midway Map */

.midway-map{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;

    padding:50px;
}

.tent{
    width:150px;
    height:150px;

    border:2px solid darkred;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-decoration:none;
    color:white;

    font-size:3rem;

    transition:.3s;
}

.tent:hover{
    background:darkred;
    transform:scale(1.1);
}

.tent span{
    font-size:1rem;
    margin-top:10px;
}

/* Content Sections */

section{
    max-width:900px;

    margin:auto;

    padding:80px 20px;

    border-top:1px solid #333;
}

h2{
    color:orange;
    text-shadow:0 0 10px red;
}

/* Scroll Animation Support */

section{
    opacity:1;
}

/* Optional Flicker */

@keyframes flicker{
    0%{opacity:.05;}
    50%{opacity:.08;}
    100%{opacity:.05;}
}

.projector{
    animation:flicker .15s infinite;
}
.fade-out{
    animation:fadeOut .8s forwards;
}

.gate-shake{
    animation:gateShake .12s infinite, flashText .4s infinite;
}

.midway-reveal{
    animation:midwayReveal 1.5s ease-out forwards;
}

@keyframes fadeOut{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
}

@keyframes gateShake{
    0%{
        transform:translate(0,0);
    }
    25%{
        transform:translate(4px,-2px);
    }
    50%{
        transform:translate(-4px,2px);
    }
    75%{
        transform:translate(2px,4px);
    }
    100%{
        transform:translate(0,0);
    }
}

@keyframes flashText{
    0%{
        opacity:1;
    }
    50%{
        opacity:.4;
    }
    100%{
        opacity:1;
    }
}

@keyframes midwayReveal{
    from{
        opacity:0;
        transform:scale(.95);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}