/* ---------- Variables ---------- */
:root{
	--font-name: FiraSans;
	--font-size: 20px;

	--color-text: black;
	--color-background: white;
	--color-background-header: var(--color-background);

	--color-moderator: green;
}

/* ---------- General ---------- */
@font-face {
	font-family: FiraSans;
	src: url("FiraSans.ttf");
}

body{
	font: var(--font-size) var(--font-name);
	color: var(--color-text);
	background: var(--color-background);

	margin: 0;
	text-align: center;
}

h1{
	margin-top: calc(var(--font-size) * 1.5);
	margin-bottom: calc(var(--font-size) * 1.5);

	font-size: calc(var(--font-size) * 2);
}

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

abbr{
	text-decoration: none;
	cursor: help;
}

hr{
	display: inline-block;

	margin: calc(var(--font-size) * 2);
	border: 2px solid var(--color-text);
	width: calc(var(--font-size) * 50);
}

hr.mini{
	margin: calc(var(--font-size) * 1.5);
	border: 1px solid var(--color-text);
	width: calc(var(--font-size) * 20);
}

table{
	font-size: var(--font-size);
}

/* ---------- Forms ---------- */
input, select, label, button{
	font: calc(var(--font-size) * 1.2) var(--font-name);
	background-color: var(--color-background);
	border-radius: calc(var(--font-size) * 0.5);
}

input{
	margin-bottom: var(--font-size);
}

label{
	display: block;
}

button{
	transition-duration: 400ms;
}

button:hover{
	color: var(--color-background);
	background-color: var(--color-text);
	cursor: pointer;
}

form > p{
	margin: 0;
	font-size: calc(var(--font-size) * 0.8);
}

/* ---------- By class ---------- */
table.predictions_list, table.choices_list, table.users_list, table.notifications_list{
	display: inline-block;
	text-align: center;
}

table.predictions_list > thead > tr > th, table.choices_list > thead > tr > th, table.users_list > thead > tr > th, table.notifications_list > thead > tr > th{
	padding: calc(var(--font-size) * 0.5) calc(var(--font-size) * 1);
	border-bottom: 1px solid var(--color-text);
}

table.predictions_list > tbody > tr > td, table.choices_list > tbody > tr > td, table.users_list > tbody > tr > td, table.notifications_list > tbody > tr > td{
	padding: calc(var(--font-size) * 0.5) calc(var(--font-size) * 1);
	border-bottom: 1px solid lightgray;
}

table.choices_list > tbody > tr > td:nth-child(1), table.choices_list > tbody > tr > td:nth-child(2), table.choices_list > tbody > tr > td:nth-child(4){
	font-size: calc(var(--font-size) * 1.5);
}

table.hidden{
	display: inline-block;
	vertical-align: middle;
}

table.hidden > tbody > tr > td{
	width: calc(var(--font-size) * 15);
}

table.hidden > tbody > tr > td:nth-child(1){
	padding: calc(var(--font-size) * 0.3) calc(var(--font-size) * 0.5);
	text-align: right;
}

table.hidden > tbody > tr > td:nth-child(2){
	padding: calc(var(--font-size) * 0.3) calc(var(--font-size) * 0.5);
	text-align: left;
}

img.delete_choice, img.add_choice{
	width: calc(var(--font-size) * 1.5);
	height: calc(var(--font-size) * 1.5);
	vertical-align: sub;
}

img.delete_choice:hover, img.add_choice:hover{
	cursor: pointer;
}

span.moderator{
	font-weight: bold;
	color: var(--color-moderator);
}

/* ---------- By ID ---------- */
#header{
	position: sticky;
	top: 0;
	height: calc(var(--font-size) * 2.5);

	background: var(--color-background-header);
	border-bottom: 1px solid var(--color-text);
	box-shadow: 0 0 var(--font-size) lightgray;
}

#header > *{
	zoom: 2.5;
}

#footer{
	border-top: 1px solid var(--color-text);
	margin-top: var(--font-size);
	box-shadow: 0 0 var(--font-size) calc(var(--font-size) * 0.2) lightgray;
	background: var(--color-background-header);

	font-size: calc(var(--font-size) * 0.8);

	bottom: 0;
	width: 100%;
	position: fixed;
}

#footer > p{
	width: calc(100% / 4);
	float: left;
	margin: 0;
}