/* styling for body */
body{
    background-color: black;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

/* styling for blob */
@keyframes rotate{
    from{
        rotate: 0deg;
    }
    50%{
        scale: 1 1.5;
    }
    to{
        rotate:360deg;
    }
}
#blob{
    background-color: #fff;
    height: 30vw;
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    left:50%;
    top:50%;
    translate: -50% -50%;
    background: linear-gradient(to right, aquamarine, mediumpurple);
    animation: rotate 20s infinite;
    opacity: 0.8;
}

#blur{
    height: 100%;
    width:100%;
    position: absolute;
    z-index: 2;
    backdrop-filter: blur(12vmax);
}


/* styling for text */
p {
    font-size: clamp(3rem, 10vw, 10rem);
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: 3;
    margin: 0;
    padding: 0rem clamp(1rem, 2vw, 3rem);
    overflow: wrap;
}