@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);
}

#image {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

#imageFond {
	background-image: url("./images/chateau.png");
	background-size: cover;
	width: 100%;
	height: 100vh;
	background-position: center;
	transition: transform 5s ease;
}

#image:hover #imageFond {
	transform: scale(1.05);
}

#logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgb(216, 178, 189);
	text-align: center;
	font-family: "enchantedland";
	font-size: 100px;
	text-shadow:
        4px 4px 2px #8d5e6c,
        6px 6px 2px #72394a, 
        8px 8px 2px #541d2e;
}
#synopsis {
	padding-bottom: 60px;
}

.resume {
	margin: 0 0;
	padding: 0 60px;
	text-align: center;
	font-family: "roboto";
	color: white;
}

#avatar {
    justify-content: center;
    margin: 0;
    padding-bottom: 60px;
    display: flex;
    gap: 24px;
}

.carte {
	height: 500px;
	width: 100%;
	perspective: 1000px;
	position: relative;
}

.carte:hover .flip {
	transform: rotateY(-180deg);
}
.flip {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.8s;
}

.front, .back {
	position: absolute;
	height: 100%;
	width: 100%;
	border-radius: 16px;
	box-shadow: 4px 4px 4px black;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	backface-visibility: hidden;
	background-color: rgb(42, 28, 56);
}

.imageFront {
	height: 400px;
	width: 95%;
}

#feeCarte {
	background-image: url("./images/fee.jpg");
	background-position: center 15%;
	height: 400px;
	width: 95%;
	border-radius: 16px;
}

#loupgarouCarte {
	background-image: url("./images/loupgarou.jpg");
	background-position: center 10%;
	height: 400px;
	width: 95%;
	border-radius: 16px;
}

#vampireCarte {
	background-image: url("./images/vampire.jpg");
	background-position: center 25%;
	height: 400px;
	width: 95%;
	border-radius: 16px;
}

#trollCarte {
	background-image: url("./images/troll.jpg");
	background-position: center 15%;
	height: 400px;
	width: 95%;
	border-radius: 16px;
}

#elfeCarte {
	background-image: url("./images/elfe.jpg");
	background-position: center 10%;
	height: 400px;
	width: 95%;
	border-radius: 16px;
}

 .textFront {
 	font-weight: bold;
 	font-size: 40px;
 	font-family: "enchantedland";
 	color: white;
 	margin: 0;
 }

 .back {
 	font-family: "roboto";
 	font-size: 16px;
 	transform: rotateY(-180deg);
}

 .textFront a, .textBack a {
 	color: white;
 	text-decoration: none;
 }

 .textFront {
 	padding: 20px 0;
 }

 .textBack {
 	display: flex;
 	flex-direction: column;
 	padding: 0 20px;
 }

.regle {
	color: white;
	font-family: "roboto";
	font-size: 16px;
}