/* Satellites SCSS
SCSS 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_centauri.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/emoji_beam.gif);
	--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: 45vw;
	--satellite-emoji: url(/media/minis_osiris-rex.png);
	--satellite-float-duration: 7s;
	--satellite-sway-duration: 5s;
	--satellite-float-delay: 3s;
	--satellite-sway-delay: 4s;
	--satellite-sway-type: sway-left-to-right;
	--satellite-hue: 48deg;
}

.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_centauri.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_centauri.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_osiris-rex.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_lemur2.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_osiris-rex.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%);
	}
}