@font-face {
	font-family: "Domine";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/static/fonts/Domine-Regular.ttf") format('truetype');
	/* unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; */
}

body {
	background-image: url("/static/img/paper.png");
	display: flex;
	font-family: "Domine";
	font-size: calc(0.7em + 0.4vh + 0.4vw);
	height: 100%;
	margin: 0;
	overflow-x: hidden;
}

input, select {
	font-size: calc(0.7em + 0.4vh + 0.4vw);
}

.center {
	align-items: center;
	box-sizing: border-box;
	/* display: flex; */
	/* flex-direction: column; */
	flex-grow: 1;
	justify-content: center;
	margin: auto;
	overflow-x: hidden;
	overflow-y: auto;
	text-align: center;
}

.button {
	border: 1px solid black;
	cursor: pointer;
	font-size: 1.6em;
	padding: 0.5em;
	padding-bottom: 0.2em;
	padding-top: 0.2em;
}

/* Headline display */

#headlineContainer a {
	color: black;
	text-decoration: none;
}

.headline {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-around;
}

.pre {
	animation: pre-fast 0.5s cubic-bezier(.12,.65,.15,0.9), pre-slow 1s ease-out 0.5s;
	padding-left: 5vw;
	font-size: calc(2vh + 1vw);
	font-style: italic;
}

@keyframes pre-fast { 
	0% { opacity: 0; transform: translate(-50vw); }
	100% { opacity: 0.5; transform: translate(-3vw); }
}

@keyframes pre-slow {
	0% { opacity: 0.5; transform: translate(-3vw); }
}

.main {
	animation: main-fast 1s cubic-bezier(.12,.65,.15,0.9) 0s, main-slow 1s ease-out 1s;
	/* padding-bottom: 1em; */
	padding-right: 5vw;
	/* padding-top: 1em; */
	font-size: calc(2.5vh + 1.5vw);
}

@keyframes main-fast { 
	0% { opacity: 0; transform: translate(50vw); }
	50% { opacity: 0; transform: translate(50vw); }
	100% { opacity: 0.5; transform: translate(3vw); }
}

@keyframes main-slow {
	0% { opacity: 0.5; transform: translate(3vw); }
}

.source {
	animation: source 0.5s ease-out;
	padding-left: 5vw;
	font-size: calc(2vh + 1vw);
}

@keyframes source {
	0% { transform: translate(1vw); opacity: 0; }
}

.overlay {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	grid-template-areas: "gridArea";
}

.overlay > * {
	grid-area: gridArea;
}

#options {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.option {
	align-items: stretch;
	background-color: white;
	box-shadow: 0 0 calc(.5vw + .5vh + .5em) #bbbbbb;
	cursor: pointer;
	display: flex;
	font-size: calc(.6vw + .3vh + .3em);
	margin: calc(.2vw + .2vh + .2em);
}

.optionMiddle {
	flex-grow: 1;
	min-width: calc(8vw + 4vh + 4em);
}

.correctMarker {
	background-color: #11aa11;
	width: 0%;
}

@keyframes correctMarker {
	0% { color: black; width: 0%; }
	100% { color: white; width: 100%; }
}

.sourceNameDiv {
	align-items: center;
	display: flex;
	grid-area: gridArea;
	justify-content: center;
}

.sourceName {
	text-align: center;
}

.optionSide {
	background-color: white;
	font-size: calc(1.2vw + 1.8vh + 1.2em);
}

.guess, .guessNumber {
	color: #11aa11;
}

.antiGuess, .antiGuessNumber {
	color: #aa1111;
}