html,
body {
	background-color: var(--background);
	font-size: var(--text);
	line-height: 1.4;
	font-family: var(--font);
}

video{ 
width: min(1920px, 100%);

}

h1, h2, h3 {
font-size: var(--text):
    font-weight: bold;
}

code {
    font-family: 'Necto-Mono';
    background-color: white;
    color: #333;
}

pre {
    white-space:pre-wrap;
    overflow-x: auto;

}

/* LINKS */

a {
	color: currentColor;
	text-decoration: none;
}

a::after {
	font-family: Arial, Helvetica, sans-serif;
	display: inline-block;
	content: "⤴";
	color: var(--accent);
	transform: translate(0);
	transition: transform 0.6s ease-in;
}

a:hover::after {
	transform: translateY(-4px);
	transition: transform 0.1s ease-out;
}

.stretched-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:100;
}

*[data-mover]{
        position: absolute;
        transition: transform 0.2s ease-out;
}


/* RETURN */

.back {
	display: block;
	color: var(--accent);
}

.back::before {
	font-family: Arial, Helvetica, sans-serif;
	display: inline-block;
	color: var(--accent);
	content: "← ";
	transform: translateX(0);
	transition: transform 0.6s ease-in;
}

.back:hover::before {
	transform: translateX(-4px);
	transition: transform 0.1s ease-out;
}

.back::after {
	content: "";
}

/* INTRO BOX */

.intro {
	background-color: var(--accent);
	border-radius: 16px;
	padding: 16px;
}

/* LISTS */

ul {
	margin: 16px 0;
/* 	padding: 0; */
/* 	list-style: none; */
}

li + li {
	margin-top: 0.25em;
}