@charset "UTF-8";

/* Box sizing rules */
html {
  box-sizing: border-box;
}
*, 
*::before, 
*::after {
  box-sizing: inherit;
}

a {
	color: currentColor;
}

[id] {
	scroll-margin-top: 1rem; /* Abstand oberhalb bei Sprung auf id, z.B. <a href="#sprungziel"> -> <div id="sprungziel"></div>*/
}

img,
embed,
object,
video,
iframe {
	max-width: 100%;
	width: auto;
	height: auto;
	border-width: 0;
	vertical-align: middle;
}

/* a, */ 
video, 
iframe, 
object, 
embed {
	outline: 0;
}

html, body {
	height: 100%;
}

html {
	font-family: sans-serif;
	font-size: 100%;
}

body {
	display: grid;
	grid-template-areas: 
    "header-area"
    "main-area"
    "footer-area";
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	text-align: center;
	line-height: 1.3;
	color: rgb(50, 50, 50);
}

header {
	grid-area: header-area;
}

main {
	grid-area: main-area;
}

footer {
	grid-area: footer-area;
	display: grid;
	align-items: end;
}

footer .contact {
	color:rgb(100, 100, 100);
}

h1 {
	font-size: 5rem;
}

a {
	color: inherit;
}

a:hover,
a:focus {
	color: #000;
}

#site-logo svg,
#site-logo img {
	width: auto;
	height: 7rem;
	transform: translate(115px,77px);
}

@media (prefers-color-scheme: dark) {
	body {
		color: #fff;
		background-color: rgb(50, 50, 50);;
	}
	#site-logo svg path {
		fill: rgb(255, 255, 255);
	}
}