:root{
	--header-color: #0d3b66;
	--background-color: #155ea2;
	--nav-color: #faf0ca;
	--header-text-color: #e5b710;
	--secondary-color: #f4d35e;
	--secondary-color-hover: #f6db79;
	--third-color: #ee964b;
	--third-color-hover: #f1a96a;
	--fourth-color: #f95738;
	--text-color: #0d3b66;
	--tetris-height: 540px;
}

html{
	height: 100vh;
	margin: 0;
}

body {
	width: 100vw;
	margin: 0;
	background: var(--background-color);
	min-height: 100vh;
}

header{
	margin-top: -22px;
	padding-top: 25px;
	background-color: var(--header-color);
	color: var(--header-text-color);
	width: 100%;
	text-align:center;
	border-bottom: solid 1px;
}

nav{
	height: fit-content;
	background: var(--nav-color);
	text-align: center;
	border-bottom: solid 1px;
	width: 100%;
}

footer a, nav a{
	padding-top: 2px;
	padding-bottom: 2px;
	text-decoration: none;
	color: var(--text-color)
}

footer a:hover, nav a:hover {
	color: var(--fourth-color);
}

footer a:hover::after, nav a:hover::after{
	color: var(--text-color)
}

footer a::after, nav a::after{
	content: " | ";
}

footer a:last-of-type::after, nav a:last-of-type::after{
	display: none
}

main{
	min-height: calc(100vh - 53px - 28px - 129px);
	width: 100%;
}

.task_container{
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}

.tasks{
	display: grid;
	justify-content: center;
	align-content: center;
	padding-left: 5px;
	padding-right: 5px;
	width: calc(100% - 12px);
	grid-template: 
				"a a a" 1fr
				"a a a" 1fr 
				"a a a" 1fr / 1fr 1fr 1fr;
	height: 250px;
}

.tasks a{
	display: grid;
	justify-content: center;
	justify-self: center;
	text-align:center;
	align-content: center;
	border: solid 1px;
	border-radius: 5px;
	width: 90%;
	height: 60px;
	background-color: var(--secondary-color);
	color: var(--text-color);
	text-decoration: none;
}

footer{
	text-align: center;
	background: var(--third-color);
	width: 100%;
	display: grid;
	align-content: center;
	justify-content: center;
	grid-template: "a a" 1rem / 3em 2em;
	height: 50px;
	opacity: .9;
	margin-top: 10px;
}

#table {
	margin-top: 10px;
	margin-bottom: 10px;
	display: grid;
	width: 100%;
	justify-content: center;
}

#table p {
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	border: solid 1px;
	margin: 0;
}

.up::after{
	content: "\2B19";
}

.down::after{
	content: "\2B18";
}

.table_header:hover {
	cursor: pointer;
}

#row, #header {
	display: grid;
	width: 100%;
	grid-template: "p p p p p p p" 1.5rem / 2rem 12rem 3.5rem 3.5rem 3.5rem 3.5rem 3.5rem;
}

#header {
	background-color: var(--third-color);
}

#header p:hover {
	background-color: var(--third-color-hover);
}

#row {
	background-color: var(--secondary-color);
}

#search_container {
	margin-top: 10px;
	width: 100%;
	display: flex;
	justify-content: center;
}

#search_option {
	background-color: var(--third-color);
	border-radius: 4px 0 0 4px;
}

#search_option option {
	background-color: var(--secondary-color);
}

#search_bar {
	border-radius: 0 4px 4px 0;
	border: none;
}

.disabled {
	pointer-events: none;
	opacity: 0.75;
}

.enabled:active {
	box-shadow: 1px 1px 5px inset black;
}

#game_space{
	margin-top: 10px;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
}

#board{
	background: white;
	border-radius: 5px;
}

#pause_screen, #lose_screen{
	position: absolute;
	width: 100vw;
	top: 60vh;
	left: 0;
	text-align: center;
}

#pause_screen {
	opacity: .5;
}

#lose_screen a{
	color: black;
	
}

.hide{
	display: none;
}