@import url("https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap');

body {
	background-color: #444411;
	color: #ffff99;
	font-family: "UnifrakturMaguntia", cursive;
	font-weight: 400;
	font-style: normal;
}

.oxanium {
	font-family: "Oxanium", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
}

#flex {
	display: flex;
}

#flex>h1 {
	padding-left: 10px;
}

#flex>img {
	padding-left: 0px;
	padding-right: 0px;
}

#centre {
	text-align: center;
}

#round {
	border-radius: 25px;
}

#extraround {
	border-radius: 35%;
}

/* #header {   display: flex;   justify-content: space-around;   text-align: left;   background-color: #111111;   position: sticky;   top: 0px; } */
@keyframes header-move-and-size {
	from {
		opacity: 1;
	}

	to {
		opacity: 0.2;
	}
}

#header {
	display: flex;
	justify-content: space-around;
	text-align: left;
	position: sticky;
	background-color: #111111;
	top: 0px;
	border-radius: 0px 0px 30px 30px;
	animation: header-move-and-size linear forwards;
	animation-timeline: scroll();
	animation-range: 0vh 25vh;
}

@keyframes header-hover {
	from {
		opacity: 1;
	}

	to {
		opacity: 1;
	}
}

#header:hover {
	display: flex;
	justify-content: space-around;
	text-align: left;
	position: sticky;
	background-color: #111111;
	top: 0px;
	border-radius: 0px 0px 30px 30px;
	animation: header-hover;
	animation-timeline: scroll();
	animation-range: 0vh 25vh;
}