*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
    font-family:'Montserrat',sans-serif;
}

body{
    position:relative;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

img{
    -webkit-user-drag:none;
    user-drag:none;
}

/* ==========================
   CHARACTER PNG
========================== */

.character{

    position:absolute;

    left:50%;
    top:55%;

    transform:translate(-50%, -50%);

    height:90vh;
    width:auto;

    object-fit:contain;

    z-index:5;

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,1) 55%,
            rgba(0,0,0,.9) 65%,
            rgba(0,0,0,.4) 80%,
            transparent 100%
        );

    mask-image:
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,1) 55%,
            rgba(0,0,0,.9) 65%,
            rgba(0,0,0,.4) 80%,
            transparent 100%
        );
}

/* ==========================
   HEADER
========================== */

.logo{
    position:absolute;

    top:25px;
    left:50%;

    transform:translateX(-50%);

    z-index:30;

    color:white;

    font-family:'Cinzel',serif;

    text-align:center;

    letter-spacing:2px;
}

.logo h1{

    font-family:'Cinzel',serif;

    font-size:38px;

    letter-spacing:12px;

    font-weight:700;
}

.logo span{

    font-family:'Cormorant Garamond',serif;

    font-size:14px;

    letter-spacing:4px;

    opacity:.75;

    font-style:italic;
}
/* ==========================
   SIDE LINES
========================== */

.left-line,
.right-line{
    position:absolute;

    top:50%;

    width:100px;
    height:1px;

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

    z-index:15;
}

.left-line{
    left:60px;
}

.right-line{
    right:60px;
}

/* ==========================
   404
========================== */

.error-wrapper{

    position:absolute;

    top:70%;
    left:50%;

    transform:translate(-50%,-50%);

    width:1000px;
    height:450px;

    z-index:10;

    pointer-events:none;
}

.number{

    position:absolute;

    color:white;

    font-weight:900;

    font-size:340px;

    line-height:1;

    text-shadow:
    0 0 15px rgba(255,255,255,.15),
    0 0 40px rgba(255,255,255,.05);
}

.first-four{
    left:100px;
    top:40px;
}

.zero{
    left:355px;
    top:40px;

    z-index:4;
}

.last-four{
    left:610px;
    top:40px;
}

.vertical-text{

    position:absolute;

    right:80px;
    top:80px;

    writing-mode:vertical-rl;

    transform:rotate(180deg);

    color:white;

    font-size:12px;

    letter-spacing:4px;

    opacity:.8;
}

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

.back-home{

    position:absolute;

    top:53%;
    left:61%;

    transform:translateX(-50%);

    width:240px;
    height:52px;

    z-index:25;

    border:1px solid rgba(255,255,255,.7);

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

    color:white;

    text-decoration:none;

    letter-spacing:3px;

    font-size:13px;

    text-transform:uppercase;

    backdrop-filter:blur(8px);

    z-index:25;

    transition:.35s;
}

.back-home:hover{

    background:white;

    color:black;

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

/* ==========================
   PETALS
========================== */

.petals{

    position:absolute;
    inset:0;

    overflow:hidden;

    z-index:20;

    pointer-events:none;
}

.petal{

    position:absolute;

    top:-50px;

    width:14px;
    height:20px;

    background:#d61c4e;

    border-radius:
    50% 50%
    50% 0;

    opacity:.9;

    animation:
    fall linear infinite;
}

@keyframes fall{

    from{
        transform:
        translateY(-100px)
        rotate(0deg);
    }

    to{
        transform:
        translateY(120vh)
        rotate(720deg);
    }
}

/* ==========================
   FOG
========================== */
.fog-layer{
    position:absolute;
    left:-25%;
    bottom:-100px;

    width:150%;
    height:40vh;
    bottom:-15vh;

    pointer-events:none;

    z-index:18;

    opacity:.55;
    /* opacity:.7; */

    mix-blend-mode:screen;
}

.fog-layer::before{

    content:'';

    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at 10% 70%, rgba(255,255,255,.30), transparent 20%),
        radial-gradient(circle at 30% 40%, rgba(255,255,255,.22), transparent 25%),
        radial-gradient(circle at 50% 65%, rgba(255,255,255,.28), transparent 22%),
        radial-gradient(circle at 70% 45%, rgba(255,255,255,.20), transparent 24%),
        radial-gradient(circle at 90% 70%, rgba(255,255,255,.30), transparent 18%);

    filter:blur(45px);

    animation:fogDrift 25s linear infinite;
}

.fog-layer::after{

    content:'';

    position:absolute;
    inset:0;

    background:
        radial-gradient(circle at 20% 60%, rgba(255,255,255,.18), transparent 25%),
        radial-gradient(circle at 60% 50%, rgba(255,255,255,.20), transparent 25%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.16), transparent 20%);

    filter:blur(70px);

    animation:fogDriftReverse 35s linear infinite;
}
@keyframes fogDrift{

    from{
        transform:translateX(-800px);
    }

    to{
        transform:translateX(80px);
    }
}

@keyframes fogDriftReverse{

    from{
        transform:translateX(60px);
    }

    to{
        transform:translateX(-600px);
    }
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:900px){

    .character{
        height:75vh;
    }

    .number{
        font-size:180px;
    }

    .first-four{
        left:70px;
    }

    .zero{
        left:230px;
    }

    .last-four{
        left:390px;
    }

    .error-wrapper{
        width:650px;
        height:250px;
    }

    .back-home{
        width:180px;
        height:45px;
        top:36%;
    }

    .left-line,
    .right-line,
    .vertical-text{
        display:none;
    }
}

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

@media (max-width: 768px){

    html,
    body{
        width:100%;
        min-height:100dvh;
        overflow-x:hidden;
    }

    .logo{
        top:18px;
        width:100%;
        padding:0 15px;
    }

    .logo h1{
        font-size:24px;
        letter-spacing:6px;
    }

    .logo span{
        font-size:11px;
        letter-spacing:2px;
    }

    .character{
        height:75vh;
        max-width:95vw;
    }

    .error-wrapper{
        width:100%;
        height:auto;
        top:62%;
        left:50%;
        transform:translate(-50%,-50%);
    }

    .number{
        position:relative;
        display:inline-block;

        font-size:85px;

        left:auto !important;
        top:auto !important;

        margin:0 -5px;
    }

    .first-four,
    .zero,
    .last-four{
        left:auto !important;
        top:auto !important;
    }

    .error-wrapper{
        text-align:center;
    }

    .vertical-text{
        display:block;

        right:25%;
        top:10px;

        font-size:4px;

        letter-spacing:1px;

        opacity:.8;
    }

    .back-home{
        left:50%;
        top:67%;

        transform:translateX(-50%);

        width:90px;
        height:26px;

        font-size:8px;
        letter-spacing:1px;
    }

    .left-line,
    .right-line{
        display:none;
    }

    .fog-layer{
        height:25vh;
        opacity:.4;
    }
}