body {
    background-color: var(--background-color);
    overflow-x: hidden;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: -999;
    pointer-events: none;
    overflow-x: clip;
}

/* Blobs */

.blob {
    background-size: cover;
    width: auto;
}

#headerBlobCtn,
#underHeaderBlobCtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100vh;
    width: 100vw;
    z-index: -300;
}

#headerBlobCtn {
    transform: translate(-45%, -50%);
}
#headerBlob {
    height: 100%;
    width: 100%;
    animation: headerBlobAnim 25s infinite alternate;
}
@keyframes headerBlobAnim {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(-40deg);
    }
}

#underHeaderBlobCtn {
    transform: translate(-100%, -100%);
}
#underHeaderBlob {
    height: 200%;
    width: 200%;
    opacity: 1;

    animation: underHeaderBlobAnim 20s infinite alternate;
}
@keyframes underHeaderBlobAnim {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 0.1;
    }
}

#aboutBlobCtn {
    height: 60vh;
    display: flex;
    justify-content: end;
    filter: blur(100px);
    opacity: 0.75;
}
#aboutBlob {
    height: 200%;
    width: 70vw;
    margin: -20% -10% 0 0;

    animation: aboutBlobAnim 25s infinite alternate;
}
@keyframes aboutBlobAnim {
    from {
        transform: rotate(40deg);
    }
    to {
        transform: rotate(-40deg);
    }
}

#skillsBlobCtn {
    position: relative;
    height: 30vh;
    display: flex;
    justify-content: end;
    filter: blur(100px);
}
#skillsBlob {
    position: absolute;
    top: -15vw;
    left: 0;
    height: 250%;

    animation: skillsBlobAnim 20s infinite alternate;
}
@keyframes skillsBlobAnim {
    from {
        opacity: 1;
        transform: scale(1);
        filter: blur(1000px);
    }
    to {
        opacity: 0.75;
        transform: scale(1.5);
    }
}

#projectsBlobCtn {
    position: relative;
    height: 80vh;
    display: flex;
    justify-content: end;
    filter: blur(100px);
}
#projectsBlob {
    height: 100%;
    margin-top: -5vw;
    margin-right: -10vw;

    animation: projectsBlobAnim 25s infinite alternate;
}
@keyframes projectsBlobAnim {
    from {
        transform: rotate(20deg);
    }
    to {
        transform: rotate(-20deg);
    }
}

/* Cross pattern */

.crossPatternCtn {
    opacity: 0.8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -200;
}

/* Grain */

.grain {
    height: 100%;
    background-color: #060612;
    opacity: 20%;
    z-index: -100;
}

.grain:after {
    content: "";
    background-image: url("https://arc.net/noise-light.png");
    height: var(--grain-height);
    width: 100%;
    left: -100%;
    top: -100%;
    position: absolute;
    inset: 0;
    opacity: 0.75;
}