@font-face {
	font-family: "Geometric Funk";
	src: url("fonts/GeometricFunkVF.woff2") format("woff2");
	font-weight: normal;
}
* {
	font-family: "Geometric Funk", sans-serif;
	text-transform: lowercase;
}

body {
	margin: 0;
	padding: 20px;
	box-sizing: content-box;
	max-width: 100vw;
	overflow-x: hidden;
}
a {
	color: #1449f2;
	transition: .2s;
}
a:hover {
	color: #f61d5d;
}
a:active {
	color: #22f494;
}

.bodycontent {
	transition: 1s;
	font-variation-settings: 'FUNK' 0;
	transition-timing-function: ease-out;
	padding-top: 200px;
	font-size: 8rem;
	line-height: 8rem;
}
.contentdarkmode {
	font-variation-settings: 'FUNK' 100;
}

#darkmode {
	border: 5px solid black;
	font-size: 4rem;
	border-radius: 50%;
	background-color: white;
	padding: 40px;
	cursor: pointer;
	position: fixed;
	transition: .2s;
	transition-timing-function: ease;
	font-variation-settings: 'FUNK' 0;
}
#darkmode:hover {
	color: white;
	border: 5px solid white;
	background-color: black;
}
#darkmode:active {
	font-variation-settings: 'FUNK' 100;
	transform: scale(.8);
}
.darkmode {
	background-color: black;
	color: white;
}

@media screen and (max-width: 1000px) { 
	.bodycontent {
		font-size: 3rem;
		line-height: 3rem;
	}
	#darkmode {
		font-size: 1.5rem;
	}
}