:root{
    --bc: #2E3440;
}

body{
    background-position: center;
    background-attachment: fixed;
	-webkit-background-size: cover; /* the next 3 lines are "browser prefixes", they are necessary to include for CSS3 techniques */
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
    margin: 0;

    background: var(--bc);
    background-repeat: repeat;
    background-size: 400px;
}

#container{
    font-family: 'Quicksand', sans-serif;
    color: #E5E9F0;
    font-weight: 600;
    font-size: 40px;
    text-align: center;
    vertical-align: middle;
    opacity: 0.8;

    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 60px;
    transform: translate(-50%, -50%);
    z-index: 3;

    text-decoration:none
}

@keyframes rotate {
    from {
        rotate: 0deg
    }
    to {
        rotate: 360deg
        
    }
}

#blob{
    background-color: white;
    height: 500px;
    aspect-ratio: 1;
    position:absolute;

    left: 50%;
    top: 50%;
    translate: -50% -50%;

    border-radius: 50%;

    background: linear-gradient(
        to right,
        #b48ead,
        #81a1c1,
        #a49ae6
    );

    animation: rotate 20s infinite;
}
#static{
    background-color: var(--bc);
    height: 350px;
    aspect-ratio: 1;
    position:absolute;

    left: 50%;
    top: 50%;
    translate: -50% -50%;

    border-radius: 50%;
    opacity: 0.5
}

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