@font-face {
  font-family: "/assets/fonts/Luciole ";
  src: url("/assets/fonts/Luciole -Regular.eot"); /* IE9 Compat Modes */
  src: url("/assets/fonts/Luciole -Regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("/assets/fonts/Luciole -Regular.woff") format("woff"),
    /* Modern Browsers */ url("/assets/fonts/Luciole -Regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("/assets/fonts/Luciole -Regular.svg#Luciole -Regular") format("svg"); /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "/assets/fonts/Luciole ";
  src: url("/assets/fonts/Luciole -Bold.eot"); /* IE9 Compat Modes */
  src: url("/assets/fonts/Luciole -Bold.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("/assets/fonts/Luciole -Bold.woff") format("woff"),
    /* Modern Browsers */ url("/assets/fonts/Luciole -Bold.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("/assets/fonts/Luciole -Bold.svg#Luciole -Bold") format("svg"); /* Legacy iOS */
  font-style: normal;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "/assets/fonts/Luciole ";
  src: url("/assets/fonts/Luciole -Italic.eot"); /* IE9 Compat Modes */
  src: url("/assets/fonts/Luciole -Italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("/assets/fonts/Luciole -Italic.woff") format("woff"),
    /* Modern Browsers */ url("/assets/fonts/Luciole -Italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("/assets/fonts/Luciole -Italic.svg#Luciole -Italic") format("svg"); /* Legacy iOS */
  font-style: italic;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}
@font-face {
  font-family: "/assets/fonts/Luciole ";
  src: url("/assets/fonts/Luciole -BoldItalic.eot"); /* IE9 Compat Modes */
  src: url("/assets/fonts/Luciole -BoldItalic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("/assets/fonts/Luciole -BoldItalic.woff") format("woff"),
    /* Modern Browsers */ url("/assets/fonts/Luciole -BoldItalic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("/assets/fonts/Luciole -BoldItalic.svg#Luciole -BoldItalic")
      format("svg"); /* Legacy iOS */
  font-style: italic;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}
/* Ces fontes sont distribuées gratuitement sous Licence publique Creative Commons Attribution 4.0 International :
https://creativecommons.org/licenses/by/4.0/legalcode.fr
These fonts are freely available under Creative Commons Attribution 4.0 International Public License:
https://creativecommons.org/licenses/by/4.0/legalcode
Luciole © Laurent Bourcellier & Jonathan Perez

Le caractère typographique Luciole a été conçu spécifiquement pour les personnes malvoyantes. 
Ce projet est le résultat de plus de deux années de collaboration entre le Centre Technique Régional pour la Déficience Visuelle 
et le studio typographies.fr. Le projet a bénéficié d'une bourse de la Fondation suisse Ceres et de l'appui du laboratoire DIPHE 
de l'Université Lumière Lyon 2.
 */

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  font-family: "Luciole", sans-serif;
  scroll-behavior: smooth;
}
html::-webkit-scrollbar {
  display: none;
}
:root {
  --grey: #bbc6ce;
  --greenTxt: rgb(37, 157, 80);
  /* --green: #1b743c; */
  --green: rgb(37, 157, 80);
  --lowgreen: rgba(37, 157, 81, 0.92);
  --lowergreen: rgba(37, 157, 81, 0.5);
  --red: #ce061f;
  --black: black;
  --white: whitesmoke;
  --realwhite: white;
  --bg1: rgba(245, 245, 245, 0.8);
  --bg2: rgba(255, 255, 255, 0.7);
}
.grey {
  color: var(--grey);
}
.green {
  color: var(--greenTxt);
}
.red {
  color: var(--red);
}
body {
  background: black;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  letter-spacing: 2px;
  max-width: 600px;
  margin: auto;
}
html {
  background-color: var(--greenTxt);
}
img {
  border-radius: 50%;
}

.profile-picture {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3%;
  height: auto;
  max-width: 150px;
  border-radius: 50%;
}

.profile-name {
  text-align: center;
  padding: 30px 30px 0 32px;
  font-size: 25px;
  font-weight: bold;
}

.advert {
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 14px;
  font-style: italic;
  color: var(--green);
}
.advert::before {
  width: 100dvw;
  content: "Si vous êtes arrivé sur cette page";
  -webkit-animation: advertTxt 8s linear infinite;
  animation: advertTxt 8s linear infinite;
}
@-webkit-keyframes advertTxt {
  0% {
    content: "";
  }
  5% {
    content: "Si vous êtes arrivé sur cette page";
  }

  30% {
    content: "en scannant un QR-code";
  }

  50% {
    content: "nous vous conseillons ";
  }

  75% {
    content: "d'ouvrir cette page ";
  }
  95% {
    content: "dans votre navigateur habituel";
  }

  100% {
    content: "";
  }
}

@keyframes advertTxt {
  0% {
    content: "";
  }
  5% {
    content: "Si vous êtes arrivé sur cette page";
  }

  30% {
    content: "en scannant un QR-code";
  }

  50% {
    content: "nous vous conseillons ";
  }

  75% {
    content: "d'ouvrir cette page ";
  }
  95% {
    content: "dans votre navigateur habituel";
  }

  100% {
    content: "";
  }
}

a.links {
  text-align: center;
  margin-top: 20px;
  padding: 20px;
  border: 4px solid var(--green);
  width: 290px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 40px;
  text-decoration: none;
  color: var(--red);
  transition: all 1s;
  background-color: var(--white);
}
a.first-link {
  margin-top: 30px;
}
/* Si vous êtes arrivé sur cette page en scannant un QR-code, nous vous conseillons 
		d'ouvrir cette page dans votre navigateur habituel, le navigateur intégré à votre application 
		de scan de QR-code ne rendra peut-être pas fidèlement le design des sites. */

.bottom-text a {
  display: block;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
  color: var(--white);
  text-decoration: none;
}

a.links:hover {
  color: var(--white);
  background: var(--black);
  border: 4px solid var(--red);
}
.bottom-text a:hover {
  color: var(--red);
}