:root{
    --accent:#ffb000;
    --accent2:#ff7a00;
    --bg:#050505;
}

/* =========================
   RESET
========================= */

html,
body{
    margin:0;
    padding:0;
    overflow-x:hidden;
}

body{
    font-family:Calibri, Arial, sans-serif;
    color:#fff;
    background:var(--bg);
    position:relative;
    min-height:100vh;
}

/* =========================
   AURORA BACKGROUND
========================= */

body::before{

    content:"";

    position:fixed;

    inset:-20%;

    z-index:-3;

    background:
        radial-gradient(circle at 20% 70%, rgba(255,180,0,.15), transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(255,120,0,.10), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255,60,0,.05), transparent 60%);

    filter:blur(60px);

    animation:floatBg 18s ease-in-out infinite alternate;
}

@keyframes floatBg{

    0%{
        transform:translate(-2%, -2%);
    }

    100%{
        transform:translate(2%, 3%);
    }
}

/* =========================
   NOISE (Apple Grain)
========================= */

body::after{

    content:"";

    position:fixed;

    inset:0;

    z-index:-2;

    pointer-events:none;

    opacity:.06;

    background-image:url("https://www.transparenttextures.com/patterns/noise.png");

    animation:noiseMove .4s steps(2) infinite;
}

@keyframes noiseMove{

    0%{
        transform:translate(0,0);
    }

    25%{
        transform:translate(-1%,1%);
    }

    50%{
        transform:translate(1%,-1%);
    }

    75%{
        transform:translate(1%,1%);
    }

    100%{
        transform:translate(0,0);
    }
}

/* =========================
   PAGE OVERLAY
========================= */

.page-overlay{

    position:fixed;

    inset:0;

    background:#000;

    opacity:0;

    pointer-events:none;

    transition:opacity .45s ease;

    z-index:9999;
}

body.page-leaving .page-overlay{

    opacity:.15;
}

/* =========================
   GLASS CONTAINER
========================= */

.container{

    max-width:900px;

    margin:80px auto;

    padding:50px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,176,0,.15);

    border-radius:28px;

    backdrop-filter:blur(20px);

    box-shadow:
        0 0 50px rgba(255,176,0,.08),
        inset 0 0 20px rgba(255,255,255,.03);

    position:relative;
}

/* =========================
   PAGE TRANSITIONS
========================= */

.container{

    opacity:0;

    transform:translateX(40px);

    filter:blur(8px);

    transition:
        opacity .45s cubic-bezier(.22,.61,.36,1),
        transform .45s cubic-bezier(.22,.61,.36,1),
        filter .45s cubic-bezier(.22,.61,.36,1);
}

body.page-loaded .container{

    opacity:1;

    transform:translateX(0);

    filter:blur(0);
}

body.page-leaving .container{

    opacity:0;

    transform:translateX(-40px);

    filter:blur(8px);
}

/* =========================
   TEXT
========================= */

h1{

    color:var(--accent);

    margin-bottom:20px;

    font-size:40px;

    text-shadow:
        0 0 20px rgba(255,176,0,.15);
}

p,
li{

    color:#ddd;

    line-height:1.7;

    font-size:16px;
}

/* =========================
   LINKS
========================= */

a{

    color:var(--accent);

    text-decoration:none;

    transition:.25s ease;
}

a:hover{

    opacity:.8;
}

/* =========================
   BACK BUTTON
========================= */

.back{

    display:inline-block;

    margin-top:30px;

    padding:12px 18px;

    border-radius:14px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,176,0,.25);

    backdrop-filter:blur(10px);

    transition:.3s ease;
}

.back:hover{

    transform:translateY(-2px);

    border-color:rgba(255,176,0,.5);

    box-shadow:
        0 0 20px rgba(255,176,0,.12);
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .container{

        margin:20px;

        padding:30px 20px;
    }

    h1{

        font-size:30px;
    }
}