@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&display=swap');

:root{
--noir:#0A0905;
--blanc:#FDF9F3;
--jaune:#F7C750;
--violet:#CE64C7;
--rouge:#EB6F5C;
--gris:#878787;
}
* {box-sizing: border-box}
img,video {max-width: 100%;height: auto}
body {
  color: var(--blanc);
  background: var(--noir);
  font-family: 'Manrope', Arial, sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-align: center;
  height: 100dvh;
  width: 100dvw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow:hidden
}
h1 {font-family: 'Space Grotesk', Arial, sans-serif;margin: 0;}
h2 {font-family: 'Space Grotesk', Arial, sans-serif;font-size: 1em;}
h3 {font-size: 0.75em;}
section {margin: 0 auto}

.flex {display: flex}
.fd-column { flex-direction: column}
.fd-row { flex-direction: row}
.fjc-flex-start { justify-content: flex-start}
.fjc-flex-end { justify-content: flex-end}
.fjc-center { justify-content: center}
.fjc-between { justify-content: space-between}
.fjc-around {justify-content: space-around}
.fai-flex-start { align-items: flex-start}
.fai-flex-end { align-items: flex-end}
.fai-center { align-items: center}
.m-top-50 { margin-top: 50px}
.m-top-30 { margin-top: 30px}
p {
  text-align: left;
  vertical-align: middle;
  display: inline-block;
}

a {color: var(--blanc);text-decoration: underline}
a:hover {color:var(--gris)}

.logo-container {padding: 1em;margin: 0;}
h1 {font-size: 2em;}
h1 strong {font-size: 1.5em;}

.logo {max-width: 250px;}
.sun{
  position:absolute;
  max-width: 87px;bottom:-44px;
  animation: rotationSun 10s linear infinite
}

@keyframes rotationSun {
  from {transform:rotate(0deg)}
  to {transform:rotate(360deg)}
}


@media screen and (min-width:540px) {
  body {font-size: 18px}
 .logo {max-width: 600px}
 .sun{max-width: 209px;bottom:-104px}
}