:root
{
--blanc: #FFFFFF;
--bleu: rgb(114, 145, 205);
--rouge: rgb(223, 19, 35);
--sombre: rgb(28, 30, 28);
--grisfonce: rgb(138, 139, 139);
--gris: rgb(227, 227, 226);
}

*
{
	padding: 0;
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-weight: 200;
	color: var(--sombre);
	transition-duration: 0.5s;
}

html
{
	width: 100%;
	height: 100%;
}

body
{
	height: 100%;
	background: url('../img/fond.jpg') top center no-repeat;
	background-size: cover;
	zoom: 1;
}

a:has(~ h1)
{
	color: var(--blanc);
}

h1
{
	padding: 40px;
	background: var(--sombre);
	color: var(--blanc);
	font-size: 3em;
	text-align: center;
}

h2
{
	padding: 0 20px;
	color: var(--blanc);
	font-weight: 300;
	text-align: center;
}

h2 span
{
	color: var(--blanc);
	font-weight: 600;
}

form
{
	padding: 100px 20px;
	margin: -30px 20px 20px 20px;
	text-align: center;
	background: rgba(255, 255, 255, 0.9);
	font-size: 1.2em;
	border-radius: 25px;
}

form span
{
	font-weight: 600;
}

#f1
{
	padding: 20px;
}

#f1 br + span
{
	color: var(--rouge);
}

#f2
{
	padding: 20px;
	margin: 100px 20px 20px 20px;
}

#f2 input
{
	margin: 10px 0;
}

label
{
	display: block;
	padding: 0 10px;
	margin: 10px 0;
}

input
{
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 15px 20px;
	margin: 50px 0 20px 0;
	font-size: 1.2em;
	text-align: center;
	background: var(--gris);
	border: solid 2px var(--grisfonce);
}

input[type="submit"]
{
	padding: 10px 20px;
	margin-top: 0;
	background: var(--rouge);
	color: var(--blanc);
	font-weight: 400;
	border: 0;
	border-radius: 20px;
	cursor: pointer;
}

p
{
	padding: 20px;
	margin: 50px 25px;
	background: var(--blanc);
	border-radius: 25px;
	text-align: center;
	font-size: 1.5em;
}

p#lost
{
	margin-top: 150px;
	background: var(--gris);
	font-size: 1.2em;
}

p#win
{
	margin-top: 50px;
	background: var(--rouge);
	color: var(--blanc);
	font-size: 1.2em;
}

p#win span
{
	color: inherit;
	font-weight: 600;
}

p#win span:first-of-type
{
	display: block;
	font-size: 1.3em;
}

p#win span:nth-of-type(2)
{
	display: block;
	margin-bottom: 20px;
}

div#astuce
{
	height: 60px;
}

footer
{
	display: block;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20px;
	background: var(--sombre);
	text-align: center;
	font-size: 1.1em;
	font-weight: 700;
	color: var(--blanc);
}

footer a
{
	display: inline-block;
	margin: 0 20px;
	color: inherit;
}

footer a:first-of-type
{
	margin-left: 40px;
}

#roue
{
	display: block;
	width: 300px;
	margin: auto;
	animation: rotation 5s ease-in-out forwards;
}

@keyframes rotation
{
	from
	{
		transform: rotate(0deg);
	}
	to
	{
		transform: rotate(1800deg);
	}
}