html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    background: black;
    overflow: hidden;
}

canvas {
    position: fixed;
    inset: 0;
}

#logo {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cinematicZoom .9s cubic-bezier(.16, 1, .3, 1) forwards;
}

.icon {
    width: 96px;
    height: 96px;
    background: #5865F2;
    mask: url("https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/discord.svg") center / contain no-repeat;
    -webkit-mask: url("https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/discord.svg") center / contain no-repeat;
    filter: drop-shadow(0 0 28px rgba(88, 101, 242, .6));
}

@keyframes cinematicZoom {
    0% {
        transform: scale(.95);
        opacity: 0
    }

    25% {
        opacity: 1
    }

    70% {
        transform: scale(3);
        opacity: .95
    }

    100% {
        transform: scale(8);
        opacity: 0
    }
}