@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

html, body, main { padding: 0; margin: 0; position: relative; overflow: hidden; height: 100vh; width: 100vw; background-color: #000; }

div.background::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1; }
div.background {position: absolute; height: 100vh; width: 100%; background-position: center; background-size: cover; background-image: url('/background-low.jpg'); filter: blur(12px); transition: filter 0.8s ease-out; opacity: 0; animation: bgFadeIn 0.5s ease-out forwards;}

/* Quand la HD est chargée */
div.background.is-loaded {filter: blur(0); }
@keyframes bgFadeIn {from { opacity: 0; } to   { opacity: 1; } }

div.logo {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); opacity: 0; transition: opacity 0.8s ease-out; }
div.logo.visible {opacity: 1;}
div.logo a {display: block;}
div.logo a img {height: 100px;}
div.logo, div.error404 {position: absolute; z-index: 2; }

.footer {position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 3; min-width: 400px; padding: 25px 25px 0px 25px; }
.footer p {font-family: Outfit; font-weight: 400; font-size: 16px; color: white; margin: 0 0 8px 0; opacity: 0; transition: opacity 0.8s ease-out; }
.footer img {width: 150px; filter: invert(1); opacity: 0; transition: opacity 0.8s ease-out; }
.footer a {text-decoration: none !important;}

div.error404 {width: 20%; position: absolute; top: 40%; left: 50%; transform: translateX(-50%) translateY(-50%); }

@media (max-width: 975px) {div.logo { height: 70px; } div.logo a img { height: 70px; } }
@media (max-width: 650px) {div.logo { height: 60px; } div.logo a img { height: 70px; } }
@media (max-width: 450px) {div.logo { height: 50px; } div.logo a img { height: 70px; } }