body{
	height: 0;
	display: flex;
}

.earth{
	position: absolute;
	top: 20%;
	left: 10%;
	animation:earth-spin 100s infinite linear both;
	transition: scale 0.3s linear;
}
.moon {
	position: absolute;
	top: 20%;
	left: 17%;
	transition: scale 0.3s linear;
}

.moon:hover {
	scale: 1.5;
}

.earth:hover{
	scale: 1.3;
}




.astronaut {
	width: 25px;
	position: absolute;
	left: 13%;
	top: 10%;
	animation: spin 10s infinite linear;
	transition: scale 0.3s linear;
}
.astronaut:hover {
	scale: 1.3;
}


.satellite{
	width: 50px;
	position: absolute;
	left: 15%;
	top: 17%;
	animation:scale 5s infinite linear alternate, orbit 5s linear infinite;
}


.mars{
	width: 80px;
	position: absolute;
	left: 25%;
	top: 17%;
}
.lander {
	width: 40px;
	position: absolute;
	left: 26%;
	top: 15%;
	animation: floating 5s infinite linear alternate;
}


.jupiter {
	width: 200px;
	position: absolute;
	left: 40%;
	top: 2%;
	animation: earth-spin 100s infinite linear both 3s;
}


.ufo{
	width: 30px;
	position: absolute;
	bottom: 10%;
	left: -50%;
	animation: ufo 10s linear 5s infinite;
}


.rocket-container {
	width: 50px;
	position: absolute;
	left: 6%;
	bottom: 24px;
	animation: rocket-movement 60s linear infinite both running;
	rotate: 10deg;
}

.rocket{
		rotate: 50deg;
}
.flames{
	rotate: 234deg;
	position: absolute;
	top: 58px;
	left: 3px;
	transform-origin: center bottom;
	animation-name: flicker;
	animation-duration: 3ms;
	animation-delay: 200ms;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	animation-direction: alternate;

}

.flame {
	bottom: 0;
	position: absolute;
	border-bottom-right-radius: 50%;
	border-bottom-left-radius: 50%;
	border-top-left-radius: 50%;
	transform: rotate(-45deg) scale(1.5, 1.5);
}



.flame.orange {
	left: 10px;
	width: 5px;
	height: 5px;
	background: orange;
	box-shadow: 0px 0px 9px 4px orange;
}

.flame.red {
	left: 5px;
	width: 10px;
	height: 10px;
	background: OrangeRed;
	box-shadow: 0px 0px 5px 4px OrangeRed;
}



@keyframes flicker {
	0% {
		transform: rotate(-1deg);
	}

	20% {
		transform: rotate(1deg);
	}

	40% {
		transform: rotate(-1deg);
	}

	60% {
		transform: rotate(1deg) scaleY(1.04);
	}

	80% {
		transform: rotate(-2deg) scaleY(0.92);
	}

	100% {
		transform: rotate(1deg);
	}
}



@keyframes floating {
	from {
		transform: translateY(0px);
	}

	65% {
		transform: translateY(20px);
	}

	to {
		transform: translateY(-0px);
	}
}


@keyframes ufo {
	0% {
		transform: translateX(50vw);
	}


	70% {
		transform: translateX(100vw);
	}

	90% {
		transform: translateX(100vw);
	}

	100% {
		transform: translateX(200vw);
	}
}



@keyframes rocket-movement {
	100% {
		transform: translate(180vh, -120vh);
	}
}

@keyframes scale {
	0%{
		scale: 1.5;
	}

	50% {
		scale: 1;
	}

	100% {
		scale: 0.8;
	}
}


@keyframes spin {
	0% {
		transform: rotateZ(0deg);
	}

	100% {
		transform: rotateZ(360deg);
	}
}


@keyframes orbit {
	from {
		transform: rotate(0deg) translateX(150px);
	}

	to {
		transform: rotate(360deg) translateX(150px);
	}
}


/* @keyframes orbit {
	from {
		transform: rotate(0deg) translateX(150px) rotate(0deg);
	}

	to {
		transform: rotate(360deg) translateX(150px) rotate(-360deg);
	}
} */



@keyframes hover {
	0% {
		transform: translateY(6px);
	}

	100% {
		transform: translateY(-6px);
	}
}

@keyframes earth-spin {
	100% {
		transform: rotate(-360deg);
		transition: transform 15s;
	}
}



div.logo-name {
	position: fixed;
	bottom: 0%;
	left: 50%;
	transform: translate(-50%, 0%);
	background: 50% 100% / 50% 50% no-repeat radial-gradient(ellipse at bottom, #fff, transparent, transparent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 1rem;
	font-weight: 100;
	animation: reveal 3000ms ease-in-out forwards 200ms,
	/* lights 5s 750ms linear infinite; */
	glow 2500ms linear infinite 2000ms;

}



@keyframes reveal {
	80% {
		letter-spacing: 8px;
	}

	100% {
		background-size: 300% 300%;
	}
}

@keyframes glow {
	40% {
		text-shadow: 0 0 1px #fff;
	}
}


@keyframes lights {
	0% {
		color: hsl(230, 40%, 80%);
		text-shadow:
			0 0 1em hsla(320, 100%, 50%, 0.2),
			0 0 0.125em hsla(320, 100%, 60%, 0.3),
			-1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
			1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
	}

	30% {
		color: hsl(230, 80%, 90%);
		text-shadow:
			0 0 1em hsla(320, 100%, 50%, 0.5),
			0 0 0.125em hsla(320, 100%, 60%, 0.5),
			-0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
			0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
	}

	40% {
		color: hsl(230, 100%, 95%);
		text-shadow:
			0 0 1em hsla(320, 100%, 50%, 0.5),
			0 0 0.125em hsla(320, 100%, 90%, 0.5),
			-0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
			0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
	}

	70% {
		color: hsl(230, 80%, 90%);
		text-shadow:
			0 0 1em hsla(320, 100%, 50%, 0.5),
			0 0 0.125em hsla(320, 100%, 60%, 0.5),
			0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
			-0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
	}

	100% {
		color: hsl(230, 40%, 80%);
		text-shadow:
			0 0 1em hsla(320, 100%, 50%, 0.2),
			0 0 0.125em hsla(320, 100%, 60%, 0.3),
			1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
			-1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
	}

}




#signin_box{
	position: fixed;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 500px;
	padding:50px;
    background: rgb(255,255,255,0.2);
    border-radius: 4px;
    box-shadow: rgb(60 66 87 / 12%) 0px 7px 14px 0;
	z-index: 9999;

}

#signin_box fieldset{
	padding: 0;
	margin:25px 0;
	border: none;
	position: relative;

}

#signin_box h4{
	display: block;
    font-size: 20px;
    line-height: 28px;
    color: #fff;
}


#signin_box fieldset input[type="text"], #signin_box fieldset input[type="password"]{
	padding: 15px;
	width: 100%;
	font-size: 16px;
	color: #fff;
	border-radius: 4px;
	border: 1px solid #fff;
    border-radius: 4px;
    outline-color: rgb(118 130 148 / 0.5);
    background-color: rgb(255, 255, 255,0.1);

    /* box-shadow: rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, rgb(0 0 0 / 0%) 0px 0px 0px 0px, 
    rgb(60 66 87 / 16%) 0px 0px 0px 1px, 
    rgb(0 0 0 / 0%) 0px 0px 0px 0px, 
    rgb(0 0 0 / 0%) 0px 0px 0px 0px, 
    rgb(0 0 0 / 0%) 0px 0px 0px 0px; */

}

#signin_box fieldset input[type="text"]::placeholder,
#signin_box fieldset input[type="password"]::placeholder{
	opacity: 0.5;
	color: #fff;
}

#signin_box fieldset input[type="text"]:focus, #signin_box fieldset input[type="password"]:focus{
	color: #fff;
}

.login_msg{
	display: block;
		background: rgb(250, 87, 87, 0.3);
		color: #fff;
		padding: 10px;
		font-size: 14px;
		letter-spacing: 0.1em;
		text-align: center;
		border-radius: 4px;
		border: 1px solid #fa5757;
}

/* .login_button{
	width: 100%;
	display: block;
	font-size: 15px;
	color: #fff;
	border: none;
	margin: 0 0 15px 0;
	letter-spacing: 0.1em;
	background: var(--green-btn);
	padding: 10px;
	cursor: pointer;
	border-radius: 4px;
} */

/* .login_button {
	width: 100%;
	display: block;
	font-size: 15px;
	color: #fff;
	margin: 0 0 15px 0;
	letter-spacing: 0.1em;
	background-color: transparent;
	padding: 10px;
	cursor: pointer;
	border: solid 2px;
	border-radius: 6px;
	border-image: linear-gradient(to left, #743ad5 0%, #d53a9d 100%);
	border-image-slice: 1;
	outline: none;

	clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0, 100% 0, 100% 100%, 0 100%);
	transition: clip-path 0.3s ease-in-out;
}


.login_button:hover {
	clip-path: polygon(0 0, 12px 0, 12px 4px, 24px 4px, 24px 0, 100% 0, 100% 100%, 0 100%);
} */


.login_button {
	cursor: pointer;
	width: 100%;
	display: block;
	font-size: 15px;
	padding: 15px 10px;
	color: white;
	border:2px solid transparent;
	border-radius:6px;
	border-right-color:#743ad5;
	border-left-color:#d53a9d;
	margin: 0 0 15px 0;
	background:
	linear-gradient(to left,
	rgb(116, 58, 213) 0%, rgb(186, 58, 143) 50% ,
	transparent 70%,  transparent 85%, 
	rgb(201, 58, 128) 85%, rgb(213, 58, 157) 100%) top/100% 2px,
	linear-gradient(to left, #743ad5 0%, #d53a9d 80%) bottom/100% 2px;
	background-repeat:no-repeat; 
	outline: none;
}


.login_button:hover {
		background:
		linear-gradient(to left,
		rgb(116, 58, 213) 0%, rgb(186, 58, 143) 100%,
		transparent 70%, transparent 85%,
		rgb(201, 58, 128) 85%, rgb(213, 58, 157) 100%) top/100% 2px,
		linear-gradient(to left, #743ad5 0%, #d53a9d 100%) bottom/100% 2px;
		background-repeat: no-repeat;
}


.login_button:focus{
	outline: 1px solid #fff;

}


/* cursor: pointer;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 10px;
color: white;

background-color: transparent;

border: solid 1px;
border-radius: 6px;
border-image: linear-gradient(to left, #743ad5 0%, #d53a9d 100%);
border-image-slice: 1;

clip-path: polygon(0 0, 12px 0, 12px 1px, 24px 1px, 24px 0, 100% 0, 100% 100%, 0 100%); */



/* .login_button:hover{
	background: var(--green-btn-hover);
	
} */

.login_button:active{
}

div.withlove {
	text-align: center;
	margin: 10px 0 0 0;
	color: #fff;

}


@media screen and (max-width: 400px) {
	
#signin_box{
	width: 100%;
	padding:15px;
	top:20%;
	transform: translate(-50%, 0%);
}  

#signin_box fieldset input[type="text"], #signin_box fieldset input[type="password"]{
	font-size: 14px;
	width: 100%;

}

.login_btn{
	font-size: 14px;
	margin: 0 0 15px 0;
	letter-spacing: 0.1em;
}

.login_msg{
	font-size: 13px;
	letter-spacing: 0.1em;
}

}