*, *:before, *:after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: none;
}
html {
	background-color: #111;
}
html, body {
	height: 100%;
}
canvas {
	display: block;
	width: 100%;
	height: 100%;
}

h3,p {
    position: relative;
    z-index: 3; /* Make sure it's above the background layers */
    color: white; /* Just to make sure it's visible */
}

.wrapper {
	position: relative;
	height: 100%;
	width: 100%;
	/* background-color: #111; */
	/* background: linear-gradient(to bottom, rgba(8, 8, 8, 1) 0%, rgba(13, 13, 13, 1) 70%, rgba(40, 30, 30, 1) 90%); */
	background:url("../img/space_bkg.svg");
	background-size:cover;
	overflow: hidden;
}
.wrapper__absolute--full {
	position: absolute;
	width: 100%;
	height: 100%;
}
#particles-js {
	padding-bottom: 150px;
}
.space-nebula__wrapper {
	opacity: 0.08;
}
@keyframes space-nebula-scroll-small {
	from {
		background-position: 0% 0%;
   }
	to {
		background-position: -1200px 0%;
   }
}
@keyframes space-nebula-scroll-med {
	from {
		background-position: 0% 0%;
   }
	to {
		background-position: -1600px 0%;
   }
}
@keyframes space-nebula-scroll-large {
	from {
		background-position: 0% 0%;
   }
	to {
		background-position: -2400px 0%;
   }
}
.space-nebula {
	position: absolute;
	width: 100%;
	height: 800px;
	top: 16%;
	background-size: 1600px 800px;
	background-position: 0% 0%;
}
.space-nebula-01 {
	background-image: url("../img/bg_nebula_01.svg");
	background-size: 1200px 600px;
	height: 600px;
	top: 20%;
	opacity: 0.65;
	animation: space-nebula-scroll-small 40s linear infinite;
}
.space-nebula-02 {
	background-image: url("../img/bg_nebula_02.svg");
	opacity: 0.8;
	animation: space-nebula-scroll-med 60s linear infinite;
}
.space-nebula-03 {
	background-image: url("../img/bg_nebula_02.svg");
	background-size: 2400px 1200px;
	height: 1200px;
	opacity: 0.5;
	top: -4%;
	background-position: 0% 0%;
	animation: space-nebula-scroll-large 45s linear infinite;
}
.orb__wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 0;
}
@keyframes orb-mover {
	0% {
		transform: translateY(-100px);
		animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
	1% {
		transform: translateY(-100px);
		animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
	49% {
		transform: translateY(-50px);
		animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
	51% {
		transform: translateY(-50px);
		animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
	99% {
		transform: translateY(-100px);
		animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
	100% {
		transform: translateY(-100px);
		animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
}
.orb__mask {
	position: relative;
	height: 300px;
	width: 300px;
	border-radius: 50%;
	overflow: hidden;
	z-index: 1;
	box-shadow: 0px 15px 20px rgba(255, 10, 10, 0.1), 0px 1px rgba(255, 50, 50, 0.18);
	animation: orb-mover 8s linear infinite;
}
@keyframes orb-rotater {
	from {
		background-position: 0px 0%;
   }
	to {
		background-position: 800px 0%;
   }
}
.orb__texture {
	position: absolute;
	height: 100%;
	width: 100%;
	background-image: url("../img/planet_bg_base_12.svg");
	background-size: 800px 400px;
	background-position: 0% 0%;
	border-radius: 50%;
	transform: rotateZ(-35deg);
	animation: orb-rotater 8s linear infinite;
	z-index: 1;
}
.orb__cloudgroup {
	position: absolute;
	height: 300px;
	width: 300px;
	z-index: 2;
}
.orb__clouds {
	position: absolute;
	height: 100%;
	width: 100%;
	background-size: 800px 400px;
	background-position: center center;
	background-position: 0% 0%;
}

/* This will change the color to white */
/*.orb__clouds-01 {
    background-image: url("../img/planet_bg_clouds_01.svg");
    filter: brightness(0) invert(1); 
}

/* This will change the color to white */
/*.orb__clouds-02 {
	background-image: url("../img/planet_bg_clouds_02.svg");
	filter: brightness(0) invert(1); 
}*/

.orb__cloudgroup-01 {
	opacity: 0.2;
	transform: rotateZ(-19deg) translateY(-50%);
}
.orb__cloudgroup-01 .orb__clouds-01 {
	animation: orb-rotater 17s linear infinite;
}
.orb__cloudgroup-01 .orb__clouds-02 {
	animation: orb-rotater 35s linear infinite;
	opacity: 0.5;
}
.orb__cloudgroup-02 {
	opacity: 0.4;
	transform: rotateZ(-19deg) translateY(-27%);
}
.orb__cloudgroup-02 .orb__clouds-01 {
	animation: orb-rotater 35s linear infinite;
	opacity: 0.5;
}
.orb__cloudgroup-02 .orb__clouds-02 {
	animation: orb-rotater 25s linear infinite;
}
.orb__cloudgroup-03 {
	opacity: 0.4;
	transform: rotateZ(-19deg) translateY(-1%);
}
.orb__cloudgroup-03 .orb__clouds-01 {
	animation: orb-rotater 17s linear infinite;
}
.orb__cloudgroup-03 .orb__clouds-02 {
	animation: orb-rotater 35s linear infinite;
	opacity: 0.5;
}
.orb__cloudgroup-04 {
	opacity: 0.85;
	transform: rotateZ(-19deg) translateY(24%);
}
.orb__cloudgroup-04 .orb__clouds-01 {
	animation: orb-rotater 35s linear infinite;
	opacity: 0.5;
}
.orb__cloudgroup-04 .orb__clouds-02 {
	animation: orb-rotater 25s linear infinite;
}
.orb__shading {
	position: absolute;
	height: 300px;
	width: 300px;
	transform: translateY(-60px) scale(1.4);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 1) 100%);
	z-index: 3;
}
.orb__lighting {
	position: absolute;
	height: 300px;
	width: 300px;
	box-shadow: inset 0px -5px 7px rgba(255, 50, 50, 0.15), inset 0px -1px 1px rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	z-index: 4;
}
@keyframes beacon-flight-01 {
	0% {
		transform: translate(-20%, 55%);
   }
	50% {
		transform: translate(120%, 28%);
   }
	51% {
		transform: translate(120%, 55%);
   }
	100% {
		transform: translate(-20%, 65%);
   }
}
@keyframes beacon-flight-02 {
	0% {
		transform: translate(-20%, 7%);
   }
	50% {
		transform: translate(120%, 32%);
   }
	51% {
		transform: translate(120%, 23%);
   }
	100% {
		transform: translate(-20%, 65%);
   }
}
@keyframes beacon-flight-03 {
	0% {
		transform: translate(-20%, 78%);
   }
	50% {
		transform: translate(120%, 32%);
   }
	51% {
		transform: translate(120%, 78%);
   }
	100% {
		transform: translate(-20%, 72%);
   }
}
.beacon-wrapper {
	top: 0;
	z-index: 4;
}
.beacon-wrapper-01 {
	transform: translate(-20%, 55%);
	animation: beacon-flight-01 12s linear infinite;
}
.beacon-wrapper-02 {
	transform: translate(-20%, 55%);
	animation: beacon-flight-02 12s 4s linear infinite;
}
.beacon-wrapper-03 {
	transform: translate(-20%, 55%);
	animation: beacon-flight-03 12s 8s linear infinite;
}
@keyframes beacon-flash {
	0% {
		opacity: 0.25;
   }
	5% {
		opacity: 1;
   }
	100% {
		opacity: 0.25;
   }
}
.beacon {
	position: absolute;
	top: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(44, 130, 235, 0.75) 15%, rgba(44, 130, 235, 0.25) 30%, rgba(44, 130, 235, 0) 65%);
	opacity: 1;
	animation: beacon-flash 0.8s linear infinite;
}
.landscape {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 150px;
}
@keyframes landscape__bg-scroller {
	from {
		background-position: 0px bottom;
   }
	to {
		background-position: 2400px bottom;
   }
}
.landscape__bg {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 220px;
	background-size: 2400px 220px;
	background-position: 0px bottom;
	background-repeat: repeat;
}
.landscape__bg--01 {
	background-image: url("../img/landscape_fg_01.svg");
	animation: landscape__bg-scroller 40s linear infinite;
}
.landscape__bg--02 {
	background-image: url("../img/landscape_fg_02.svg");
	animation: landscape__bg-scroller 60s linear infinite;
}
.landscape__bg--03 {
	background-image: url("../img/landscape_fg_03.svg");
	animation: landscape__bg-scroller 100s linear infinite;
}
.landscape-clouds__wrapper {
	top: 0%;
	opacity: 0.05;
}
@keyframes landscape-clouds-scroller {
	from {
		background-position: 0px 0%;
   }
	to {
		background-position: -800px 0%;
   }
}
.landscape-clouds {
	position: absolute;
	width: 100%;
	height: 400px;
	bottom: -2%;
	background-size: 800px 400px;
	background-position: 0% 0%;
}
.landscape-clouds-01 {
	background-image: url("../img/landscape_clouds_01.svg");
	animation: landscape-clouds-scroller 80s linear infinite;
}
.landscape-clouds-02 {
	background-image: url("../img/landscape_clouds_02.svg");
	opacity: 0.5;
	animation: landscape-clouds-scroller 26s linear infinite;
}

.footer {
	position: absolute;
	bottom: 10px; /* Adjust as needed */
	left: 10px; /* Adjust as needed */
	background-color: transparent; /* Adjust if you need a background */
	color: white;
	font-family: "Orbitron", sans-serif;
	font-weight:bold;
	z-index: 20; /* Ensure it overlays the landscape */
  }