:root{
	--color-bg: white;
	--color-tx: black;
	--invert: 0;
}
@media (prefers-color-scheme: dark) {
	:root{
		--color-bg: black;
		--color-tx: white;
		--invert: 1;
	}
}



@font-face {
	font-family: 'webly';
	src: url('webly-webfont.ttf') format('truetype');
}

body {
	font-family: webly;
	margin: 0px;
	background-color: var(--color-bg);
	color: var(--color-tx);
}

#top{
	width: 100%;
	position: fixed;
	top: -35vh;
	transition: all .5s ease-in-out;
}

#bottom{
	width: 100%;
	position: fixed;
	bottom: calc(-25vw - 12.5vh);
	transition: all .5s ease-in-out;
}

#name{
	position: relative;
	width: 100%;
	text-align: center;
	font-size: 10vh;
}

#domain{
	position: relative;
	width: 100%;
	text-align: center;
	font-size: 7.5vh;
	top: 5vh;
}

#socialMedia {
	position: relative;
	bottom: 5vh;
	margin-left: 20vw;
	transition: all .5s ease-in-out;
}

.socialIcon {
	display: inline-block;
	height: 10vw;
	width: 10vw;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 2.5vw;
	transition: all .2s ease-in-out;
}

.socialIcon:hover {
	height: 15vw;
	width: 15vw;
	margin: 0vw;
}

#twitter,
#linkedin,
#youtube,
#github {
	filter: brightness(0) invert(var(--invert));
}

#twitter:hover,
#linkedin:hover,
#youtube:hover,
#github:hover {
	filter: none;
}

#instagram {
	background-image: url(assets/black_logo_instagram.svg);
}

#instagram:hover {
	background-image: url(assets/logo_instagram.svg)
}

#twitter {
	background-image: url(assets/logo_twitter.svg);
}

#linkedin{
background-image:url(assets/logo_linkedin.svg);
}

#youtube {
	background-image: url(assets/logo_youtube.svg);
}

#github {
	background-image: url(assets/logo_github.png);
}

#impressum {
	bottom: 0vh;
	width: 100%;
	position: relative;
	color: black;
	text-align: center;
	font-size: 5vh;
	transition: all .5s ease-in-out;
}

a {
	text-decoration: none;
	color: var(--color-tx);
}