/* ===================================================== */
/* FLOATING SVG */
/* ===================================================== */

.floating-svg {

    position: absolute;

    pointer-events: none;

    opacity: 0.12;

    z-index: 1;

    animation:
        floatingScience 8s ease-in-out infinite;

}

/* ===================================================== */
/* POSITIONS */
/* ===================================================== */

.atom-svg {
    width: 140px;
    position: absolute;
}

.atom-svg.pos1 {
    top: 10%;
    left: 5%;
}

.atom-svg.pos2 {
    top: 35%;
    left: 65%;
}

.atom-svg.pos3 {
    bottom: 10%;
    left: 15%;
}

.pi-svg {
    position: absolute;
    width: 140px;
}

.pi-svg.pos1 {
    top: 20%;
    right: 8%;
}

.pi-svg.pos2 {
    top: 35%;
    left: 24%;
}

.pi-svg.pos3 {
    bottom: 1%;
    right: 30%;
}

.integral-svg {
    width: 180px;
    position: absolute;
}

.integral-svg.pos1 {
    top: 20%;
    left: 15%;
}

.integral-svg.pos2 {
    top: 10%;
    right: 15%;
}


.molecula-svg {
    width: 148px;
    position: absolute;
}

.molecula-svg.pos1 {
    top: 50%;
    left: 18%;

}

.molecula-svg.pos2 {
    bottom: 10%;
    right: 18%;

}

.dna-svg {
    width: 100px;
    position: absolute;
}

.dna-svg.pos1 {
    bottom: 33%;
    right: 25%;
}

.dna-svg.pos2 {
    bottom: 2%;
    left: 30%;
}

/* ===================================================== */
/* FLOATING SCIENCE */
/* ===================================================== */

@keyframes floatingScience {

    0% {

        transform:
            translateY(0px) rotate(0deg);

    }

    25% {

        transform:
            translateY(-15px) rotate(90deg);

    }

    50% {

        transform:
            translateY(0px) rotate(180deg);

    }

    75% {

        transform:
            translateY(15px) rotate(270deg);

    }

    100% {

        transform:
            translateY(0px) rotate(360deg);

    }

}