@font-face {
	font-family: Cutive;
	src:url(/assets/fonts/CutiveMono-Regular.ttf);
}

* {
	scroll-behavior: smooth;
	font-synthesis: none;
	font-size: 20px;
	hyphens: auto;
}

:root {
	--color1: black;
	--color2: white;

	--colab-yellow: #ffed00;

	--space-s: 24px;
	--space-m: 48px;
	--space-l: 72px;
}

body {
	font-family: Cutive, Courier, monospace;
	font-weight: 400;
	background-color: var(--color2);
	color: var(--color1);
}
img{
	mix-blend-mode: multiply;
}

content {
	display: block;
	max-width: 840px;
}

.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
}
nav{
	height: auto;
}
.streetview, iframe{
	position: fixed;
	height: 100vw;
	width: 100vw;
	z-index: -100;
}

a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	color: inherit;
	text-underline-offset: 4px;
	color: var(--color1);
}

h1, h2, h3, h4, h5, h6, nav, .menu, .changes, .change {
	margin: 0;
	padding: 0;
	color: var(--color1);
}

h1, h2, h3, h4{
	text-transform: uppercase;
}


ul{
	margin-top: 0;
}

h1, h2 {
	margin-top: 2rem;
}

h1 {
	display: inline-block;
	background-color: var(--color1);
	color: var(--color2);
	padding: 10px 0px;
	white-space: preserve;
}
h1:before, h1:after{
	content:" ";
}



h2{
	border-top: 1px solid var(--color1);
	padding-top: 5px;
}

h2 + ul {
	margin-top: 7px;
}

h3, h4, h5, h6 {
	padding-top: 1rem;
}
a > h3, article > h3{
	text-transform: none;
	text-decoration-thickness: 1px;
	hyphens: auto;
}

input:focus{
	outline: .5px solid var(--color1);
}

.change::marker {
	content: " ";
}

.logo{
	display: block;
	max-width: 200px;
}

.intro {
	/*	font-size: 2rem;*/
	color: var(--color1);
}

.micro {
	width: 100vw;
	text-align: justify;
	white-space: pre;
	font-size: 0.1rem;
	line-height: 0.7;
}

.last-content {
	display: flex;
	flex-direction: row;
	padding: 0;
	flex-wrap: wrap;
	gap: 12px;
}

.last-content > li {
	background-color: var(--color2);
	color: var(--color1);
	padding: 12px 16px 28px 16px;
	width: 193px;
	height: auto;
	hyphens: auto;
	border: 1px solid var(--color1);
	display: flex;
	align-items: last baseline;
}

/*
.last-content > li:nth-child(10n + 2) {
filter: hue-rotate(36deg);   
}

.last-content > li:nth-child(10n + 3) {
filter: hue-rotate(72deg);   
}

.last-content > li:nth-child(10n + 4) {
filter: hue-rotate(108deg);   
}

.last-content > li:nth-child(10n + 5) {
filter: hue-rotate(144deg);  
}

.last-content > li:nth-child(10n + 6) {
filter: hue-rotate(180deg);  
}

.last-content > li:nth-child(10n + 7) {
filter: hue-rotate(216deg);   
}

.last-content > li:nth-child(10n + 8) {
filter: hue-rotate(252deg);   
}

.last-content > li:nth-child(10n + 9) {
filter: hue-rotate(288deg);  
}*/

.last-content > li::marker, .menu > li::marker, .languages > ul > li::marker {
	content: "";   
}

#search {
	width: fit-content;
}
.searchbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;	
	color: var(--color1);
}

.full-line {
	text-wrap: balance;
	max-width: 100%;
}

.pagefind-ui__form {
	display: grid;
	justify-content: center;
	grid-gap: 12px;
}

.pagefind-ui__drawer {
	grid-row: 2;
}
.pagefind-ui__search-input{
	border: none;
	border-bottom: 1px solid var(--color1);
	height: auto;
	color: var(--color1);
	width: auto;
	grid-row: 1;
	font-family: inherit;
	background-color: var(--color2);
	/*	font-size: 1.5rem;*/
}

::placeholder{
	opacity: .35;
	color: var(--color1);
}

.pagefind-ui__search-clear {
	grid-row: 1;
	border: 1px solid blue;
	background-color: transparent;
	font-family: inherit;
	font-size: 1.5rem;
	display: none;
}

.pagefind-ui__result {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 120px 360px;
	align-items: start;
	grid-gap: 12px;
	border: 1px solid var(--color1);
}

mark {
	background-color: var(--colab-yellow);
}

.pagefind-ui__result + ol {
	margin: 0;
	padding: 0;
}

.pagefind-ui__message {
	width: 532px;
}

.pagefind-ui__result-image {
	max-width: 120px;
	padding-top: 1.5rem;
}

.pagefind-ui__button, button {
	border: 1px solid var(--color1);
	padding: 12px 24px;
	font-family: inherit;
	font-size: inherit;
	background-color: transparent;
}


img {
	width: 100%;
	max-width: 480px;

}

ul{
	list-style-type: circle;
	padding-left: 1.25rem;
}

footer {
	display: grid;
	grid-auto-flow: column;
}

.languages > ul, .languages > ul > li {
	padding: 0;
	margin: 0;
}

.languages > ul {
	display: flex;
	gap: 12px;
}


.timetable {
	display: grid;
	width: auto;
	max-width: 720px;
}

.timetable > div {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 1fr 1fr;
}

.post {
	h2,
	h3,
	h4,
	h5,
	h6 {
		position: relative;
	}
}


.header-anchor {
	@media screen and (min-width: 700px) {
		position: absolute;
		width: 0.8em;
	}

	text-decoration: none;
	color: coral;
}

.header-anchor__symbol {
	@media screen and (min-width: 700px) and (hover: hover) {
		visibility: hidden;

		h2:hover &,
		h3:hover &,
		h4:hover &,
		h5:hover &,
		h6:hover &,
		.header-anchor:focus & {
			visibility: visible;
		}
	}

	visibility: hidden;
}


.screen-reader-only {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.languages > ul > li, nav > ul > li{
	list-style-type: none;

}
/*			SPACERS			*/
.space-s {
	padding-top: var(--space-s);
}

.space-m {
	padding-top: var(--space-m);
}

.space-l {
	padding-top: var(--space-l);
}

@media screen and (max-width: 1080px) {
	.last-content > li {
		flex-grow: 1;
	}

	footer{
		grid-auto-flow: row;
	}
}

@media screen and (max-width: 532px) {
	.pagefind-ui__message {
		width: 100%;
	}

	.pagefind-ui__result {
		grid-template-columns: 20% 80%;
	}

	.pagefind-ui__results {
		padding-left: 0;
	}

	.last-content > li {
		width: 30%;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--color1: white;
		--color2: black;
	}	

	img{
		mix-blend-mode: luminosity;
		filter: invert(1);
	}

	.logo, mark {
		filter: saturate(0.9) brightness(0.9);
	}

	mark {
		color: var(--color2);
	}

	::placeholder{
		opacity: .55;
	}
}