.particles {
    position: absolute;
    margin: 0 0 0 calc(20% + 4rem);
    width: calc(80% - 4rem);
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
}

.particles div {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    opacity: 0;
    transition-duration: 2s;
}

.particles .home {
    top: 15rem;
    background: radial-gradient(circle, rgba(var(--cn3)) 0%, transparent 45%);
}

.particles .about {
    top: -15rem;
    right: -40rem;
    background: radial-gradient(circle, rgba(var(--cn2), 0.8) 0%, transparent 45%);
}
.particles .skills {
    top: -35rem;
    left: -30rem;
    background: radial-gradient(circle, rgba(var(--cn1), 0.4) 0%, transparent 45%);
}
.particles .portfolio {
    top: 15rem;
    background: radial-gradient(circle, rgba(var(--cn1), 0.5) 0%, transparent 45%);
}




@media (max-width: 1170px)  {
    .particles {
        width: 100%;
        margin: 0;
    }
}

@media (max-width: 800px)  {

    .particles .about {
        top: -20rem;
        right: -20rem;
        min-width: 105%;
    }

    .particles .skills {
        top: -15rem;
        left: -15rem;
        min-width: 105%;
    }
    


}