@font-face {
	font-family: "enchantedland";
	src: url("../../../assets/fonts/enchantedland/EnchantedLand.otf") format("opentype");
}

@font-face {
    font-family: "roboto";
    src: 
        local("roboto"),
        url("../../../assets/fonts/roboto/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
}

body {
	background-color: rgb(13, 10, 20);
}

h2 {
	display: flex;
	justify-content: center;
	font-family: enchantedland;
	font-size: 60px;
	margin: 16px 0px;
	color: white;
}


#header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	color: white;
	background-color: rgb(105, 60, 97);
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	font-family: "roboto";
	box-shadow: 0px 4px 4px rgb(13, 10, 20);
}

#titre {
	display: flex;
	padding-left: 40px;
}

#maralye {
	border-radius: 16px;
	background-color: rgb(42, 28, 56);
	height: 50px;
	width: 80px;
	top: 5px;
	font-family: "enchantedland";
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	position: absolute;
	color: white;
	text-decoration: none;
}

#onglets {
	display: flex;
	gap: 24px;
	top: 5px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 16px;
	padding-right: 40px;
}

.pages {
	border-radius: 16px;
	color: white;
	border: 0px;
	font-size: 16px;
	background-color: rgb(42, 28, 56);
	height: 50px;
	width: 80px;
	font-family: "roboto";
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
}

.pages:hover {
	background-color: white;
	color: rgb(42, 28, 56);
}