body {
    background-color: black;
    height: 100%;
    width: 100%;
    margin: 0;
}



#blob{
    background-color: white;
    z-index: 1;
    position: fixed;
    height: 500px;
    aspect-ratio: 1;
    left:50%;
    top:50%;
    translate:-50% -50%;
    border-radius: 50%;
    background: linear-gradient(
        to right,
        purple,#CC5500
    );

    animation: rotate 20s infinite;

}

.iosBlur {
    filter:blur(150px);
}



@keyframes rotate {
    from {
        rotate: 0deg;
    }

    50% {
        scale: 1 1.5;
    }

    to {
        rotate: 360deg;
    }
}

#blur {
    height: 100%;
    width: 100%;
    position: absolute;
    top:0;
    z-index: 2;
    backdrop-filter: blur(200px);   
}

.main {
    z-index: 3;
    
    color: whitesmoke;
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    font-size: 5rem;

    font-family:'Major Mono Display', "Space Mono",  monospace;
    text-transform: capitalize;
}


.main > h1 {
    position: relative;
    text-align: center;
    width: fit-content;
    margin: 0;
    top: 42%;
    left: 50%;
    translate: -50% -50%;
    overflow-wrap: break-word;
    animation: magic 2s ease-in-out;
}

@keyframes magic {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media only screen and (max-width: 988px) {
    html { font-size:25%;} /* should render everything * 0.8 */
    h1 {
        min-width: 266px;
    }
}