@font-face {
	font-family: "Marianne";
	font-weight: 700;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Bold_Italic.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 700;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Bold_Italic.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 800;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-ExtraBold_Italic.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 800;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-ExtraBold_Italic.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 300;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Light_Italic.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 800;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-ExtraBold.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 300;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Light.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 500;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Medium_Italic.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 500;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Medium.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 500;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Medium.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 400;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Regular_Italic.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 400;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Regular.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 250;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Thin_Italic.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 700;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Bold.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 700;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Bold.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 800;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-ExtraBold.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 300;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Light_Italic.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 300;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Light.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 400;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Regular.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 500;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Medium_Italic.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 250;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Thin_Italic.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 250;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Thin.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 400;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Regular_Italic.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 250;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Thin.woff2");
}

html {
	font-family: Marianne;
}

body {
	margin: 0;
}

ul[role=list] {
	display: flex;
	list-style: none;
	gap: 0 1rem;
	flex-wrap: wrap;
	padding: 0;
}

header, footer {
	background: #f0f0f0;
	padding: 1rem;
}

main {
	padding: 1rem;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.active {
	font-weight: bold;
}

[href='#main'] {
	position: absolute;
	top: -10em;
	background: white;
}

[href='#main']:focus {
	z-index: 100;
	top: 0;
}

/*
	Kirby admin bar 
*/

.kirby-admin-bar {
	background: #e0e0e0;
	padding: 1rem;
}

/*
	Layout basics (preliminary)
*/

.columns {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2rem;
}

@media (max-width: 40em) {
	.columns {
		display: flex;
		flex-direction: column;
	}
}