* {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

:root {
	--margin: 1.25rem;
	--color-dark: #141414;
	--color-dark-blue: rgb(30, 33, 38);
	--color-dark-muted: #666;
    --color-light: #f5f5f7;
    --color-grey: #a1a1a6;
	--card-radius: 1rem;
	--badge-radius: 3px;
}

*::selection {
	background-color: var(--color-grey);
	color: var(--color-dark);
}

html, 
body {
	font-size: 0.9rem;
	font-family: Arial, Helvetica, sans-serif;
	font-family: "General";
	font-weight: 500;
	line-height: 1.15;
	background-color: var(--color-dark-blue);
	color: var(--color-light);
	padding: 0;
	margin: 0;
}

body {
	overflow-x: hidden;
	overflow-y: scroll;
}

body:has(input#about:checked) {
	overflow: hidden !important;
}

/* Hide Scrollbars But Keep Functionality */
/* https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp */

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
	display: none;
}
  
/* Hide scrollbar for IE, Edge and Firefox */
body {
	-ms-overflow-style: none;
	/* scrollbar-width: none; */
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	font-weight: 500;
	margin: 0px;
}

a,
a:visited {
	text-decoration: none;
	color: inherit;
}

/* Hide controls on video and shadow DOM when in Fullscreen mode */
/* https://css-tricks.com/custom-controls-in-html5-video-full-screen/ */
video::-webkit-media-controls {
	display:none !important;
}

#main {
	position: relative;
	z-index: 1;
}

.homepage {
	/* compensate SmoothScroll GSAP plugin */
	padding-bottom: 25vh;
}

.section_title {
	font-size: 8vw;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	padding: 0px 3.5rem;
	margin: 2em 0px 0.5rem 0px;
}

.section_headline {
	font-size: 1em;
	text-align: center;
	color: var(--color-grey);
	padding: 0px 3.5rem;
	margin: 0px 0px 11vh 0px;
}

section.cards .section_title {
	margin: 15vh 0px 0.5rem 0px;
}

section.carousel + section.carousel .section_title {
	margin: 15vh 0px 0.5rem 0px;
}

@media screen and (min-width: 640px) {
	.section_headline {
		margin: 0px 0px 10vw 0px;
	}

	section.cards .section_title {
		margin: 2em 0px 0.5rem 0px;
	}

	section.carousel + section.carousel .section_title {
		margin: 3em 0px 0.5rem 0px;
	}
}

@media screen and (min-width: 992px) {
	.section_title {
		font-size: 5vw;
	}
}

/* animation */
/* .is-animating is set on <html> by an inline script in _main.php */
.is-animating body {
	overflow: hidden;
}

.is-animating #main {
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}

.is-animating .header {
	/* transform instead of top: animated without re-layout */
	transform: translateY(45vh);
}

.is-animating .site_title,
.is-animating .site_headline {
	display: inline-block;
	transform: translate(0%, 100%);
	visibility: hidden;
	opacity: 0;
}

.is-animating .header label {
	opacity: 0;
}

.is-animating .controler {
	opacity: 0;
}

@media screen and (min-width: 640px) {
	.section_headline {
		font-size: 1.17em;
	}
}

/* error 404 */
.page.error-404 {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	width: 100%;
    height: 100vh;
}

.page.error-404 > .page_headline {
	color: var(--color-grey);
}

body:has(.page.page.error-404) .header,
body:has(.page.page.error-404) .controler {
	display: none;
}