/* Satellites SCSS
 S *CSS needs to be run through a "Sassy" compilier to get the .css file which can be uploaded to website.


 https://beautifytools.com/scss-compiler.php
 */
body {
    background-color: #0d0e29;
    /* void */
    background-image: url(/media/wall-stars.jpg);
    /* background-size: cover; */
    margin: 0;

    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    background-size: cover;
    background-repeat: repeat;


}

.satellites {
    /* Displays on half right of background */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Displays over entire background */
    /*
     * position: relative;
     * width: 100%;
     * height: 100vh;
     * overflow: hidden; */;
}

.satellite {
    position: absolute;
    left: var(--satellite-left-offset);
    bottom: -25%;
    display: block;
    animation: float-up var(--satellite-float-duration) var(--satellite-float-delay) ease-in infinite;
}

.satellite::before {
    position: absolute;
    content: var(--satellite-emoji);
    top: 0;
    left: 0;
    color: transparent;
    filter: brightness(1.2) hue-rotate(var(--satellite-hue));
    /*changes the satellite color*/
    animation: var(--satellite-sway-type) var(--satellite-sway-duration) var(--satellite-sway-delay) ease-in-out alternate infinite;
}

.satellite:nth-child(0) {
    --satellite-left-offset: 95vw;
    --satellite-emoji: url(/media/minis_spheres.png);
    --satellite-float-duration: 10s;
    --satellite-sway-duration: 5s;
    --satellite-float-delay: 1s;
    --satellite-sway-delay: 4s;
    --satellite-sway-type: sway-right-to-left;
    --satellite-hue: 143deg;
}

.satellite:nth-child(1) {
    --satellite-left-offset: 85vw;
    --satellite-emoji: url(/media/minis_lemur2.png);
    --satellite-float-duration: 12s;
    --satellite-sway-duration: 5s;
    --satellite-float-delay: 4s;
    --satellite-sway-delay: 3s;
    --satellite-sway-type: sway-right-to-left;
    --satellite-hue: 67deg;
}

.satellite:nth-child(2) {
    --satellite-left-offset: 97vw;
    --satellite-emoji: url(/media/minis_dove.png);
    --satellite-float-duration: 8s;
    --satellite-sway-duration: 5s;
    --satellite-float-delay: 3s;
    --satellite-sway-delay: 1s;
    --satellite-sway-type: sway-right-to-left;
    --satellite-hue: 51deg;
}

.satellite:nth-child(3) {
    --satellite-left-offset: 31vw;
    --satellite-emoji: url(/media/minis_centauri.png);
    --satellite-float-duration: 10s;
    --satellite-sway-duration: 5s;
    --satellite-float-delay: 0s;
    --satellite-sway-delay: 1s;
    --satellite-sway-type: sway-left-to-right;
    --satellite-hue: 248deg;
}

.satellite:nth-child(4) {
    --satellite-left-offset: 74vw;
    --satellite-emoji: url(/media/minis_lemur2.png);
    --satellite-float-duration: 11s;
    --satellite-sway-duration: 4s;
    --satellite-float-delay: 0s;
    --satellite-sway-delay: 4s;
    --satellite-sway-type: sway-right-to-left;
    --satellite-hue: 184deg;
}

.satellite:nth-child(5) {
    --satellite-left-offset: 82vw;
    --satellite-emoji: url(/media/minis_dove.png);
    --satellite-float-duration: 10s;
    --satellite-sway-duration: 5s;
    --satellite-float-delay: 4s;
    --satellite-sway-delay: 0s;
    --satellite-sway-type: sway-right-to-left;
    --satellite-hue: 358deg;
}

.satellite:nth-child(6) {
    --satellite-left-offset: 16vw;
    --satellite-emoji: url(/media/minis_centauri.png);
    --satellite-float-duration: 11s;
    --satellite-sway-duration: 5s;
    --satellite-float-delay: 0s;
    --satellite-sway-delay: 3s;
    --satellite-sway-type: sway-right-to-left;
    --satellite-hue: 117deg;
}

.satellite:nth-child(7) {
    --satellite-left-offset: 83vw;
    --satellite-emoji: url(/media/minis_centauri.png);
    --satellite-float-duration: 6s;
    --satellite-sway-duration: 5s;
    --satellite-float-delay: 0s;
    --satellite-sway-delay: 2s;
    --satellite-sway-type: sway-right-to-left;
    --satellite-hue: 163deg;
}

/*
.satellite:nth-child(8) {
    --satellite-left-offset: 0vw;
    --satellite-emoji: url(/media/emoji_beam.gif);
    --satellite-float-duration: 12s;
    --satellite-sway-duration: 0s;
    --satellite-float-delay: 0s;
    --satellite-sway-delay: 0s;
    --satellite-sway-type: sway-left-to-right;
    --satellite-hue: 0deg;
} */

.satellite:nth-child(8) {
    --satellite-left-offset: 90vw;
    --satellite-emoji: url(/media/minis_spheress.png);
    --satellite-float-duration: 12s;
    --satellite-sway-duration: 4s;
    --satellite-float-delay: 5s;
    --satellite-sway-delay: 2s;
    --satellite-sway-type: sway-left-to-right;
    --satellite-hue: 0deg;
}

.satellite:nth-child(9) {
    --satellite-left-offset: 57vw;
    --satellite-emoji: url(/media/minis_pelican.png);
    --satellite-float-duration: 6s;
    --satellite-sway-duration: 5s;
    --satellite-float-delay: 1s;
    --satellite-sway-delay: 1s;
    --satellite-sway-type: sway-right-to-left;
    --satellite-hue: 267deg;
}

.satellite:nth-child(10) {
    --satellite-left-offset: 13vw;
    --satellite-emoji: url(/media/minis_lemur2.png);
    --satellite-float-duration: 8s;
    --satellite-sway-duration: 6s;
    --satellite-float-delay: 3s;
    --satellite-sway-delay: 1s;
    --satellite-sway-type: sway-left-to-right;
    --satellite-hue: 284deg;
}

.satellite:nth-child(11) {
    --satellite-left-offset: 2vw;
    --satellite-emoji: url(/media/minis_dove.png);
    --satellite-float-duration: 8s;
    --satellite-sway-duration: 6s;
    --satellite-float-delay: 2s;
    --satellite-sway-delay: 1s;
    --satellite-sway-type: sway-left-to-right;
    --satellite-hue: 174deg;
}

.satellite:nth-child(12) {
    --satellite-left-offset: 83vw;
    --satellite-emoji: url(/media/minis_pelican.png);
    --satellite-float-duration: 11s;
    --satellite-sway-duration: 4s;
    --satellite-float-delay: 2s;
    --satellite-sway-delay: 0s;
    --satellite-sway-type: sway-right-to-left;
    --satellite-hue: 270deg;
}

.satellite:nth-child(13) {
    --satellite-left-offset: 84vw;
    --satellite-emoji: url(/media/minis_dove.png);
    --satellite-float-duration: 8s;
    --satellite-sway-duration: 5s;
    --satellite-float-delay: 1s;
    --satellite-sway-delay: 4s;
    --satellite-sway-type: sway-right-to-left;
    --satellite-hue: 324deg;
}

.satellite:nth-child(14) {
    --satellite-left-offset: 14vw;
    --satellite-emoji: url(/media/minis_spheres.png);
    --satellite-float-duration: 8s;
    --satellite-sway-duration: 5s;
    --satellite-float-delay: 0s;
    --satellite-sway-delay: 0s;
    --satellite-sway-type: sway-left-to-right;
    --satellite-hue: 201deg;
}

.satellite:nth-child(15) {
    --satellite-left-offset: 42vw;
    --satellite-emoji: url(/media/minis_osirisrex.png);
    --satellite-float-duration: 8s;
    --satellite-sway-duration: 6s;
    --satellite-float-delay: 1s;
    --satellite-sway-delay: 2s;
    --satellite-sway-type: sway-left-to-right;
    --satellite-hue: 33deg;
}

.satellite:nth-child(16) {
    --satellite-left-offset: 100vw;
    --satellite-emoji: url(/media/minis_dove.png);
    --satellite-float-duration: 7s;
    --satellite-sway-duration: 6s;
    --satellite-float-delay: 2s;
    --satellite-sway-delay: 0s;
    --satellite-sway-type: sway-left-to-right;
    --satellite-hue: 315deg;
}

.satellite:nth-child(17) {
    --satellite-left-offset: 55vw;
    --satellite-emoji: url(/media/minis_lemur2.png);
    --satellite-float-duration: 10s;
    --satellite-sway-duration: 4s;
    --satellite-float-delay: 4s;
    --satellite-sway-delay: 4s;
    --satellite-sway-type: sway-left-to-right;
    --satellite-hue: 335deg;
}

.satellite:nth-child(18) {
    --satellite-left-offset: 3vw;
    --satellite-emoji: url(/media/minis_lemur2.png);
    --satellite-float-duration: 8s;
    --satellite-sway-duration: 4s;
    --satellite-float-delay: 0s;
    --satellite-sway-delay: 1s;
    --satellite-sway-type: sway-right-to-left;
    --satellite-hue: 135deg;
}

.satellite:nth-child(19) {
    --satellite-left-offset: 13vw;
    --satellite-emoji: url(/media/minis_pelican.png);
    --satellite-float-duration: 11s;
    --satellite-sway-duration: 4s;
    --satellite-float-delay: 3s;
    --satellite-sway-delay: 3s;
    --satellite-sway-type: sway-left-to-right;
    --satellite-hue: 131deg;
}

.satellite:nth-child(20) {
    --satellite-left-offset: 58vw;
    --satellite-emoji: url(/media/minis_dove.png);
    --satellite-float-duration: 7s;
    --satellite-sway-duration: 4s;
    --satellite-float-delay: 4s;
    --satellite-sway-delay: 4s;
    --satellite-sway-type: sway-left-to-right;
    --satellite-hue: 30deg;
}

@keyframes float-up {

    to {
        transform: translateY(-175vh);
    }
}

@keyframes sway-left-to-right {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes sway-right-to-left {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}