@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Share+Tech+Mono&family=Space+Grotesk:wght@500;700&display=swap");

:root {
	--font-indicator: "Share Tech Mono", monospace;
	--font-heading: "Space Grotesk", sans-serif;
	--font-body: "Inter", sans-serif;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background-color: #121212;
	color: #e0e0e0;

	display: flex;
	flex-direction: column;

	width: 100vw;
	height: 100vh;

	overflow: hidden;

	font-family: "Georgia", serif;
	line-height: 1.6;
}

main {
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);

	border-radius: 1rem;

	height: 91vh;

	margin: 1.5rem 1.5rem 0.5rem 1.5rem;

	position: relative;

	overflow: hidden;

	z-index: 1;
}

.star-bg {
	position: absolute;
	top: -50%;
	left: -50%;

	width: 1000%;
	height: 1000%;

	z-index: -1;

	pointer-events: none;

	background: radial-gradient(
		circle at center,
		rgba(255, 255, 255, 0.03) 0%,
		rgba(0, 0, 0, 0.3) 100%
	);

	animation: spin 10000s linear infinite alternate;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.stars-sm,
.stars-md,
.stars-lg {
	background: transparent;

	position: absolute;
	top: 0;
	left: 0;

	border-radius: 50%;

	animation: twinkle var(--duration, 4s) ease-in-out infinite alternate;
	animation-delay: var(--delay, 0s);
}

@keyframes twinkle {
	0% {
		opacity: 0.4;
	}
	100% {
		opacity: 1;
	}
}

.stars-sm {
	width: 1px;
	height: 1px;
}

.stars-md {
	width: 2px;
	height: 2px;
}

.stars-lg {
	width: 3px;
	height: 3px;

	filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4));
}

footer {
	--c-txt: rgba(255, 255, 255, 0.1);

	color: var(--c-txt);

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 5vh;

	font-family: "Consolas", "Monaco", monospace;
	font-size: 0.75rem;
	letter-spacing: 1px;

	cursor: default;

	position: relative;
}

.tos {
	position: absolute;
	right: 1.5rem;
}

.tos a {
	text-decoration: none;

	color: var(--c-txt);
}

.tos a:hover {
	text-decoration: underline;
}