@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #141f2b;
    overflow: hidden;
}

div.main {
    cursor: none;
    z-index: 1;
    padding: 24px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    font-family: 'Poppins', sans-serif;
    backdrop-filter: blur(4px);
    border: 0.4px solid rgba(255, 255, 255, 0.294);
    animation: shake-x 7s linear infinite alternate;

    h1 {
        user-select: none;
        font-size: 48px;
        color: #141f2b;
        font-weight: 700;
        text-align: center;
        position: relative;
        background: linear-gradient(90deg, #141f2b 30%, #aab7c5 50%, #141f2b 70%);
        background-size: 200%;
        background-position-x: 60px;
        background-clip: text;
        color: transparent;
        animation: shine 5s ease infinite;
    }
    span {
        user-select: none;
        text-align: center;
        display: block;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 10px;
        color: #141f2b8a;
        letter-spacing: 4px;
    }
}
label {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    opacity: 0.4;
    background: linear-gradient(45deg, #82c0cc, #ffc067);
    animation: dimming-candle 45s ease 0s infinite;
}

label:first-of-type {
    opacity: 0.2;
    width: 320px;
    filter: blur(60px);
    animation: dimming-candle 45s ease 2s infinite;
}

label:nth-of-type(2) {
    opacity: 0.2;
    width: 240px;
    filter: blur(40px);
}

label:nth-of-type(3) {
    opacity: 0.5;
    width: 120px;
    filter: blur(16px);
}
label:nth-of-type(4) {
    opacity: 1;
    width: 220px;
    height: 80px;
    filter: blur(12px);
}

section {
    position: absolute;
    aspect-ratio: 1/1;
    background: transparent;
    border-radius: 100%;

    width: 10%;
    outline: 24px solid #283039;
    filter: blur(24px);
    opacity: 0;
    animation: blow 15s ease-in infinite;
}

@keyframes dimming-candle {
    0% {
        scale: 1;
    }
    50% {
        scale: 1.5;
    }
    100% {
        scale: 1;
    }
}

@keyframes blow {
    0% {
        width: 10%;
        outline-width: 24px;
        filter: blur(24px);
        opacity: 0;
    }
    10% {
        width: 170%;
        outline-width: 80px;
        filter: blur(40px);
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        width: 250%;
        opacity: 0;
    }
}

@keyframes shine {
    0% {
        background-position-x: 60px;
    }
    100% {
        background-position-x: 500px;
    }
}

@keyframes shake-x {
    0% {
        scale: 100%;
    }
    100% {
        scale: 110%;
    }
}