/* defaults */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* background-color: black; */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* font-smooth: always; */
    text-rendering: optimizeLegibility;
}

::selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

::-moz-selection {
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: black;
}

a :hover {
    z-index: 10000000;
}

.hidden {
    display: none;
}

@font-face {
  font-family: "Augustyn";
  src: url("../fonts/AugustynDisplayTrial.eot") format("eot"),
    url("../fonts/AugustynDisplayTrial.woff") format("woff"),
    url("../fonts/AugustynDisplayTrial.woff2") format("woff2");
}

@font-face {
  font-family: "Augustyn";
  src: url("../fonts/AugustynDisplayTrial.eot") format("eot"),
    url("../fonts/AugustynDisplayTrial.woff") format("woff"),
    url("../fonts/AugustynDisplayTrial.woff2") format("woff2");
}

@font-face {
  font-family: "Mediaan";
  src: url("../fonts/MediaanTrial-Regular.eot") format("eot"),
    url("../fonts/MediaanTrial-Regular.woff") format("woff"),
    url("../fonts/MediaanTrial-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Italic";
  src: url("../fonts/MediaanTrial-Italic.eot") format("eot"),
    url("../fonts/MediaanTrial-Italic.woff") format("woff"),
    url("../fonts/MediaanTrial-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Plain";
  src: url("../fonts/Plain-Regular.eot") format("eot"),
    url("../fonts/Plain-Regular.woff") format("woff"),
    url("../fonts/Plain-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Brown";
  src: url("../fonts/Brown-Regular.eot") format("eot"),
    url("../fonts/Brown-Regular.woff") format("woff"),
    url("../fonts/Brown-Regular.woff2") format("woff2");
}


/* Début de mon code  */

.fondbleu {
  background-color:  rgb(0, 150, 177) ;
}

.fondautomne {
  background-color: rgb(252, 113, 0);
}

.fondprintemps {
  background-color: rgb(167, 197, 110);

}

.fondhiver {
  background-color: rgb(95, 70, 66);

}

.noir {
    background-color: black;
    -webkit-transition: all 2s linear 1s;
    -moz-transition: all 2s linear 1s;
    -o-transition: all 2s linear 1s;
    transition: all 2s linear 1s;
}

.invisible {
  opacity: 0%;
  /* -webkit-transition: all 2s linear 1s;
    -moz-transition: all 2s linear 1s;
    -o-transition: all 2s linear 1s;
    transition: all 2s linear 1s; */
    animation-name: example;
    animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

.invisible2 {
  opacity: 0%;
  /* -webkit-transition: all 2s linear 1s;
    -moz-transition: all 2s linear 1s;
    -o-transition: all 2s linear 1s;
    transition: all 2s linear 1s; */
    animation-name: example;
    animation-duration: 3s;
    animation-delay: 2.5s;
    -webkit-animation-fill-mode: forwards;
}


@keyframes example {
  0%   {opacity: 0%;}
  100% {opacity: 100%;}
}




/* Ce serait mieux d'appliquer le fond à un div plutôt qu'au body non ? */
/* .fond {
    position: fixed;
    background-color: rebeccapurple;
    height: 100%;
    width: 100%;
} */

/* .fond {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
} */

.hiver {
background-color: rgb(95, 70, 66);
}

.printemps {
    background-color: rgb(167, 197, 110);
}

.été {
    background-color: rgb(0, 150, 177);
}

.automne {
    background-color: rgb(252, 113, 0);
}

.saison {
    color: white;
    font-family: Plain;
    mix-blend-mode: difference;
    font-size: 3vw;
    margin: 0;
  position: absolute;
  bottom: 0%;
  left: 75%;
  transform: translate(-50%, -50%);
}

.rouleaux {
    color: white;
    mix-blend-mode: difference;
    font-size: 3vw;
    font-family: Plain;
    margin: 0;
  position: absolute;
  bottom: 0%;
  left: 25%;
  transform: translate(-50%, -50%);
}



.titre {
    font-size: 5vw;
    z-index: 100000;
    font-family: Plain;
      padding-top: 1rem;
      padding-bottom: 1rem;
      justify-content: center;
      align-items: center;
      text-align: center;
      overflow: hidden;
      color: white;
    }

.monde {
    width: 40vw;
    height: 40vw;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
    border-radius: 50%;
  }
  
  .monde:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: -20px -20px 50px 2px #000 inset;
    border-radius: 50%;
  }
  
  .monde > div {
    width: 200%;
    height: 100%;
    animation: spin 60s linear infinite;
    animation-direction: normal;
    background: url(https://storage.googleapis.com/gweb-uniblog-publish-prod/images/New-global-view.max-1000x1000.jpeg);
    /* -webkit-filter: grayscale(100%);
    filter: grayscale(100%); */
    background-size: cover;
  }
  @keyframes spin {
    to {
      transform: translateX(-50%);
    }
  }

.calendrier {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

a {
    color: white;
}

.bouton {
    font-size: 2vw;
    font-family: Plain;
    background-color: rgb(0, 0, 0);
    color: white;
    margin: 0;
  position: absolute;
  padding: 0.5% 0.5% 0.5% 0.5% ;
  bottom: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
    border-radius: 10%;
    transition: border-radius 1s, mix-blend-mode 1s;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.display {
  display: initial;
}

.bouton:hover{
  border-radius: 35%;
}


.finete {
  animation: colorchange 4s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: forwards;
}

@keyframes colorchange {
  0% { background: rgb(0, 150, 177)}
  100% { background: rgb(0, 0, 0) }
}

.finprintemps {
  animation: colorchangeprintemps 4s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: forwards;
}

@keyframes colorchangeprintemps {
  0% { background: rgb(167, 197, 110)}
  100% { background: rgb(0, 0, 0) }
}

.finautomne {
  animation: colorchangeautomne 4s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: forwards;
}

@keyframes colorchangeautomne {
  0% { background: rgb(252, 113, 0)}
  100% { background: rgb(0, 0, 0) }
}

.finhiver {
  animation: colorchangehiver 4s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: forwards;
}

@keyframes colorchangehiver {
  0% { background: rgb(95, 70, 66)}
  100% { background: rgb(0, 0, 0) }
}


/* */