/**************************************************/
/*******  style.css - Olivier Le CLerc  ***********/
/**************************************************/

/* dernière modification : 2022-01-25 */

/*==  FONTS  =====================================*/

@font-face {
  font-family: 'Neutra Text';
  src: url('../fonts/neutra-text/NeutraText-Bold.eot');
  src: url('../fonts/neutra-text/NeutraText-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/neutra-text/NeutraText-Bold.woff2') format('woff2'),
    url('../fonts/neutra-text/NeutraText-Bold.woff') format('woff'),
    url('../fonts/neutra-text/NeutraText-Bold.ttf') format('truetype'),
    url('../fonts/neutra-text/NeutraText-Bold.svg#NeutraText-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neutra Text';
  src: url('../fonts/neutra-text/NeutraText-Book.eot');
  src: url('../fonts/neutra-text/NeutraText-Book.eot?#iefix') format('embedded-opentype'),
    url('../fonts/neutra-text/NeutraText-Book.woff2') format('woff2'),
    url('../fonts/neutra-text/NeutraText-Book.woff') format('woff'),
    url('../fonts/neutra-text/NeutraText-Book.ttf') format('truetype'),
    url('../fonts/neutra-text/NeutraText-Book.svg#NeutraText-Book') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Motor Oil 1937 M54';
  src: url('../fonts/motor-oil/MotorOil1937M54.eot');
  src: url('../fonts/motor-oil/MotorOil1937M54.eot?#iefix') format('embedded-opentype'),
    url('../fonts/motor-oil/MotorOil1937M54.woff2') format('woff2'),
    url('../fonts/motor-oil/MotorOil1937M54.woff') format('woff'),
    url('../fonts/motor-oil/MotorOil1937M54.ttf') format('truetype'),
    url('../fonts/motor-oil/MotorOil1937M54.svg#MotorOil1937M54') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*==  GENERAL SETTINGS  ==========================*/

html {
  font-size: 62.5%;
  /* 62.5% trick => 1rem == 10 px */
}

body {
  background: rgb(10, 10, 10);
  background-image: url("../img/bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  font-family: sans-serif;
  margin: auto;
  text-align: center;
  font-size: 14px;
  /* for browsers not supporting rem units*/
  font-size: 1.4rem;
}

h1,
h2,
h3,
nav li {
  font-family: 'Neutra Text', sans-serif;
}

h1 {
  font-size: 25px;
  /* for browsers not supporting rem units*/
  font-size: 2.5rem;
  margin: 5px;
  /* for browsers not supporting rem units*/
  margin: 0.5rem;
}

h2 {
  margin: 0 auto;
  font-size: 20px;
  /* for browsers not supporting rem units*/
  font-size: 2rem;
}

h3 {
  font-size: 16px;
  /* for browsers not supporting rem units*/
  font-size: 1.6rem;
}

/*--   bannière animée page d'accueil  -------------*/

main {
  min-height: 100vh;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#animated-logo {
  max-height: 300px;
}

.subtitle {
  filter: drop-shadow(0 0 5px black);
  color: white;
  font-size: 2.5rem;
}

/*--   logo svg ------------------------------------*/
.scalable_svg {
  height: 100%;
}

.logo_path {
  fill: none;
  fill-opacity: 1;
  stroke: #ffffff;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px black);
}

#logo_background {
  fill-opacity: 0.5;
  fill: transparent;
  filter: blur(10px);
}

.large_stroke {
  stroke-width: 4;
}

.thin_stroke {
  stroke-width: 2;
}

.planet {
  fill: white;
}

#planet_1 {
  animation: rotation 10s infinite linear;
}

#planet_2 {
  animation: rotation 20s infinite linear;
}

#planet_3 {
  animation: rotation 30s infinite linear;
}

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

  to {
    transform: rotate(359deg);
  }
}

text {
  font-family: 'Motor Oil 1937 M54', sans-serif;
  text-anchor: middle;
  font-size: 80px;
  fill: white;
  filter: drop-shadow(0 0 8px black);
}