@charset "UTF-8";
body, html {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  color: #fff;
}

.header, .présentation, .compétences, .contact, .footer {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.content {
  position: absolute;
  z-index: 45;
  width: 90vw;
  bottom: 40%;
  left: 50%;
  transform: translate(-50%, 0%);
}

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}

p {
  line-height: 140%;
  font-family: "work sans";
  font-size: 18px;
  margin: 0;
  margin-bottom: 18px;
}

a {
  line-height: 140%;
  font-family: "work sans";
  font-size: 18px;
  margin: 0;
  text-decoration: none;
  color: black;
}

h1 {
  line-height: 140%;
  font-family: "Header font";
  font-size: 72px;
  margin-top: 0;
  text-shadow: 0px 0px 5px black;
}

h2 {
  line-height: 140%;
  font-family: "forum";
  font-size: 51px;
  text-align: center;
  margin: 0;
  margin-bottom: 51px;
}

h3 {
  line-height: 140%;
  font-family: "forum";
  font-size: 25px;
  margin-bottom: 25px;
  text-shadow: 0px 0px 5px black;
}

.parallax {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.parallax__layer {
  width: 100%;
  height: 100%;
  background-size: 100vw 100vh;
  background-position: center;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.ground {
  width: 100%;
  height: 5vh;
  background-color: black;
  position: absolute;
  bottom: 0;
  z-index: 50;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.platform-left {
  width: 20vh;
  height: 5vh;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 50vh;
  z-index: 50;
  left: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.platform-right {
  width: 20vh;
  height: 5vh;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 50vh;
  right: 0;
  z-index: 50;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.avatar {
  width: 10vh;
  height: 15vh;
  position: absolute;
  z-index: 100;
  background-repeat: no-repeat;
  background-size: cover;
  top: 680vh;
  right: calc(50vw - 5vh);
  opacity: 1;
}

.avatar-text {
  min-width: 150px;
  max-width: 180px;
  padding: 9px;
  display: inline;
  position: absolute;
  z-index: 99;
  margin: 0;
  background-color: #585958;
  color: #fff;
  text-shadow: none;
  border-radius: 15px;
  display: none;
}

@media only screen and (min-width: 700px) {
  .avatar-text {
    max-width: 200px;
  }
  .avatar-text p {
    font-size: 20px;
  }
}
.bat {
  width: 15vw;
  height: 9vw;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-animation: batAnim 0.3s infinite linear;
          animation: batAnim 0.3s infinite linear;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.panneau {
  width: 10vh;
  height: 15vh;
  right: calc(55vw + 5vh);
  bottom: 5vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  z-index: 80;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

@font-face {
  font-family: "Header font";
  src: url(../assets/fonts/ringbearer-font/RingbearerMedium-51mgZ.ttf);
}
@font-face {
  font-family: "forum";
  src: url(../assets/fonts/Forum/Forum-Regular.ttf);
}
@font-face {
  font-family: "work sans";
  src: url(../assets/fonts/Work_Sans/WorkSans-VariableFont_wght.ttf);
}
.avatar-left {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/gandalf-left.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.avatar-right {
  width: 100%;
  height: 100%;
  background-image: url(../assets/images/gandalf-right.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.bat {
  background-image: url(../assets/images/bats.png);
}

.header {
  background-color: #A34343;
}
.header__title {
  text-align: center;
  margin-bottom: 25px;
}
.header__slogan {
  text-align: center;
}
.header__avatar {
  width: 10vh;
  height: 15vh;
  position: absolute;
  z-index: 100;
  background-image: url(../assets/images/gandalf-right.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: 80vh;
  right: calc(50vw - 5vh);
  display: none;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.header__avatar-text-center {
  bottom: 21vh;
  left: 50vw;
  border-bottom-left-radius: 0;
}
.header__avatar-text-right {
  bottom: 71vh;
  right: 20vh;
  border-bottom-right-radius: 0;
}
.header .platform-right {
  background-image: url(../assets/images/plateforme_right.png);
}
.header__parallax__layer--front {
  background-image: url(../assets/images/mobile/parallax_front.png);
  z-index: 40;
}
.header__parallax__layer--middle-1 {
  background-image: url(../assets/images/mobile/parallax_middle_1_rouge.png);
  z-index: 30;
}
.header__parallax__layer--middle-2 {
  background-image: url(../assets/images/mobile/parallax_middle_2_rouge.png);
  z-index: 20;
}
.header__parallax__layer--back {
  background-image: url(../assets/images/mobile/parallax_back_rouge.png);
  z-index: 10;
}

@media only screen and (min-width: 700px) {
  .header__title {
    margin-bottom: 28px;
    font-size: 80px;
  }
  .header__slogan {
    font-size: 28px;
  }
  .header__parallax__layer--front {
    background-image: url(../assets/images/parallax_front.png);
    z-index: 40;
  }
  .header__parallax__layer--middle-1 {
    background-image: url(../assets/images/prallax_middle_1_rouge.png);
    z-index: 30;
  }
  .header__parallax__layer--middle-2 {
    background-image: url(../assets/images/prallax_middle_2_rouge.png);
    z-index: 20;
  }
  .header__parallax__layer--back {
    background-image: url(../assets/images/parallax_back_rouge.png);
    z-index: 10;
  }
}
.présentation {
  background-color: #4373A5;
  position: relative;
  text-shadow: 0px 0px 5px black;
}
.présentation .content {
  bottom: 35vh;
}
.présentation__title {
  margin-bottom: 25px;
}
.présentation__avatar-text-left {
  bottom: 71vh;
  left: 20vh;
  border-bottom-left-radius: 0;
}
.présentation .platform-left {
  background-image: url(../assets/images/plateforme.png);
}
.présentation__parallax__layer--front {
  background-image: url(../assets/images/mobile/parallax_front.png);
  z-index: 40;
}
.présentation__parallax__layer--middle-1 {
  background-image: url(../assets/images/mobile/parallax_middle_1_bleu.png);
  z-index: 30;
}
.présentation__parallax__layer--middle-2 {
  background-image: url(../assets/images/mobile/parallax_middle_2_bleu.png);
  z-index: 20;
}
.présentation__parallax__layer--back {
  background-image: url(../assets/images/mobile/parallax_back_bleu.png);
  z-index: 10;
}

@media only screen and (min-width: 700px) {
  .présentation .content {
    bottom: 40vh;
    width: 70%;
    max-width: 700px;
  }
  .présentation__title {
    margin-bottom: 28px;
    font-size: 56px;
  }
  .présentation__text {
    max-height: auto;
    overflow: none;
  }
  .présentation p {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .présentation__parallax__layer--front {
    background-image: url(../assets/images/parallax_front.png);
    z-index: 40;
  }
  .présentation__parallax__layer--middle-1 {
    background-image: url(../assets/images/prallax_middle_1_bleu.png);
    z-index: 30;
  }
  .présentation__parallax__layer--middle-2 {
    background-image: url(../assets/images/prallax_middle_2_bleu.png);
    z-index: 20;
  }
  .présentation__parallax__layer--back {
    background-image: url(../assets/images/parallax_back_bleu.png);
    z-index: 10;
  }
}
@media only screen and (min-width: 1200px) {
  .présentation__title {
    margin-bottom: 56px;
    font-size: 56px;
  }
}
.compétences {
  background-color: #D4C991;
}
.compétences .content {
  bottom: 30%;
}
.compétences .compétence {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.compétences .compétence__logo {
  width: 15vw;
  height: 17vw;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.compétences .compétence__bats {
  display: flex;
}
@-webkit-keyframes batAnim {
  0% {
    background-image: url(../assets/images/bats.png);
  }
  50% {
    background-image: url(../assets/images/bats.png);
  }
  51% {
    background-image: url(../assets/images/bats_2.png);
  }
  100% {
    background-image: url(../assets/images/bats_2.png);
  }
}
@keyframes batAnim {
  0% {
    background-image: url(../assets/images/bats.png);
  }
  50% {
    background-image: url(../assets/images/bats.png);
  }
  51% {
    background-image: url(../assets/images/bats_2.png);
  }
  100% {
    background-image: url(../assets/images/bats_2.png);
  }
}
.compétences .compétence:nth-child(1) .compétence__logo {
  background-image: url(../assets/images/logo_html.png);
  -webkit-animation: htmlLogoAnim 0.3s infinite linear;
          animation: htmlLogoAnim 0.3s infinite linear;
}
@-webkit-keyframes htmlLogoAnim {
  0% {
    background-image: url(../assets/images/logo_html.png);
  }
  50% {
    background-image: url(../assets/images/logo_html.png);
  }
  51% {
    background-image: url(../assets/images/logo_html_2.png);
  }
  100% {
    background-image: url(../assets/images/logo_html_2.png);
  }
}
@keyframes htmlLogoAnim {
  0% {
    background-image: url(../assets/images/logo_html.png);
  }
  50% {
    background-image: url(../assets/images/logo_html.png);
  }
  51% {
    background-image: url(../assets/images/logo_html_2.png);
  }
  100% {
    background-image: url(../assets/images/logo_html_2.png);
  }
}
.compétences .compétence:nth-child(2) .compétence__logo {
  background-image: url(../assets/images/logo_css.png);
  -webkit-animation: cssLogoAnim 0.3s infinite linear;
          animation: cssLogoAnim 0.3s infinite linear;
}
@-webkit-keyframes cssLogoAnim {
  0% {
    background-image: url(../assets/images/logo__css_2.png);
  }
  50% {
    background-image: url(../assets/images/logo__css_2.png);
  }
  51% {
    background-image: url(../assets/images/logo_css.png);
  }
  100% {
    background-image: url(../assets/images/logo_css.png);
  }
}
@keyframes cssLogoAnim {
  0% {
    background-image: url(../assets/images/logo__css_2.png);
  }
  50% {
    background-image: url(../assets/images/logo__css_2.png);
  }
  51% {
    background-image: url(../assets/images/logo_css.png);
  }
  100% {
    background-image: url(../assets/images/logo_css.png);
  }
}
.compétences .compétence:nth-child(3) .compétence__logo {
  background-image: url(../assets/images/logo_js.png);
  -webkit-animation: jsLogoAnim 0.3s infinite linear;
          animation: jsLogoAnim 0.3s infinite linear;
}
@-webkit-keyframes jsLogoAnim {
  0% {
    background-image: url(../assets/images/logo_js.png);
  }
  50% {
    background-image: url(../assets/images/logo_js.png);
  }
  51% {
    background-image: url(../assets/images/logo_js_2.png);
  }
  100% {
    background-image: url(../assets/images/logo_js_2.png);
  }
}
@keyframes jsLogoAnim {
  0% {
    background-image: url(../assets/images/logo_js.png);
  }
  50% {
    background-image: url(../assets/images/logo_js.png);
  }
  51% {
    background-image: url(../assets/images/logo_js_2.png);
  }
  100% {
    background-image: url(../assets/images/logo_js_2.png);
  }
}
.compétences .compétence:nth-child(4) .compétence__logo {
  background-image: url(../assets/images/logo_illustrator.png);
  -webkit-animation: illustratorLogoAnim 0.3s infinite linear;
          animation: illustratorLogoAnim 0.3s infinite linear;
}
@-webkit-keyframes illustratorLogoAnim {
  0% {
    background-image: url(../assets/images/logo_illustrator.png);
  }
  50% {
    background-image: url(../assets/images/logo_illustrator.png);
  }
  51% {
    background-image: url(../assets/images/logo_illustrator_2.png);
  }
  100% {
    background-image: url(../assets/images/logo_illustrator_2.png);
  }
}
@keyframes illustratorLogoAnim {
  0% {
    background-image: url(../assets/images/logo_illustrator.png);
  }
  50% {
    background-image: url(../assets/images/logo_illustrator.png);
  }
  51% {
    background-image: url(../assets/images/logo_illustrator_2.png);
  }
  100% {
    background-image: url(../assets/images/logo_illustrator_2.png);
  }
}
.compétences .compétence:nth-child(5) .compétence__logo {
  background-image: url(../assets/images/logo_figma.png);
  -webkit-animation: figmaLogoAnim 0.3s infinite linear;
          animation: figmaLogoAnim 0.3s infinite linear;
}
@-webkit-keyframes figmaLogoAnim {
  0% {
    background-image: url(../assets/images/logo_figma.png);
  }
  50% {
    background-image: url(../assets/images/logo_figma.png);
  }
  51% {
    background-image: url(../assets/images/logo_figma_2.png);
  }
  100% {
    background-image: url(../assets/images/logo_figma_2.png);
  }
}
@keyframes figmaLogoAnim {
  0% {
    background-image: url(../assets/images/logo_figma.png);
  }
  50% {
    background-image: url(../assets/images/logo_figma.png);
  }
  51% {
    background-image: url(../assets/images/logo_figma_2.png);
  }
  100% {
    background-image: url(../assets/images/logo_figma_2.png);
  }
}
.compétences__avatar-text-right {
  bottom: 71vh;
  right: 20vh;
  border-bottom-right-radius: 0;
}
.compétences .platform-right {
  background-image: url(../assets/images/plateforme_right.png);
}
.compétences .panneau {
  background-image: url(../assets/images/panneau_skills.png);
}
.compétences__parallax__layer--front {
  background-image: url(../assets/images/mobile/parallax_front.png);
  z-index: 40;
}
.compétences__parallax__layer--middle-1 {
  background-image: url(../assets/images/mobile/parallax_middle_1_brun.png);
  z-index: 30;
}
.compétences__parallax__layer--middle-2 {
  background-image: url(../assets/images/mobile/parallax_middle_2_brun.png);
  z-index: 20;
}
.compétences__parallax__layer--back {
  background-image: url(../assets/images/mobile/parallax_back_brun.png);
  z-index: 10;
}

@media only screen and (min-width: 700px) {
  .compétences .content {
    width: auto;
    max-width: 800px;
    display: inline-block;
  }
  .compétences .compétence {
    margin-bottom: 20px;
  }
  .compétences .compétence .bat {
    width: 85px;
    height: 54px;
  }
  .compétences .compétence .compétence__logo {
    width: 85px;
    height: 80px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .compétences__parallax__layer--front {
    background-image: url(../assets/images/parallax_front.png);
    z-index: 40;
  }
  .compétences__parallax__layer--middle-1 {
    background-image: url(../assets/images/prallax_middle_1_brun.png);
    z-index: 30;
  }
  .compétences__parallax__layer--middle-2 {
    background-image: url(../assets/images/prallax_middle_2_brun.png);
    z-index: 20;
  }
  .compétences__parallax__layer--back {
    background-image: url(../assets/images/parallax_back_brun.png);
    z-index: 10;
  }
}
.projets {
  background-color: #B78170;
  overflow: hidden;
  color: black;
}
.projets .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom: 30vh;
}
.projets__projet:nth-child(1) .projets__assets a {
  background-image: url(../assets/images/image_pdni.jpg);
}
.projets__projet:nth-child(2) .projets__assets a {
  background-image: url(../assets/images/livre_rama.jpg);
}
.projets__projet:nth-child(3) .projets__assets a {
  background-image: url(../assets/images/image_rux.png);
}
.projets__description {
  margin-bottom: 18px;
}
.projets__title {
  margin-bottom: 25px;
}
.projets__text p:nth-child(2) {
  display: none;
}
.projets__text p:nth-child(3) {
  display: none;
}
.projets__assets {
  width: 85vw;
  height: 50vw;
  margin: 0 auto;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 0px 0px 5px #633A2E;
}
.projets__assets a {
  background-image: url(../assets/images/image_pdni.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.projets__assets a:hover {
  scale: 1.2;
  cursor: pointer;
  transition: 0.5s;
}
.projets__avatar {
  width: 10vh;
  height: 15vh;
  position: absolute;
  z-index: 100;
  background-image: url(../assets/images/gandalf_droite_copie.gif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: 80vh;
  right: calc(50vw - 5vh);
  opacity: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.projets__avatar-text-right {
  bottom: 71vh;
  right: 20vh;
  border-bottom-right-radius: 0;
}
.projets .platform-right {
  background-image: url(../assets/images/plateforme_right.png);
}
.projets__link {
  background-image: url(../assets/images/projets__porte.png);
  position: absolute;
  bottom: 5vh;
  right: 5vw;
  height: 20vh;
  width: 16vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.projets__liste {
  width: 300vw;
  height: 100vh;
  background-image: url(../assets/images/mobile/background_projets.png);
  display: flex;
  transform: translateX(-200vw);
}
.projets__projet {
  width: 100vw;
  height: 100vh;
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.projets__projet:nth-child(1) {
  background-image: url(../assets/images/mobile/background_projets_decembre.png);
}
.projets__projet:nth-child(2) {
  background-image: url(../assets/images/mobile/background_projets_rux.png);
}
.projets__projet:nth-child(3) {
  background-image: url(../assets/images/mobile/background_projets_dataplay.png);
}
.projets__projet .panneau {
  background-image: url(../assets/images/panneau_projets.png);
}

@media only screen and (min-width: 700px) {
  .projets .content {
    max-width: 700px;
  }
  .projets__description {
    margin-bottom: 20px;
  }
  .projets__title {
    margin-bottom: 28px;
    font-size: 56px;
  }
  .projets__text p {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .projets__text p:nth-child(2) {
    display: block;
  }
  .projets__text p:nth-child(3) {
    display: block;
  }
  .projets__assets {
    width: 500px;
    height: 300px;
  }
  .projets__assets a {
    background-image: url(../assets/images/image-pdni@1.5x.jpg);
  }
  .projets__liste {
    background-image: none;
  }
  .projets__projet:nth-child(1) {
    background-image: url(../assets/images/tab/background_projets_1.png);
  }
  .projets__projet:nth-child(2) {
    background-image: url(../assets/images/tab/background_projets_2.png);
  }
  .projets__projet:nth-child(3) {
    background-image: url(../assets/images/tab/background_projets_3.png);
  }
}
@media only screen and (min-width: 1200px) {
  .projets .content {
    flex-direction: row;
    gap: 20px;
    bottom: 30vh;
    width: 70vw;
    max-width: 1200px;
  }
  .projets__description {
    width: 40vw;
  }
  .projets__title {
    text-align: left;
  }
  .projets__assets {
    width: 30vw;
    height: 20vw;
  }
  .projets__assets a {
    background-image: url(../assets/images/image_pdni@2x.jpg);
  }
  .projets__liste {
    background-image: url(../assets/images/background_projets.png);
  }
  .projets__projet:nth-child(1) {
    background-image: url(../assets/images/background_projets_1.png);
  }
  .projets__projet:nth-child(2) {
    background-image: url(../assets/images/background_projets_2.png);
  }
  .projets__projet:nth-child(3) {
    background-image: url(../assets/images/background_projets_3.png);
  }
}
.contact {
  background-color: #FBE9E4;
  color: black;
  text-shadow: 0px 0px 10px rgb(255, 255, 255);
}
.contact .content {
  bottom: 30vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact__title {
  margin-bottom: 25px;
}
.contact__text p {
  text-align: center;
}
.contact__link {
  display: inline-block;
}
.contact__link a {
  width: 15vh;
  height: 13vh;
  background-image: url(../assets/images/contact_bat_1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  cursor: pointer;
  -webkit-animation: animBatContact 0.3s infinite linear;
          animation: animBatContact 0.3s infinite linear;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.contact__avatar-text-left {
  bottom: 71vh;
  left: 20vh;
  border-bottom-left-radius: 0;
}
.contact .platform-left {
  background-image: url(../assets/images/plateforme.png);
}
.contact__parallax__layer--front {
  background-image: url(../assets/images/mobile/parallax_front.png);
  z-index: 40;
}
.contact__parallax__layer--middle-1 {
  background-image: url(../assets/images/mobile/parallax_middle_1_rose.png);
  z-index: 30;
}
.contact__parallax__layer--middle-2 {
  background-image: url(../assets/images/mobile/parallax_middle_2_rose.png);
  z-index: 20;
}
.contact__parallax__layer--back {
  background-image: url(../assets/images/mobile/parallax_back_rose.png);
  z-index: 10;
}

@-webkit-keyframes animBatContact {
  0% {
    background-image: url(../assets/images/contact_bat_1.png);
  }
  50% {
    background-image: url(../assets/images/contact_bat_1.png);
  }
  51% {
    background-image: url(../assets/images/contact_bat_2.png);
  }
  100% {
    background-image: url(../assets/images/contact_bat_2.png);
  }
}

@keyframes animBatContact {
  0% {
    background-image: url(../assets/images/contact_bat_1.png);
  }
  50% {
    background-image: url(../assets/images/contact_bat_1.png);
  }
  51% {
    background-image: url(../assets/images/contact_bat_2.png);
  }
  100% {
    background-image: url(../assets/images/contact_bat_2.png);
  }
}
@media only screen and (min-width: 700px) {
  .contact .content {
    width: 70vw;
    max-width: 700px;
    bottom: 35vh;
  }
  .contact__title {
    margin-bottom: 28px;
    font-size: 56px;
  }
  .contact__text p {
    margin-bottom: 20px;
    font-size: 20px;
  }
  .contact__parallax__layer--front {
    background-image: url(../assets/images/parallax_front.png);
    z-index: 40;
  }
  .contact__parallax__layer--middle-1 {
    background-image: url(../assets/images/parallax_middle_1_rose.png);
    z-index: 30;
  }
  .contact__parallax__layer--middle-2 {
    background-image: url(../assets/images/prallax_middle_2_rose.png);
    z-index: 20;
  }
  .contact__parallax__layer--back {
    background-image: url(../assets/images/parallax_back_rose.png);
    z-index: 10;
  }
}
.footer {
  background-color: #FBE9E4;
}
.footer .content {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 90;
  top: 0;
}
.footer__liste {
  position: absolute;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  top: 5vh;
}
.footer__liste .footer__link {
  width: 30vw;
  height: 20vw;
  max-width: 200px;
  max-height: 130px;
  background-image: url(../assets/images/nuage.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer__liste a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer__liste a:hover {
  text-decoration: underline;
  cursor: pointer;
}
.footer__liste a:active {
  font-weight: bold;
}
.footer__avatar-text-center {
  bottom: 21vh;
  right: 50vw;
  border-bottom-right-radius: 0;
  display: block;
}
.footer__parallax__layer--front {
  background-image: url(../assets/images/mobile/footer_front.png);
  z-index: 40;
  background-repeat: no-repeat;
}
.footer__parallax__layer--middle {
  background-image: url(../assets/images/mobile/footer_middle.png);
  z-index: 30;
  background-repeat: no-repeat;
}
.footer__parallax__layer--back {
  background-image: url(../assets/images/mobile/footer_back.png);
  z-index: 10;
  background-repeat: no-repeat;
}

@media only screen and (min-width: 700px) {
  .footer__liste a {
    font-size: 20px;
  }
  .footer__parallax__layer--front {
    background-image: url(../assets/images/tab/footer_front.png);
  }
  .footer__parallax__layer--middle {
    background-image: url(../assets/images/tab/footer_middle.png);
  }
  .footer__parallax__layer--back {
    background-image: url(../assets/images/tab/footer_back.png);
  }
}
@media only screen and (min-width: 1200px) {
  .footer__parallax__layer--front {
    background-image: url(../assets/images/footer_front.png);
  }
  .footer__parallax__layer--middle {
    background-image: url(../assets/images/footer_middle.png);
  }
  .footer__parallax__layer--back {
    background-image: url(../assets/images/footer_back.png);
  }
}

/*# sourceMappingURL=app.css.map*/