*{
    box-sizing:border-box;
}
html,
body{
    width:100%;
    height:100%;
    margin:0;
}
body{
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family: Nunito, "Noto Sans SC", sans-serif;
    background: url("bg.jpg") 0 0 / auto repeat;
    animation:bgScroll 80s linear infinite;
    position:relative;
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
            radial-gradient(
                    circle at 15% 20%,
                    color-mix(
                            in srgb,
                            var(--primary) 18%,
                            transparent
                    ),
                    transparent 45%
            ),
            radial-gradient(
                    circle at 85% 80%,
                    color-mix(
                            in srgb,
                            var(--accent) 15%,
                            transparent
                    ),
                    transparent 45%
            );
    mix-blend-mode:screen;
    opacity:.8;
}
body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
            linear-gradient(
                    rgba(255,255,255,.015) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(255,255,255,.015) 1px,
                    transparent 1px
            );
    background-size:40px 40px;
    opacity:.25;
}
@keyframes bgScroll{
    0%{
        background-position:0 0;
    }
    25%{
        background-position:-500px -150px;
    }
    50%{
        background-position:-1000px 0;
    }
    75%{
        background-position:-500px 150px;
    }
    100%{
        background-position:0 0;
    }
}
.center-box{
    display:none;
    position:relative;
    z-index:10;
    min-width:420px;
    max-width:760px;
    padding:50px 70px;
    text-align:center;
    color:var(--text);
    background:
            linear-gradient(
                    135deg,
                    rgba(18,25,75,.72),
                    rgba(8,12,35,.82)
            );
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--border);
    border-radius:24px;
    overflow:hidden;
    box-shadow:
            0 20px 60px rgba(0,0,0,.50),
            0 0 30px
            color-mix(
                    in srgb,
                    var(--primary) 25%,
                    transparent
            ),
            inset 0 0 0 1px rgba(255,255,255,.03);
    transition:
            transform .25s ease,
            box-shadow .25s ease;
}
.center-box:hover{
    transform:translateY(-4px);
    box-shadow:
            0 25px 80px rgba(0,0,0,.60),
            0 0 50px
            color-mix(
                    in srgb,
                    var(--primary) 40%,
                    transparent
            );
}
.center-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:
            linear-gradient(
                    transparent,
                    color-mix(
                            in srgb,
                            var(--primary) 8%,
                            transparent
                    ),
                    transparent
            );
    animation:scan 8s linear infinite;
    pointer-events:none;
}
.center-box::after{
    content:"";
    position:absolute;
    inset:0;
    background:
            radial-gradient(
                    circle at top right,
                    color-mix(
                            in srgb,
                            var(--primary) 12%,
                            transparent
                    ),
                    transparent 45%
            ),
            radial-gradient(
                    circle at bottom left,
                    color-mix(
                            in srgb,
                            var(--accent) 12%,
                            transparent
                    ),
                    transparent 45%
            );
    pointer-events:none;
}
@keyframes scan{
    from{
        transform:translateY(-100%);
    }
    to{
        transform:translateY(100%);
    }
}
.host{
    position:relative;
    z-index:2;
    font-size:38px;
    font-weight:900;
    letter-spacing:.04em;
    margin-bottom:14px;
    color:white;
    text-shadow:
            0 0 10px var(--primary),
            0 0 25px var(--primary),
            0 0 40px
            color-mix(
                    in srgb,
                    var(--primary) 50%,
                    transparent
            );
}
.date{
    position:relative;
    z-index:2;
    font-size:13px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--text-body);
}
.leaf{
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    z-index:2;
}
.leaf:nth-child(1){
    left:24px;
    top:24px;
    background:var(--primary);
    box-shadow:
            0 0 10px var(--primary),
            0 0 20px var(--primary),
            0 0 30px var(--primary);
}
.leaf:nth-child(2){
    right:24px;
    bottom:24px;
    background:var(--accent);
    box-shadow:
            0 0 10px var(--accent),
            0 0 20px var(--accent),
            0 0 30px var(--accent);
}