html {
  height: 100%;
}

body {
	height: 100%;
	margin:0;
	overflow:hidden;

	background-color: black;

	font-size:clamp(.31em, 1.25vw, 1em);
	font-family: 'Space Mono', monospace;
}





/**********************/
/* ---little stars--- */
/**********************/
@keyframes little-star {
	50%{
		opacity: 0;
		transform:scale(.5);
	}
}

.star-wrap div {
	--size-litte-star:.25em;

	position: absolute;
	left:calc( (100% - var(--size-litte-star)) * var(--x));
	top:calc( (100% - var(--size-litte-star)) * var(--y));

	width: var(--size-litte-star);
	aspect-ratio:1/1;
	
	background-color: white;
	border-radius: 50%;
	
	animation: little-star 10s calc(-10s * var(--t)) infinite;
}





/*******************/
/* ---big stars--- */
/*******************/
.bigstar-wrap > div {
	--size-big-star:2em;

	position: absolute;
	top: calc(var(--top) * 100% - var(--size-big-star) / 2);
	left: calc(var(--left) * 100% - var(--size-big-star) / 2);
	
	width:var(--size-big-star);
	aspect-ratio: 1/1;
	transform: rotate(calc(var(--rotate) * 1turn));
	
	filter: 
		drop-shadow(0 0 0.25em rgb(179 179 250))
		drop-shadow(0 0 0.5em rgb(205 205 248))
		drop-shadow(0 0 2em rgb(220 220 255));
}

.bigstar-wrap > div:nth-of-type(1) {
	--top:.2;
	--left:.1;
	--rotate:.75;
	--dalay:.37;
}

.bigstar-wrap > div:nth-of-type(2) {
	--top:.1;
	--left:.8;
	--rotate:.75;
	--delay:.53;
}

.bigstar-wrap > div:nth-of-type(3) {
	--top:.65;
	--left:.35;
	--rotate:.6;
	--delay:.7;
}

.bigstar-wrap > div:nth-of-type(4) {
	--top:.8;
	--left:.88;
	--rotate:.3;
	--delay:.33;
}

.bigstar-wrap > div:nth-of-type(5) {
	--top:.9;
	--left:.4;
	--rotate:340deg;
	--delay:.79;
}

@keyframes glowing {
	50%{
		opacity: .375;
	}
}

.bigstar-wrap > div div {
	width: 100%;
	height: 100%;

	background-color: white;

	clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%);

	animation: glowing 7s calc( 7s * var(--delay) * -1 ) infinite ease-in-out;
}





/*****************/
/* ---Planets--- */
/*****************/
.planet {
    position: absolute;
		top:calc( 50% - var(--planet-size) / 2 + var(--planet-size) * var(--planet-top) );
		left:calc( 0% - var(--planet-size) / 2 + var(--planet-size) * var(--planet-left) );

		width: var(--planet-size);
    aspect-ratio:1/1;

    background-color: var(--planet-color);
    background-image: var(--planet-image);
		box-shadow: var(--planet-shadow);
		border-radius: 50%;
}


/* sun */
.sun {
    --planet-size:20em;
		--planet-left:0;
		--planet-top:0;

    --planet-color: yellow;
    --planet-image:  
			radial-gradient(circle at 33% 33%,yellow 20%,#ec9858 70%);
    --planet-shadow:
			0 0 0.25em #faa564,
			0 0 0.5em #a75f28,
			0 0 2em #d18a53;
}


/* earth */
.earth {
	--planet-size: 8.5em;
	--planet-left: 3.125;
	--planet-top: .25;

	--planet-color: rgb(65 128 227);
	--planet-image: 
			radial-gradient(circle at 33% 33%, rgb(65 128 227) 25%, rgb(0 38 200) 93%);
	--planet-shadow: 
			0em 0em 10em 0.1em rgb(65 128 227), 
			0em 0em 2em 0.01em rgb(42 89 165);
	
	/* voor de raket */
	display:grid;
	place-items:center;
	perspective: calc(var(--planet-size) * 4);
	transform-style: preserve-3d;
}

.earth.purple {
	--planet-color: rgb(163 125 224);
	--planet-image: 
		radial-gradient(circle at 33% 33%, rgb(163 125 224) 0%, rgb(160 45 199) 71%);
	--planet-shadow: 
		0em 0em 10em 0.1em rgb(180 142 241),
		0em 0em 2em 0.01em rgb(160 45 199);
}


/* orange planet */
.orangeplanet {
	--planet-size:7em;
	--planet-left: 2.625;
	--planet-top: -1.35;

	--planet-color: rgb(245 215 141);
	--planet-image: 
			linear-gradient(
				300deg, 
			rgb(233 192 79) 15%, 
			rgb(225 191 105) 36%,
			rgb(245 215 141) 46%, 
			rgb(230 202 139) 50%, 
			rgb(225 191 105) 66%, 
			rgb(233 192 79) 80%, 
			rgb(245 215 141)
			);
	--planet-shadow: 
			0 0 0.25em rgb(240 187 117),
			0 0 0.5em rgb(155 109 49),
			0 0 2em rgb(161 112 47);
}


/* purple planet */
.purpleplanet {
	--planet-size:7em;
	--planet-left: 2.25;
	--planet-top: 1.5;

	--planet-color: rgb(172 81 208);
	--planet-image: 
			radial-gradient(circle at 33% 33%, rgb(172 81 208) 25%, rgba(105 0 153) 93%);
	--planet-shadow:
			0 0 0.5em rgb(138 77 179),
			0 0 2em rgb(132 74 170),
			0 0 0.25em rgb(106 60 136);
}

.purpleplanet.pink {
	--planet-color: rgb(228 72 188);
	--planet-image: 
			radial-gradient(circle at 33% 33%, rgb(228 72 188) 0%, rgb(196 0 146) 100%);
	--planet-shadow:
			0 0 0.25em rgb(180 50 148),
			0 0 0.5em rgb(212 65 176),
			0 0 2em rgb(228 72 188);
}


/* red planet */
.redplanet {
	--planet-size:7.9em;
	--planet-left:4.75;
	--planet-top: -1.5;

	--planet-color: rgb(249 81 81);
	--planet-image: 
			radial-gradient(circle at 33% 33%, rgb(249 81 81) 0%, rgba(255 0 0) 100%);
	--planet-shadow:
			0 0 0.25em rgb(189 15 49),
			0 0 0.5em rgb(228 86 86),
			0 0 2em rgb(212 70 70);
}

.redplanet.green {
	--planet-color: rgb(97 210 83);
	--planet-image: 
			radial-gradient(circle at 33% 33%, rgb(97 210 83) 0%, rgb(64 142 51) 100%);
	--planet-shadow:
			0 0 0.25em rgb(66 151 66),
			0 0 0.5em rgb(69 156 69),
			0 0 2em rgb(76 167 76);
}


/* stripe planet */
.stripeplanet {
	--planet-size:10em;
	--planet-left:4.375;
	--planet-top:.7;

	--planet-color: rgb(197 137 46);
	--planet-image:
			radial-gradient(
				circle at 33% 33%, 
				rgb(206 170 80) 0%, 
				rgb(203 142 68) 33%, 
				rgb(207 159 81) 45%, 
				rgb(163 106 31) 65%, 
				rgb(170 111 35) 92%, 
				rgb(156 115 53) 100%
			);
	--planet-shadow:
			0 0 0.25em rgb(153 100 31),
			0 0 0.5em rgb(185 126 37),
			0 0 2em rgb(201 136 38);
}

.stripeplanet.pinkish {
	--planet-color: rgb(208 103 149);
	--planet-image: 
			radial-gradient(circle at 33% 33%, rgb(208 103 149) 25%, rgb(250 0 110) 93%);
	--planet-shadow:
			0 0 0.25em rgb(173 78 119),
			0 0 0.5em rgb(192 99 139),
			0 0 2em rgb(212 107 153);
}


/* saturn */
@keyframes spin {
	0% {
		transform:rotate(0);
	}
	100% {
		transform:rotate(1turn);
	}
}

@keyframes rings {
	0%{ 
		transform: rotateX(0turn) rotateY(0turn);
	}
	100%{
		transform: rotateX(3turn)  rotateY(2turn);
	}
}

.saturn {
	--planet-size:6.5em;
	--planet-left:9;
	--planet-top: 3.25;

	--planet-color: rgb(203, 114, 31);
	--planet-image: 
			linear-gradient(
				45deg, 
				rgb(203 114 31) 0%, 
				rgb(230 174 95) 25%, 
				rgb(255 202 70) 47%,
				rgb(255 201 59) 50%, 
				rgb(255 204 75) 54%, 
				rgb(232 177 79) 80%, 
				rgb(203 114 31) 100%
			);
	--planet-shadow: 
			0em 0em 10em 0.1em rgb(245 193 83),
			0em 0em 2em 0.01em rgb(240 188 76);   
	
	z-index: 1;
	
	animation: spin 5s linear infinite;

	/* voor de ringen */
	transform-style: preserve-3d;
	perspective: 30em;
	display:grid;
	place-items:center;
}

.saturn::after { 
	content: "";

	position: absolute;
	width: 200%;
	height: 200%;
 
  background-image:
		radial-gradient(
			transparent 40%,
			rgb(238 172 73) 45% 50%, 
			transparent 50% 55%,
			rgb(232 177 79) 60%
		);
	border-radius:inherit;
	filter: 
		drop-shadow(0 0 0.25em rgb(238 174 78))
		drop-shadow(0 0 0.5em rgb(185 126 37))
		drop-shadow(0 0 0.75em rgb(165 111 29));
  
	animation: rings 40s linear infinite;
}


/* light blue planet */
.lightblueplanet {
	--planet-size:7.5em;
	--planet-left:7.375;
	--planet-top: -1.65;

	--planet-color: rgb(53 177 192);
	--planet-image: 
			linear-gradient(
				150deg, 
				rgb(53 177 192), 
				rgb(53 134 192) 15%, 
				rgb(53 112 192) 26%,
				rgb(53 140 192) 36%, 
				rgb(53 163 192) 50%, 
				rgb(53 149 192) 64%, 
				rgb(53 131 192) 77%,
				rgb(53 177 192)
			);
	--planet-shadow: 
			0em 0em 10em 0.1em rgb(63 142 216),
			0em 0em 2em 0.01em rgb(66 113 212);
	
	/* voor de astronaut */
	transform-style: preserve-3d;
	perspective: 30em;
	display:grid;
	place-items:center;
}


/* dark blue planet */
.darkblueplanet{
	--planet-size:7.9em;
	--planet-left:8.75;
	--planet-top: 1.125;

	--planet-color: rgb(127,142,219);
	--planet-image: radial-gradient(circle at 33% 33%, rgb(127 142 219) 0%, rgb(16 6 162) 100%);
	--planet-shadow: 
			0 0 0.25em rgb(44 57 126),
			0 0 0.5em rgb(89 103 175),
			0 0 2em rgb(73 86 155);
}


/* small planet */
.smallplanet {
	--planet-size: 5em;
	--planet-left:15.125;
	--planet-top: -1.5;

	--planet-color: rgb(246 211 255);
	--planet-image: radial-gradient(circle at 33% 33%, rgb(246 211 255) 25%, rgb(234 140 255) 93%);
	filter: 
		drop-shadow(0 0 0.25em rgb(148 82 165))
		drop-shadow(0 0 0.5em rgb(153 99 167))
		drop-shadow(0 0 2em rgb(164 99 180));
} 

.smallplanet.heart{
	--planet-color: rgb(246 211 255);
	--planet-image:none;
	
	border-radius: 0;
	filter:
		drop-shadow(0 0 1em rgb(134 70 150))
		drop-shadow(0 0 2em rgb(153 99 167))
		drop-shadow(0 0 4em rgb(191 130 206));

	transform-origin: 33% 67%;
	transform: rotate(333deg) scale(.5);
}

.smallplanet.heart::before,
.smallplanet.heart::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color:inherit;
}

.smallplanet.heart:before {	
	left: 50%;
}
  
.smallplanet.heart:after {
	bottom: 50%;
}
  



/***************/
/* ---raket--- */
/***************/
@keyframes orbitten {
	0% {
		transform: scale(.4) rotateZ(0turn) rotateX(0turn) translateZ( calc(var(--planet-size) * 1.25));
	}
	50% {
		transform: scale(.2) rotateZ(1turn) rotateX(15turn) translateZ( calc(var(--planet-size) * 3.25));
	}
	100% {
		transform: scale(.4) rotateZ(2turn) rotateX(30turn) translateZ( calc(var(--planet-size) * 1.25));
	}
}

.raket {
	--raket-size: 4em;

	position: absolute;

	width:var(--raket-size);
	aspect-ratio: 1/2;
	display:grid;
	place-items:center;

	animation: orbitten 110s linear infinite;
}

.raket * {
	position: absolute;
}

.raket-body {
	top:0;
	
	width: calc(var(--raket-size) * .75);
	aspect-ratio: 1/2;
	
	background-color: white;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.raket-bottom {
	top: calc(var(--raket-size) * 1.33);

	height: 0;
	width: calc(var(--raket-size) * .75);

	border-bottom: calc(var(--raket-size) * .25) solid red;
	border-left: calc(var(--raket-size) * .15) solid transparent;
	border-right: calc(var(--raket-size) * .15) solid transparent;
}

.fire {
	bottom: 0;
	z-index:-1;

	height: calc(var(--raket-size) * .5);
	aspect-ratio: 5/4;
	
	border-radius: 0 0 50% 50% / 0 0 100% 100% ;
	background-color: #ec9858;
}

.window{
	top: calc(var(--raket-size) * .375);

	width:calc(var(--raket-size) * .45);
	aspect-ratio:1/1;
	
	border-radius: 50%;
	background-color: rgb(202, 255, 255);
	box-shadow:
		inset 0 0 0 calc(var(--raket-size) * .03) gray,
		inset calc(var(--raket-size) * -.125) 0 0 rgb(161 201 201);
}

.wing {
	top: calc(var(--raket-size) * 1);
	
	border-left: 1.3em solid transparent;
	border-right: 1.3em solid transparent;
	border-bottom: 2.6em solid white;
}

.wing.left{
	left: calc(var(--raket-size) * -.175);
	transform: rotate(-125deg);
}

.wing.right{
	transform: rotate(125deg);
	right: calc(var(--raket-size) * -.175);
}





/*******************/
/* ---astronaut--- */
/*******************/
@keyframes astronaut {
	0% {
		transform: rotate(0deg) scale(.3) translateX(0);
	}
	25%{
		transform:rotate(45deg) scale(.3) translateY(-4em);
	}
	50%{
		transform:rotate(120deg) scale(.3) translateX(-5em) translateY(0);
	}
 	100%{
		transform:rotate(360deg) scale(.3) translateX(0) translateY(0);
 	}
}

.astronautcontainer{
	top: -22%;

	filter:drop-shadow(1.25em 1em .25em #0008);
}
	
.astronaut{
   position: relative;
   
	 display:grid;
	 place-items:center;

   animation: astronaut 10s infinite;
}

.astronaut * {
	position: absolute;
	background-color: darkred;
}

.head{ 
	width: 2.5em;
	height: 2em;
	background-color: red;
	border-radius: 35%;
}

.glass{    
	width: 2em;
	height: 1.5em;
	background-color: lightgrey;
	border-radius: 35%;
}

.body{
	top: 1em;
	width: 2.5em;
	height: 5em;
	border-radius: .4em;
}

.arm {
	top: 1em;
	z-index: -1;
	width: 1.5em;
  height: 2.4em;
  border-radius: .4em;  
}

.arm.left {
	left: -1.875em;
}

.arm.right {
	right: -1.875em;
}
  
.legs{
    top: 4em;
		width:.05em;
    height: 2em;
		background-color: white;
}
  
.line {
	top: 1.9em;
	width:.05em;
	height: 1.5em;
	background-color: white;
}

.line.left{
	left:1.25em;
} 

.line.right{
  right:1.25em;
} 





/********/
/* form */
/********/

form {
	position: fixed;
	z-index:9999;
	right:1rem;
	bottom:1rem;

	display:flex;
	gap:.5rem;
}

button {
	margin:0;
	padding:.25em .375em;

	display:flex;
	gap:.25em;
	align-items:center;

	appearance: none;
	background:none;
	border:none;
	border-radius:.125em;
	outline:none;

	font:inherit;
	font-size:1rem;
	color:white;
	text-shadow:
		0 0 .25em black,
		0 0 .25em black,
		0 0 .5em black,
		0 0 .5em black,
		0 0 .1em black,
		0 0 .1em black
}

button#reset::before {
	content:"♲";
	font-size:2em;
	line-height:1em;
}

button#add5::after {
	content:"✶";
	font-size:2em;
	line-height:1em;
}

button#add50::after {
	content:"✴✴✴";
	font-size:1.125em;
}

button:hover,
button:focus {
	color:gold;
	box-shadow:0 0 0 .1em currentColor;
	--webkit-backdrop-filter:blur(5px);
	backdrop-filter:blur(5px);
}

button:active {
	color:red;
}