/* STRUCTURE GÉNÉRALE //////////////////////////////////////////////////*/

body {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  html, body{
    margin: 0;
}

body {
    animation: stars;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    background-color: #2f0024;
    margin: 0;
  }
  
  
  @keyframes stars {
    0% {background-image: url('../img/stars4.png');}
    20% {background-image: url('../img/stars.png');}
    40% {background-image: url('../img/stars2.png');}
    60% {background-image: url('../img/stars3.png');}
    80% {background-image: url('../img/stars2.png');}
    100% {background-image: url('../img/stars.png');}
  }


  
  /* GOLDEN RATIO //////////////////////////////////////////////////*/
  
  .container {
    width: 70vw;
    height: 43.2632880099vw;
    display: grid;
    grid-template-columns: 61.8% 9.02% 5.58% 23.6%;
    grid-template-rows: 61.8% 9.02% 5.58% 23.6%;
    grid-template-areas: "A B B B" "A E F C" "A E G C" "A D D C";
  }
  
  main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  
  .img{
    width: 100%;
    height: 100%;
    position: absolute;
  }
  
  .imgs{
    width: 100%;
    height: 100%;
    display: flex;
  }
  
  .item.a {
    grid-area: A;
     position: relative;
  }
  .item.b {
    grid-area: B;
    position: relative;
  }
  .item.c {
    grid-area: C;
    position: relative;
  }
  .item.d {
    grid-area: D;
    position: relative;
  }
  .item.e {
    grid-area: E;
    position: relative;
  }
  .item.f {
    grid-area: F;
    position: relative;
  }
  .item.g {
    grid-area: G;
    position: relative;
  }
  
  #endmouth {
    width: 100%;
  }

  @media only screen and (max-width: 600px) {
  .container{
    rotate: 90deg !important;
    -moz-transform: scale(2) !important;
    transform: scale(2) !important;
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
  }
  
}
  
  
  /* Animation //////////////////////////////////////////////////*/
  
  .itemspan1, .itemspan2, .itemspan3, .itemspan4, .itemspan5, .itemspan6, .itemspan7 {
    width: 100%;
    height: 100%;
    z-index: 100;
    background-size: cover;
  }
  
  @keyframes pixel {
    25% {background-image: url('../img/dog.jpg');}
    50% {background-image: url('../img/dogun.jpg');}
    100% {background-image: url('../img/dogdeux.jpg');}
  }
  
  .itemspan1:hover{
    animation: pixel;
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
  }
  
  @keyframes pixel2 {
    25% {background-image: url('../img/dog2.jpg');}
    50% {background-image: url('../img/dog21.jpg');}
    100% {background-image: url('../img/dog22.jpg');}
  }
  
  
  .itemspan2:hover{
    animation: pixel2;
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
  }
  
  @keyframes pixel3 {
    25% {background-image: url('../img/dog3.jpg');}
    50% {background-image: url('../img/dog31.jpg');}
    100% {background-image: url('../img/dog32.jpg');}
  }
  
  
  .itemspan3:hover{
    animation: pixel3;
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
  }
  
  
  @keyframes pixel4 {
    25% {background-image: url('../img/dog4.jpg');}
    50% {background-image: url('../img/dog41.jpg');}
    100% {background-image: url('../img/dog42.jpg');}
  }
  
  
  .itemspan4:hover{
    animation: pixel4;
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
  }
  
  @keyframes pixel5 {
    25% {background-image: url('../img/dog5.jpg');}
    50% {background-image: url('../img/dog51.jpg');}
    100% {background-image: url('../img/dog52.jpg');}
  }
  
  
  .itemspan5:hover{
    animation: pixel5;
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
  }
  
  @keyframes pixel6 {
    25% {background-image: url('../img/dog6.jpg');}
    50% {background-image: url('../img/dog61.jpg');}
    100% {background-image: url('../img/dog62.jpg');}
  }
  
  
  .itemspan6:hover{
    animation: pixel6;
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
  }