* 
{
	margin: 0 auto;
	padding: 0;
	font-family: consolas, monospace;
	box-sizing: border-box;
	user-select: none;
}
:root
{
	--w: 500px;
	--h: calc(var(--w) * 1.5);
	--font: calc(var(--w) / 1.25);
	--mainbg: darkgreen;
	--maincolor: firebrick;
	--hover: .95;
}
main
{
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 20px auto;
	width: 95%;
	justify-content: center;
	align-items: center;
}
body 
{
	background-color: var(--mainbg);
}
section
{
	text-align: center;
}
span.start-image 
{
	display: flex;
	align-items: center;	
	justify-content: center;
}
img.start-help:hover
{
	opacity: .75;
}

img.start-help 
{
	position: absolute;
	width: 80%;
	opacity: .5;
	transition: opacity 300ms;
}
a.video-thumb-link > img 
{
	max-width: 100%;
	display: block;
	border-radius: 5px;
}
a.video-thumb-link:hover 
{
	transform: scale(.95);
}
a.video-thumb-link
{
	display: block;
	max-width: 39rem;
	margin-top: 20px;
	transition: transform 300ms;
}
div.container
{
	width: var(--w);
	padding: 0;
	margin: 0 auto;
	position: relative;
	height: calc(var(--h) * 1);
}
div.card, div.number
{
	height: var(--h);
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	margin: 0 auto;
}

h1 
{
	font-family: verdana;
	font-size: 55px;
	color: white;
	text-align: center;
	text-shadow: 1px 1px 10px red;
	margin: 10px auto;
}
h1 > label > span {padding-right: 5px;}
h1 > label
{
	transition: color 300ms;
}
h1 > label:hover
{
	color: #aaa;
}
/* input[name="save-and-close"] */
/* { */
	/* font-size: 3px; */
/* } */
label
{
	cursor: pointer;
	transition: transform 200ms;
}
img, h2
{
	display: block;
	margin: 0 auto;
}
img#card, h2 {width: 100%;}
img#card, h2 {animation: show-message linear 100ms;}
h2.practice-title, h3
{
	font-size: var(--font);
	z-index: 1;
	text-align: center;
	background-color: blue;
	border-radius: 5px;
	background-color: rgba(0,200,0,.79);
	text-shadow: 5px 5px 10px red;
	font-weight: bold;
}
img.close:hover {transform: scale(var(--hover));}
img.close {transition: transform 200ms;}
h3 
{
	font-size: 35px;
	width: max-content;
	padding: 25px;
	margin: 0 auto;
	text-shadow: 1px 1px 0 red;
}
h2.stack-options
{
	font-size: 35px;
	padding: 35px 10px;
	background-color: black;
	color: white;
	margin-bottom: 20px;
	width: 100%;
}
section#settings > div > label {flex: 1;}
section#settings > div img 
{
	width: 4rem;
	aspect-ratio: 1;
}
section#settings > div 
{
	display: flex; 
	gap: 20px; 
	justify-content: center;
	margin: 25px;
	flex-wrap: wrap;
}
section#settings 
{
	display: flex;
	flex-direction: column;
}
section#settings
{
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--mainbg);
	z-index: 10;
	min-height: 100vh;
	max-width: 100%;
	box-shadow: 0 0 10px black;
	left: -100%;
	transition: all 300ms;
}

body#credits small 
{
	color: white;
}
body#credits h1 + a.nav 
{
	font-size: 2rem;
}
body#credits > main h2
{
	width: 100%;
	background-color: black;
	padding: 20px;
	border-radius: 5px 5px 0 0;
	text-align: left;
	font-size: 2rem;
	/* padding-left: 20px; */
}
body#credits > main > section
{
	background-color: white;
	width: 100%;
	border-radius: 5px;
	padding-bottom: 10px;
	text-align: left;
}
body#credits > main ul > li a:hover {text-decoration: none;}
body#credits > main ul > li 
{
	margin: 20px 0;
	font-family: verdana;
	box-shadow: 0 0 2px black;
	padding: 20px;
	list-style-type: none;
}
body#credits > main ul 
{
	width: max-content;
	padding: 20px;
	font-size: 2rem;
	width: 100%;
	border: 1px solid blue;
}

label.menu-icon.nav-bar-icon > img {height: 4rem;}
label.menu-icon.nav-bar-icon
{
	position: absolute;
	right: 5px;
	top: 1.3rem;
}
label.credits-link:hover, 
.nav:hover,
.watch-video-link:hover
{
	border-color: white;
}
label.nav {font-size: 2rem;}
label.credits-link, 
.nav, 
.watch-video-link
{
	text-decoration: none;
	color: white;
	font-size: 4rem;
	display: block;
	font-weight: bold;
	width: max-content;
	border-bottom: 3px solid transparent;
	transition: border 300ms;
	padding-bottom: 5px;
	margin-bottom: 15px;
	margin-top: 15px;
}
input#credits:checked + aside.credits {display: block;}
aside.credits > label > img.close 
{
	width: 75px;
	margin-top: 50px;
}
aside {background-color: blue;}
input[type=checkbox] {display: none; position: absolute;} 
aside input:checked + section#settings
{
	left: 0;
}
.card.show,
.number.show
{
	display: flex;
}

.card.hide, 
.hide,
.number.hide
{
	display: none;
}

.preload
{
	position: absolute;
	top: 0;
	width: 100px;
	height: auto;
	display: none;
}

button:hover 
{
	transform: scale(var(--hover));
	border-color: black;
}
button, select, input[type=submit]
{
	display: block;
	padding: 20px;
	font-size: 2rem;
	max-width: 100%;
	min-width: auto;
	cursor: pointer;
	border-radius: 5px;
	border: 3px solid transparent;
	outline: none;
	transition: transform 300ms, border-color 300ms;
	background-color: var(--maincolor);
	color: white;
	text-shadow: 1px 1px 1px black;
}
input[type=submit][name="save-and-close"]
{
	font-size: 200%;
}
button#next-test,
button#show-answer
{
	margin-bottom: 20px;
}
input[type=submit]:hover {text-shadow: 2px 2px 0 black; transform: scale(var(--hover));}
input[type=submit]{text-shadow: 2px 2px 0 black;}
form 
{
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 5px 20px;
}
select
{
	background-color: white;
	color: black;
	border-color: black;
}
.error, .practice-display
{
	background-color: var(--maincolor);
	padding: 10px;
	color: white;
	text-shadow: 1px 1px 1px black;
	font-size: 30px;
	border-radius: 5px;
	font-weight: bold;
	width: 100%;
	animation: show-message linear 200ms;
	cursor: pointer;
}
section.video-instructions {width: 95%; margin: 0 auto;}
section.video-instructions > iframe
{
	width: 100%;
	aspect-ratio: 16/9;
	margin: 20px auto;
}
.error {text-align: center; margin-bottom: 10px; width: max-content;}
section.display-type, section.form-group * {max-width: 100%; flex:1;}
section.form-group
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 5px;
	max-width: 100%;
	width: 100%;
}
.practice-display 
{
	background-color: transparent;
	color: black;
	text-shadow: 5px 5px 10px red;
}

@media (max-width: 1550px)
{
	aside.credits 
	{
		--width: 75%;
	}
@media (max-width: 1000px)
{
	body {margin: 0 auto; width: 100%; margin: 0;}
	* {max-width: 100%;}
	h1 {margin: 5px auto; font-size: 55px; border-radius: 0; padding: 20px 0;}
	section:not(#settings):not(.video-instructions), div, body {padding: 0 !important; margin: 0; max-width: 100%;}
	select, input[type=submit] {width: 100%; display: block;} 
	section.form-group {flex-direction: column; justify-content: center; align-items: center;}
	button, select, input[type=submit] {font-size: 4rem; margin-bottom: 25px;}
	section#settings > div img 
	{
		width: 75px;
	}
	:root { --w: 700px;}
	aside.credits 
	{
		--width: 98%;
	}
}
@keyframes show-message
{
	0% {opacity: 0; transform: scale(1);}
	50% {transform: scale(1.05);}
	100 {opacity: 1; transform: scale(1)}
}