body {
    height: 100%;
    padding-bottom: 20px;
}

.tooltipscatter {
    position: absolute;
    padding: 0.5% 1%;
    z-index: 50;
    background-color: rgba(224, 224, 224, 1);
    border-radius: 5px;
    /* pointer-events: none; */
}

.scroll_link {
    display: block;
    margin-left: -3%;
    margin-top: 5%;
}

.scroll_link img {
    opacity: 0.2;
    width: 40px;
    transition: opacity 0.2s ease;
}

.scroll_link img:hover {
    opacity: 0.6;
}

/*********** START RAIN ANIMATION ************/
.rain {
    position: absolute;
    width: 60vw;
    height: 100%;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.drop {
    position: absolute;
    bottom: 100%;
    width: 15px;
    height: 120px;
    pointer-events: none;
    animation: drop 0.5s linear infinite;
    z-index: 0;
}

@keyframes drop {
    0% {
        transform: translateY(0vh);
    }
    75% {
        transform: translateY(90vh);
    }
    100% {
        transform: translateY(90vh);
    }
}

.stem {
    width: 3px;
    height: 50%;
    margin-left: 7px;
    background: linear-gradient(
        to bottom,
        rgba(33, 150, 243, 0),
        rgba(33, 150, 243, 0.2)
    );
    animation: stem 0.5s linear infinite;
}

@keyframes stem {
    0% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/*********** END RAIN ANIMATION ************/

/********** START SUN ANIMATION ************/
#sun {
    position: absolute;
    left: -20vw;
    margin: auto;
    width: 30rem;
    height: 30rem;
    animation: ray_anim 60s linear infinite;
    opacity: inherit;
    pointer-events: none;
}

@keyframes ray_anim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/************ END SUN ANIMATION *********/

/*********** START CLOUD ANIMATION *********/
/* Cloud from https://commons.wikimedia.org/wiki/File:Antu_folder-cloud.svg */
/* Animation adapted https://codepen.io/bbilginn/pen/ctKxu */

.clouds {
    position: absolute;
    width: 50vw;
    left: 20vw;
    opacity: inherit;
    z-index: 0;
    pointer-events: none;
}

[class^='cloud-'] {
    position: relative;
    right: 120%;
    width: 20%;
    height: 6%;
    opacity: 0.25;
}

.cloud-1 {
    top: -50px;
    opacity: 0.21;
    animation: moveclouds 30s linear infinite;
}

.cloud-2 {
    top: 200px;
    opacity: 0.17;
    transform: scale(0.8);
    animation: moveclouds 45s linear infinite;
    animation-delay: -35s;
}

.cloud-3 {
    top: 100px;
    opacity: 0.15;
    transform: scale(0.6);
    animation: moveclouds 40s linear infinite;
}

.cloud-4 {
    top: 300px;
    opacity: 0.25;
    transform: scale(0.75);
    animation: moveclouds 26s linear infinite;
    animation-delay: 0s;
}

@keyframes moveclouds {
    0% {
        right: -20%;
    }
    100% {
        right: 120%;
    }
}

/*********** END CLOUD ANIMATION ***********/