@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,slnt,wdth,wght,GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC@8..144,-10..0,25..151,100..1000,-200..150,27..175,323..603,25..135,649..854,-305..-98,560..788,416..570,528..760&display=swap');

@font-face {
	font-family: Glitch Goblin;
	src: url('./fonts/glitch-goblin.regular.ttf') format('truetype');
}

@font-face {
	font-family: Parametric Glitch;
	src: url('./fonts/parametric-glitch.regular.ttf') format('truetype');
}

@font-face {
	font-family: Haze Morning;
	src: url('./fonts/haze-morning.regular.ttf') format('truetype');
}

* {
	box-sizing: border-box;
/*	outline: 1px solid lime;*/
}

body {
	font-family: Roboto Flex, sans-serif;
}

video {
	width: 100%;
}

.legenda {
	position: fixed;
	top: 0;
	right: 0;
	padding: .825em 1em 1em 1em;
	margin: .5em;
	margin-top: 2.5em;
	border: 2px solid dodgerblue;
	display: none;
	background-color: black;
	z-index: 9999;
	border-radius: .825em;
}

body:has(:checked) .legenda {
	display: block;
}

label {
	color: black;
	position: fixed;
	top: 0;
	right: 0;
	padding: .2em;
	margin: .5em;
}

h2 {
	font-family: Roboto Flex;
	color: dodgerblue;
	margin: 0;
}

ul {
	font-size: 1.4em;
	font-family: Roboto Flex, sans-serif;
	color: white;
	margin: 0;
}

li {
	margin: .3em 0;
	transform-origin: left;
}

.video-container {
	position: relative;
	width: min-content;
	width: 80vw;
	background-color: #000;
	display: grid;
	place-items: center;
	color: #fff;
	border-radius: .875em;
	overflow: hidden;
}

.video-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1em .5em .5em .5em;
	z-index: 999;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	grid-gap: 1em;
}

.playing .video-controls {
	opacity: 0;
	transition: opacity 1s 2s;
}

.video-controls:hover {
	opacity: 1;
	transition: opacity 0s 0s;
}

.video-controls button {
	font-size: 1.2em;
	background-color: transparent;
	border: none;
	color: white;
	cursor: pointer;
	padding: .5em;
}

.video-controls #timeline {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
}

.video-controls #video-time {
	margin-right: auto;
}

.subtitles {
	color: white;
	position: absolute;
	font-family: Roboto Flex;
	height: 100%;
	width: 100%;
	text-align: center;
	font-size: 1.8em;
	z-index: 3;
/*	transform: translateY(-2em);*/
}

.subtitles > div {
	position: absolute;
	bottom: 2em;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-fill-mode: both;
	animation-timing-function: ease;
}

/*.playing .subtitles {
	transform: translateY(0);
	transition: .3s 3s;
}

.video-container:has(.video-controls:hover) .subtitles{
	transform: translateY(-2em);
	transition: .3s;
}*/

i {
	user-select: none;
	pointer-events: none;
}

.Marius {
	color: hsl(30deg, 80%, 60%);
}

.Jytte {
	color: hsl(120deg, 80%, 40%);
}

.radio {
	font-family: Parametric Glitch;
}

.call {
	font-weight: 800;
	font-size: 1.2em;
}

.whisper {
	opacity: .7;
	font-weight: 200;
	font-size: 0.8em;
}

.question {
	font-variation-settings: 
		'slnt' -5
	;
}

.stressed {
	letter-spacing: -.07em;
	font-variation-settings: 
		'XTRA' 323
	;
	transform: scale(.8, 1.2);
}

.unsure {
	font-variation-settings: 
		'slnt' -10
	;
}

@keyframes carFirst {
	0% {
		bottom: 60%;
		left: 40%;
	}

	25% {
		bottom: 50%;
		left: 30%;
	}

	100% {
		bottom: 60%;
		left: 110%;
	}
}

@keyframes carSecond {
	0% {
		bottom: 55%;
		left: 70%;
	}

	100% {
		bottom: 35%;
		left: 20%;
	}
}