style.css

/* basic */
:root {
	--c-background: #0D1117;
	--c-background-accent: #21262D;
	--c-border: #30363d;
	--c-text: #C9D1D9;
	--c-text-gray: #484f57;
	--c-hack: #adff2f;
	--c-font-stack: 'Fira Mono', Consolas, 'Courier New', Courier, monospace, 'Times New Roman';
}

/* layout */
body {
	background: var(--c-background);
	color: var(--c-text);
	max-width: 560px;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	padding: 0 1rem;
	gap: 1rem;
	font-family: var(--c-font-stack);
	font-size: 16px;
}
header, footer {
	margin-top: 3rem;
	text-align: center;
}
main {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

/* page elements */
select, textarea, button {
	font-family: var(--c-font-stack);
	font-size: 16px;
	background: var(--c-background-accent);
	color: var(--c-text);
	padding: 1rem;
	border: 1px solid var(--c-border);
	transition: all .1s ease-in-out;
}
select:hover, textarea:hover, button:hover {
	border-color: var(--c-hack);
}
select:focus, textarea:focus, button:focus {
	box-shadow: 0 0 0 .25rem rgba(173, 255, 47,.3);
}
button {
	cursor: pointer;
}
button:hover {
	background: var(--c-hack);
	color: black;
}
a {
	color: var(--c-hack);
	transition: color .1s ease-in-out;
}
a:hover {
	color: white;
}
.content {
	word-break: break-all;
	padding: 1rem;
	border: 1px solid var(--c-border);
	color: var(--c-hack);
	cursor: pointer;
}

/* utilities */
.text-gray,
.text-gray a {
	color: var(--c-text-gray) !important;
}