/* hyla farben */

@font-face {
    font-family: "Hyla Sans";
    src: url("fonts/hyla_sans_webfont/Hyla-Sans-Regular.woff2") format("woff2"), url("fonts/hyla_sans_webfont/Hyla-Sans-Regular.woff") format("woff");
    font-style: normal;
    font-display: swap;
    font-weight:400
}

@font-face {
    font-family: "Hyla Sans";
    src: url("fonts/hyla_sans_webfont/Hyla-Sans-Regular-Italic.woff2") format("woff2"), url("fonts/hyla_sans_webfont/Hyla-Sans-Regular-Italic.woff") format("woff");
    font-style: italic;
    font-display: swap;
    font-weight:400
}

@font-face {
    font-family: "Hyla Sans";
    src: url("fonts/hyla_sans_webfont/Hyla-Sans-Bold.woff2") format("woff2"), url("fonts/hyla_sans_webfont/Hyla-Sans-Bold.woff") format("woff");
    font-style: normal;
    font-display: swap;
    font-weight:700
}

@font-face {
    font-family: "Hyla Headline";
    src: url("fonts/hyla_headline_webfont/Hyla-Headline-Regular.woff2") format("woff2"), url("fonts/hyla_headline_webfont/Hyla-Headline-Regular.woff") format("woff");
    font-style: normal;
    font-display: swap;
    font-weight:400
}

/*
@font-face {
    font-family: "Hyla Headline";
    src: url("assets/fonts/hyla_headline_webfont/Hyla-Headline-Italic.woff2") format("woff2"), url("assets/fonts/hyla_headline_webfont/Hyla-Headline-Italic.woff") format("woff");
    font-style: italic;
    font-display: swap;
    font-weight:400
}
*/

@font-face {
    font-family: "Hyla Headline";
    src: url("fonts/hyla_headline_webfont/Hyla-Headline-Bold.woff2") format("woff2"), url("fonts/hyla_headline_webfont/Hyla-Headline-Bold.woff") format("woff");
    font-style: normal;
    font-display: swap;
    font-weight:700
}

:root {
	--color-primary-400: #DE6640;
	--color-primary-300: #e58566;
	--color-primary-200: #eba38c;
	--color-primary-100: #f2c2b3;
	--color-primary-50: #fae8e2;
	--color-primary-500-hover: #d3613d;
	--color-primary-600-pressed: #e37d5d;
	--color-secondary-800: #343434;
	--color-secondary-600: #484848;
	--color-secondary-400: #717171;
	--color-secondary-300: #999999;
	--color-secondary-100: #f3f3f3;
	--color-grey-800: #343434;
	--color-grey-700: #5d5d5d;
	--color-grey-600: #717171;
	--color-grey-500: #858585;
	--color-grey-400: #999999;
	--color-grey-300: #aeaeae;
	--color-grey-200: #c2c2c2;
	--color-grey-100: #f3f3f3;
	--color-n-pure-white: #FFFFFF;
	--color-n-white: #FFFEFD;
	--color-n-black: #343434;
	--color-f-success: #69CD3A;
	--color-f-error: #E94B50;
	--color-f-focus-outline: #0000FF;
	--color-f-focus-box-shadow: #AAD4F8;
	--color-f-rating: #FFC527;
}

.font-sans {
	font-family: "Hyla Sans", sans-serif;
}

.font-serif {
	font-family: "Hyla Headline", serif;
}

body {
	font-family: "Hyla Sans", sans-serif;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-color: var(--color-n-black);
	color: var(--color-n-white);
}

main {
	text-align: center;
	animation: fadeIn 2s ease-in-out;
}

.logo-container {
	width: 150px;
	height: 150px;
	margin: 0 auto 20px;
	color: var(--color-primary-400);
}

.logo-container > svg {
	width: 100%;
	height: 100%;

	object-fit: contain;
	object-position: center;
}

h1 {
	font-size: clamp(2rem, 8vw, 3.5rem);
	margin: 0;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.subtitle {
	font-size: clamp(1rem, 3vw, 1.25rem);
	color: var(--color-grey-300);
	margin-top: 1rem;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}