/* VARIABLES */

:root
{
--couleur: #b2665a;
}

/* GLOBAL */

*::-moz-selection {background: var(--couleur); color: white;}
*::selection {background: var(--couleur); color: white;}
body
{
min-height: 100vh;
background: rgb(50,50,50);
}
html, body, p, li, button, input, textarea, select
{
color: rgb(35,35,35);
font-family: 'Open Sans', Sans-Serif;
font-weight: 400;
font-size: 17px;
}
h1, h2, h3, h4, h5, h6
{
color: var(--couleur);
font-family: 'Fish n chips', Sans-Serif;
font-weight: 300;
font-size: 80px;
}
h1 {display: none;}
hr
{
width: 50%;
margin-top: 2em;
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
background: white;
}

/* Fond */
#fond
{
position: fixed;
width: 110%;
height: 110vh;
left: -5%;
top: -5vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
@media (min-width: 1101px) {
	#fond {animation: fond 2s forwards;}
	@keyframes fond {
		from {filter: opacity(1) blur(0px);}
		to {filter: opacity(0.5) blur(10px);}
	}
}
@media (max-width: 1100px) {
	#fond {filter: opacity(0.5) blur(5px);}
}

/* Langues */
#langue
{
position: fixed;
left: 16px;
top: 16px;
}
#langue a {}
#langue a img
{
display: inline-block;
width: 32px;
margin: 8px;
box-shadow: 0 2px 1px 0 rgba(0,0,0,0.25);
}
@media (max-width: 600px) {
	#langue a img {margin: 4px;}
}

/* Logo */
#logo
{
display: block;
position: absolute;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
height: 40vh;
left: calc((100vw / 2) - 20vh);
top: calc((100vh / 2) - 20vh);
/*filter: drop-shadow(0 0 20px rgba(0,0,0,0.5));*/
}
@media (min-width: 1100px) {
	#logo {animation: logo 2.5s forwards cubic-bezier(.11,.8,.34,.91);}
	@keyframes logo {
		0% {transform: scale(0.5); clip-path: inset(0% 50% 0% 50%);}
		50% {transform: scale(0.5); clip-path: inset(0% 50% 0% 50%);}
		100% {transform: scale(1); clip-path: inset(0% 0% 0% 0%);}
	}
}
@media (max-width: 580px) {
	#logo
	{
	height: 25vh;
	left: calc((100vw / 2) - 12.5vh);
	top: 20vh;
	}
}

/* Menu */
.liens
{
position: absolute;
bottom: 16px;
}
body > nav
{
position: static !important;
height: auto !important;
padding: none !important;
background: transparent !important;
}
body > nav .liens {overflow: hidden;}
body > nav .liens a {text-shadow: none !important;}
body > nav .liens a img {filter: none !important;}
body > nav button, body > nav .droite {display: none !important;}
.liens {top: initial !important;}
@media (min-width: 1100px) {
	body > nav .liens a span
	{
	display: block;
	transform: translateY(10em);
	animation: menu 1s forwards cubic-bezier(.18,1.11,.82,1.07);
	}
	body > nav .liens a:nth-of-type(1) span {animation-delay: 1s;}
	body > nav .liens a:nth-of-type(2) span {animation-delay: 1.1s;}
	body > nav .liens a:nth-of-type(3) span {animation-delay: 1.2s;}
	body > nav .liens a:nth-of-type(4) span {animation-delay: 1.3s;}
	body > nav .liens a:nth-of-type(5) span {animation-delay: 1.4s;}
	body > nav .liens a:nth-of-type(6) span {animation-delay: 1.5s;}
	@keyframes menu {
		0% {transform: translateY(10em);}
		100% {transform: translateY(0%)}
	}
}
@media (max-width: 580px) {
	.liens {bottom: 5vh;}
}