:root {
	--secondary-color: #ffd600;
	--tertiary-color: #1e1e1e;

	background: repeating-linear-gradient(
		-45deg,
		#212121,
		#212121 2%,
		var(--tertiary-color) 2%,
		var(--tertiary-color) 4%
	);
	height: 100%;
}

a {
	color: var(--secondary-color);
}
a:hover {
	text-decoration-line: none;
}
a:active {
	background-color: var(--secondary-color);
	color: var(--tertiary-color);
	text-decoration-line: none;
}
body {
	color: white;
	font-family: "JetBrains Mono", monospace;
	line-height: 2;
	margin: 1% auto;
}
button {
	background-color: var(--secondary-color);
	background-image: none;
	border: none;
	color: var(--tertiary-color);
	font-family: inherit;
	outline: none;
}
button:active {
	background-color: var(--tertiary-color);
	color: var(--secondary-color);
}
canvas {
	display: block;
	margin: auto;
}
h1 {
	color: var(--secondary-color);
	text-align: center;
}
input {
	background-color: var(--secondary-color);
	border: none;
	color: var(--tertiary-color);
	font-family: inherit;
	outline: none;
}
select {
	background-color: var(--secondary-color);
	background-image: none;
	border: none;
	color: var(--tertiary-color);
	font-family: inherit;
	font-size: 100%;
	margin: 0.5rem;
}
td, th {
	padding: 0.5rem;
}
textarea {
	background-color: var(--secondary-color);
	border: none;
	color: var(--tertiary-color);
	font-family: inherit;
	font-size: inherit;
	outline: none;
}

.outlined {
	outline: 0.15rem solid var(--secondary-color);
}
.outlined p {
	margin-top: 0;
}

@media (orientation: landscape) {
	body {
		font-size: 1.2em;
		width: 60%;
	}
	button {
		font-size: 1.2em;
	}
	input {
		font-size: 1.2em;
	}
	.checkbox {
		height: 1rem;
		width: 1rem;
	}
	.outlined {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}
@media (orientation: portrait) {
	body {
		font-size: 2.4em;
		width: 90%;
	}
	button {
		font-size: 1.2em;
	}
	input {
		font-size: 1.2em;
	}
	.checkbox {
		height: 2rem;
		width: 2rem;
	}
	.outlined {
		padding: 1rem;
	}
	.outlined p {
		margin-bottom: 0;
	}
}