/*Font import*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

:root {
	--backgroundColor: rgb(35,35,35);
	--border: solid 0.25rem rgb(255,255,255);
	--borderRadius: 0.5rem;
	--font: Oswald, Arial;
	--textColor: rgb(255,255,255);
	--boxShadow: inset 0 0 0.75rem black;
	--transition: 0.25s;
	font-size: 125%;
}

a {
	color: var(--textColor);
	text-decoration: none;
	transition: var(--transition);
}

a:hover {
	background-color: black;
	padding:  0 0.25em 0 0.25em;
	border-radius: var(--borderRadius);
}

article {
	background-color: var(--backgroundColor);
	border: var(--border);
	border-radius: var(--borderRadius);
	min-height: 5em;
	padding: 0.5em;
	box-shadow: var(--boxShadow);
	margin-bottom: 0.5em;
}

body {
	color: var(--textColor);
	font-family: var(--font);
	font-weight: 300;
	background: rgb(20,20,20) url("images/background.webp");
	background-size: 10%;
	background-attachment: fixed;
	overflow-y: scroll;
}

button, input, select {
	background-color: var(--backgroundColor);
	border: var(--border);
	border-radius: var(--borderRadius);
	box-shadow: var(--boxShadow);
	color: var(--textColor);
	font-family: var(--font);
	font-size: inherit;
	font-weight: 300;
	max-height: 2em;
	padding: 0;
	padding-left: 0.25em;
	transition: var(--transition);
}

.container {
	display: grid;
	column-gap: 0.25em;
	row-gap: 0.5em;
	min-height: 2em;
	margin-bottom: 0.5em;
}

header {
	background-color: var(--backgroundColor);
	border: var(--border);
	border-radius: var(--borderRadius);
	font-size: 1.25rem;
	margin-bottom: 0.5em;
	box-shadow: var(--boxShadow);
	text-align: center;
	font-weight: 500;
}

hr {
	border-color: rgb(125,125,125);
}

input[type="checkbox"] {
	height: 1rem;
	width: 1rem;
	box-shadow: none;
	accent-color: rgb(0, 125, 255)
}

input::placeholder {
	font-family: var(--font);
	color: rgb(125,125,125);
	font-weight: 300;
}

main {
	max-width: 1000px;
	margin: auto;
}

nav {
	position: fixed;
	top: 2.5%;
	left: 1.25%;
	z-index: 2;
}

nav > ul {
	background-color: var(--backgroundColor);
	border: var(--border);
	border-radius: var(--borderRadius);
	box-shadow: var(--boxShadow);
	font-size: 1.25rem;
	visibility: hidden;
	opacity: 0;
	translate: -100%;
	padding: 0.5em 0.75em 0.75em 0.75em;
	list-style-type: none;
	transition: 0.35s allow-discrete;
}

nav.visible > ul {
	visibility: visible;
	translate: unset;
	opacity: 1;
}

option {
	font-weight: 300;
}

p#output {
	background-color: var(--backgroundColor);
	border: var(--border);
	border-radius: var(--borderRadius);
	margin: 0;
	opacity: 0;
	text-align: center;
	transition: var(--transition);
	box-shadow: var(--boxShadow);
}

ul {
	margin: 0;
}