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

/* ---------- 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);
}

img{
	height: calc(var(--font-size) * 2 / 2.5);
	width: calc(var(--font-size) * 2 / 2.5);
}

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

.error{
	color: darkred;
}

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

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

input.large{
	width: calc(var(--font-size) * 30);
}

input.extra_large{
	width: calc(var(--font-size) * 40);
}

input.bet{
	margin-bottom: 0;
}

span.bet{
	zoom: 1.2;
}

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);
}

form > p.input_disabled{
	font-size: calc(var(--font-size) * 1.2);
	font-weight: bold;
}

form.actions{
	margin: 0;
}

/* ---------- By class ---------- */
table.list{
	display: inline-block;
	text-align: center;
	
	border-spacing: 0 5px;
}

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

table.list > tbody > tr > td{
	padding: calc(var(--font-size) * 0.5) calc(var(--font-size) * 1);
	border-bottom: 1px solid var(--color-tertiary);
}

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;
}

table.summary{
	display: inline-block;
	text-align: center;
	vertical-align: middle;

	border-spacing: 5px 0;
}

table.summary > tbody > tr > td{
	border-style: solid;
	border-color: var(--color-text);

	padding: 5px;
	
	min-width: 300px;
	max-width: 400px;
}

table.summary > tbody > tr:nth-child(1) > td{
	border-width:   2px  2px 0px 2px;
	border-radius: 10px 10px 0px 0px;
	
	font-size: calc(var(--font-size) * 1.5);
}

table.summary > tbody > tr:nth-child(2) > td{
	border-width:  0px 2px  2px  2px;
	border-radius: 0px 0px 10px 10px;

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

tr.mine, tr.mine > td > a{
	font-weight: bold;
}

tr.mine_incorrect, tr.mine_incorrect > td > a{
	color: var(--color-outcome-incorrect);
}

tr.correct, tr.correct > td > a{
	color: var(--color-outcome-correct);
}

a.external{
	color: var(--color-external-link);
}

a.external:active{
	color: var(--color-external-link-active);
}

a.external:visited{
	color: var(--color-external-link-visited);
}

a.external:visited:active{
	color: var(--color-external-link-visited-active);
}

a.external:hover{
	text-decoration: underline;
}

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.administrator, span.moderator, span.verifier{
	font-weight: bold;
}

span.administrator{
	color: var(--color-administrator);
}

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

span.verifier{
	color: var(--color-verifier);
}

td.unanswered{
	font-style: italic;
	color: var(--color-secondary);
}

td.previous{
	text-align: left;
}

td.next{
	text-align: right;
}

/* ---------- Header, Main, Footer ---------- */
header{
	position: sticky;
	top: 0;
	height: calc(var(--font-size) * 2.5);
	z-index: 1;

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

header > *{
	zoom: 2.5;
}

header > div{
	width: calc((100% - var(--font-size) / 2) / 2);
	float: left;
}

header > div:nth-child(1){
	text-align: left;
	margin-left: calc(var(--font-size) * 0.2);
}

header > div:nth-child(1) > a:nth-child(1){
	float: left;
	margin-right: calc(var(--font-size) * 0.5);
}

header > div:nth-child(1) > a:nth-child(1) > img{
	float: left;
}

header > div:nth-child(1) > a:nth-child(1) > div{
	display: inline-block;
	margin-left: calc(var(--font-size) * 0.2);
	text-align: center;
}

header > div:nth-child(2){
	text-align: right;
	margin-right: calc(var(--font-size) * 0.2);
}

header > div:nth-child(2) a:has(> div){
	margin-right: calc(var(--font-size) * 0.5);
}

header > div:nth-child(2) div:has(> p){
	display: inline-block;
	margin-left: calc(var(--font-size) * 0.2);
	text-align: center;
}

header p:nth-child(1){
	font-size: calc(var(--font-size) * 0.475);
	margin: 0;
}

header p:nth-child(2){
	font-size: calc(var(--font-size) * 0.325);
	margin: 0;
}

header p.red{
	color: red;
}

main{
	margin-bottom: calc(var(--font-size) * 3);
}

footer{
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 1;

	background: var(--color-background-header);
	border-top: 1px solid var(--color-text);
	box-shadow: 0 0 var(--font-size) calc(var(--font-size) * 0.2) var(--color-tertiary);

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

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