.main-start{
	margin-top: 3rem;
}

	.main-section{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		grid-gap: 1rem;
		width: 100%;
	}

.fig-aura{
	display: block;
	width: 100%;
}

	.fig-aura > div{
		display: block;
		width: min-content;
		height: min-content;
		padding: 13rem;
		margin: auto;
		margin-top: 6rem;
		border-radius: 50%;
		box-shadow:
			.6rem .6rem 1rem rgba(255, 255, 255, 0.1), 
			-.6rem -.6rem 1rem rgba(255, 255, 255, 0.1), 
			inset 0 0 1rem 0.2rem rgba(255, 255, 255, 10%);
	}

	.planet-aura{
		display: block;
		width: 13rem;
		height: 13rem;
		background-image: radial-gradient(
			circle at bottom right, 
			var(--gray-one) 30%, 
			var(--gray-full) 80%, 
			var(--gray-bg) 90%
		);
		border-radius: 50%;
		box-shadow: 
			-0.2rem -0.2rem 1rem var(--gray-bg), 
			-0.2rem -0.2rem .3rem var(--gray-bg), 
			0.2rem 0.2rem .3rem rgb(255 255 255 / 40%), 
			inset -0.2rem -0.2rem .3rem rgb(255 255 255 / 20%), 
			0.2rem 0.2rem 1rem var(--gray-title);
	}

.container-cosmic{
	display: block;
	width: 100%;
	height: 100%;
}

	.container-planet{
		display: block;
		width: max-content;
		margin: auto;
		border-radius: 50%;
		box-shadow: 
			0 0 2rem .1rem var(--gray-bg), 
			0 0 6.3rem 3.6rem #223C4D;
	}

		/* Cuerpo del comenta. */
		.com{
			position: absolute;
			z-index: 100;
			display: block;
			width: 0; height: 0;
			padding: .1rem 1rem;
			transform: rotate(-45deg);
			opacity: 0;
		/*  Cabeza del cometa. */
		}.com::before{
			content: "";
			position: absolute;
			top: 0; left: 0;
			display: block;
			width: 0.2rem;
			height: 0.2rem;
			background-color: #fff;
		}.com.move{
			animation: move-com 2s linear normal forwards;
		}

		.planet{
			position: relative;
			display: block;
			width: 0; height: 0;
			padding: 16rem;
			border-radius: 50%;
			margin: auto;
			background-image: radial-gradient(
				circle at 41% 37%, 
				#225DB7 10%, 
				#1E4799 30%, 
				#1D3784 60%, 
				#1B286A 80%, 
				#16255E 90%
			);
			box-shadow: 
				inset .3rem .3rem 1rem rgb(255, 255, 255, 5%), 
				inset -.3rem -.3rem 1rem rgb(0 0 0 / 10%), 
				-.1rem -.1rem 2rem rgb(255, 255, 255, 8%);
			filter: contrast(105%);
		}

			.moons{
				position: absolute;
				top: 0; right: 0; bottom: 0; left: 0;
				width: 100%; height: 100%;
				display: block;
			}

				.moons > span{
					position: absolute;
					top: 0; right: 0; bottom: 0; left: 0;
					display: block;
					width: 5rem; height: 5rem;
					border-radius: 50%;
					background-image: radial-gradient(
						circle at top left, 
						#F8F9F9 10%, 
						#CACFD2 30%, 
						#A6ACAF 60%, 
						#626567 80%, 
						#515A5A 90%
					);
					animation: moon-start 3s linear infinite alternate forwards;
				}.moons > span:last-child::before{
					content: "";
					position: absolute;
					top: 2.2rem; right: 0; bottom: 0; left: 1.6rem;
					display: inline-block;
					width: 0.8rem; height: 0.8rem;
					padding: .3rem;
					border-radius: 50%;
					background-image: radial-gradient(
						circle at top left, 
						#F8F9F9 10%, 
						#CACFD2 30%, 
						#A6ACAF 60%
					);
				}.moons > span:last-child{
					content: "";
					top: 26rem; left: 23rem;
					animation-duration: 5s;
				}

@keyframes moon-start{
	from{
		transform: translateY(-1rem);
	}
	to{
		transform: translateY(1rem);
	}
}

@keyframes move-com{
	from{
		opacity: 1;
		transform: translateY(0) rotate(-45deg);
	}
	to{
		opacity: 0;
		transform: translateY(100vh) translateX(-100rem) rotate(-45deg);
	}
}

tag, prop, value, class, comment{
	display: inline-block;
	letter-spacing: .1rem;
	line-height: 3rem;
	font-family: SourceCodePro;
	font-size: 1.4rem;
	font-weight: lighter;
	margin: .1rem;
}

comment{color: #ccc; font-style: italic;}
class{color: #50ff00;}
tag{color: #ff001f;}
prop{
	color: #00C9FF;
	font-style: italic;
}
value{color: #9B59B6;}

.marquee{
	position: relative;
	width: 100vw;
	height: 100vh;
	background-color: #000;
}

	.marquee marquee{
		position: absolute;
		top: 25%; left: 50%;
		display: block;
		width: 100%;
		transform: translate(-50%, -25%);
	}

	.marquee marquee:last-child{
		top: 75%;
		transform: translate(-50%, -75%);
	}

		.marquee marquee > h3{
			display: inline;
			font-size: 8rem;
			letter-spacing: 0.1rem;
			font-weight: lighter;
			text-align: center;
			color: #fff;
		}

.section-code{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;

	width: 100vw;
	min-height: 100vh;
	margin: 3rem 0;
}

	.section-code > div{
		flex-basis: 50%;
	}

		.container-code{
			display: block;
			width: 100%;
			margin: auto;
			border-radius: .6rem;
			overflow: hidden;
			box-shadow: 0 0 1.3rem .6rem rgb(0 0 0 / 10%);
		}

			.container-code-header{
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;

				flex-basis: 100%;
				padding: 2rem;
				color: #fff;
				font-size: 2rem;
				letter-spacing: .1rem;
				text-shadow: .3rem .3rem .4rem rgb(0 0 0 / 30%);
				background-color: #2e2e2e;
			}

				.container-code-header figure span{
					display: inline-block;
					width: 1.6rem;
					height: 1.6rem;
					border-radius: 50%;
					background-color: #000;
					margin: 0 .3rem;
				}

			.container-code-body{
				padding: 2rem;
				color: #fff;
				text-align: left;
				background-color: #151515;
			}

				.container-code-body code{
					font-family: SourceCodePro;
					font-size: 1.4rem;
					letter-spacing: 0.1rem;
				}

@media screen and (max-width: 1128px){
	.section-code{
		display: block;
		margin: 10rem 0;
	}

		.section-code > div:first-child{
			margin: 6rem 0;
		}

		.container-code-body{
			overflow: hidden;
		}
}

@media screen and (max-width: 1000px){
	.main-section{
		display: block;
	}

	.container-cosmic{
		margin: 10rem 0;
	}
}

@media screen and (max-width: 700px){
	.fig-aura > div{
		padding: 8rem;
		margin: auto;
	}

		.planet-aura{
			width: 6rem;
			height: 6rem;
		}
}

@media screen and (max-width: 600px){
	.page{
		padding: 3rem;
	}

	.planet{
		padding: 11rem;
	}

		.moons > span:last-child{
			top: 16rem;
			left: 16rem;
		}
}

@media screen and (max-width: 650px){
	.title{
		font-size: 2.6rem;
	}

		.card-main h3{
			font-size: 1.6rem;
		}
}