@font-face {
  font-family: brush;
  src: url('../fonts/BrushHandNew.ttf');
}
@font-face {
  font-family: berlin;
  src: url('../fonts/BerlinSansFB.ttf');
}
html {
  background-image: url(../images/bg.jpg);
  background-size: 100vw 100vh;
  background-attachment: fixed;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: brush;
}
p,
li {
  font-family: berlin;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #000000;
}
@keyframes defilement {
  100% {
    background-position: -100vw;
  }
}
#backgroundAnim div {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-size: 100vw 100vh;
  background-attachment: fixed;
}
#backgroundAnim #soleil {
  z-index: -1;
  background-image: url(../images/bg_soleil.png);
}
#backgroundAnim #nuages-proche {
  z-index: -2;
  background-image: url(../images/bg_nuages_proche.png);
  animation: defilement 25s linear infinite;
}
#backgroundAnim #atmos {
  z-index: -3;
  background-image: url(../images/bg_atmos.png);
}
#backgroundAnim #nuages-loin {
  z-index: -4;
  background-image: url(../images/bg_nuages_loin.png);
  animation: defilement 30s linear infinite;
}

footer {
  display: block;
  position: fixed;
  bottom: 0;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: #b0cede;
}
#accueil {
  display: block;
  background-image: url(../images/accueil_nuage.png);
  background-size: 100% 100%;
  width: 85vw;
  height: 560px;
  margin: 10vh auto 0 auto;
  text-align: center;
}
#accueil h2 {
  font-size: 50px;
  width: 65vw;
  text-align: center;
  margin: 15px auto;
  padding-top: 200px;
  /* padding-top: 170px; */
}
#accueil p {
  font-size: 26px;
  width: 60vw;
  margin: 15px auto;
}
#accueil #btn-accueil {
  width: 60vw;
  margin: 15px auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
#accueil #btn-accueil .btn {
  font-family: brush;
  font-size: 26px;
  text-align: center;
  color: #e8f1f6;
  width: 260px;
  padding: 18px 0;
  background-image: url(../images/accueil_btn.png);
  background-size: 100% 100%;
  flex: 0 1 auto;
  user-select: none;
}
#accueil #btn-accueil .btn:hover {
  filter: hue-rotate(180deg);
  /*à remplacer (marche pas dans IE)*/
}
#btnNuage {
  position: fixed;
  top: 5px;
  left: 5px;
  width: 160px;
  padding: 18px 0;
  font-family: brush;
  font-size: 20px;
  color: #e8f1f6;
  text-align: center;
  background-image: url(../images/accueil_btn.png);
  background-size: 100% 100%;
  user-select: none;
}
#btnNuage:hover {
  filter: hue-rotate(180deg);
  /*à remplacer (marche pas dans IE)*/
}