@font-face {
  font-display: swap;
  font-family: 'Noto Sans Mono';
  font-style: normal;
  font-weight: 700;
  src: url('/font/noto_sans_mono_700.woff2') format('woff2');
}

:root {
        --fontMono: 'Noto Sans Mono', monospace;
	--cursor: none;
}

* {
        transition: color 0.5s linear;
        transition: background-color 0.5s linear;
}

body {
	background-color: var(--bg1);
	color: var(--hl2);
	text-shadow: 
		0 0 7px rgba(from var(--hl2) r g b / 0.7),
		0 0 14px rgba(from var(--hl2) r g b / 0.3);
	font-family: var(--fontMono), monospace;
        font-size: 20px;
	margin: 0;

	/* Scanlines */
	&::before {
		content: " ";
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
		z-index: 2;
		background-size: 100% 2px, 3px 100%;
		pointer-events: none;
	}
}

#console {
	margin: 0px auto;
	padding-bottom: 3rem;
	padding-top: 3rem;
	width: 81ch;
	white-space: pre-wrap;
	p {
		margin: 0;
		line-height: 1.5;
		min-height: 1.5em;

		&:last-child::after {
			content: '█';
			margin-left: 2px;
			display: var(--cursor);
		}
	}

	.highlight {
		color: var(--hl1);
		text-shadow: 
			0 0 7px rgba(from var(--hl1) r g b / 0.7),
			0 0 14px rgba(from var(--hl1) r g b / 0.3);
	}

	.button {
		cursor: pointer;
		color: var(--bg1);
		text-shadow: none;
		background-color: var(--hl1);
		background-size: cover;
		border-radius: 0.2rem;
		transition: none;
		transition: none;
		&:hover {
			background-color: var(--hl2);
		}
	}
}

[data-tooltip] {
	position: relative;
	display: inline-block;

	&::after {
		position: absolute;
		bottom: 110%;
		left: 50%;
		transform: translateX(-50%);
		width: max-content;
		max-width: 30rem;
		box-sizing: border-box;
		content: attr(data-tooltip);
		border: 2px solid var(--hl1);
		color: var(--hl1);
		background-color: var(--bg2);
		padding: 0.5rem;
		opacity: 0;
		pointer-events: none;
		text-shadow: none;
	}
	&:hover::after {
		opacity: 1;
	}
}

/* Make it look good on phones */
[data-interaction="touch"] .button[data-tooltip]::after {
	content: none !important;
	display: none !important;
}

@media only screen and (max-width: 1023px) {
	body {
		font-size: 16px;
	}
}
@media only screen and (max-width: 800px) {
	body {
		font-size: 12px;
	}
}

@media only screen and (max-width: 550px) {
	body {
		font-size: 8px;
	}
}
@media only screen and (max-width: 550px) {
	body {
		font-size: 6px;
	}
}