* {
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    position: relative;
}

section {
    width: 100vw;
    height: auto;
    display: grid;
    grid-template-rows: repeat(10, 28vh);
    grid-template-columns: repeat(6, 1fr);
    grid-gap : 0.5vw;

    background-color: var(--color-1);
    background-image: url(images/fond.svg);
}

#grid-texte{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: auto;
    display: grid;
    grid-template-rows: repeat(10, 28vh);
    grid-template-columns: repeat(6, 1fr);
    grid-gap : 0.5vw;

}

article {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
}

div {
    position: relative;
}

#vide {
    grid-column: 1 / 7;
}

p {
    position: relative;
}

#p1 {
    grid-area: 3 / 2 / span 2 / span 3;
}

#p2 {
    grid-area: 4 / 5 / span 1/ span 2;
}

#p3 {
    grid-area: 5 / 4 / span 1/ span 2;
}

#p4 {
    grid-area: 6 / 3 / span 1/ span 3;
}

#p5 {
    grid-area: 7 / 5 / span 2 / span 2;
}

#p5-2 {
    grid-area: 7 / 5 / span 2 / span 2;
    position: relative;
    top: 20vh;
}

#p6 {
    grid-area: 8 / 3/ span 1 / span 2;
    top: 18vh;
}

#credits {
    font-size: calc(var(--size)*3.2);
    grid-area: 9 / 3 / span 1 / span 3;
    top: 16vh;
}

/* FORMES CERCLES ------------- */

.cercle {
    width: 12vw;
    height: 12vw;
    border-radius: 12vw;
}

.petit {
    position: relative;
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
}

.grand {
    position: absolute;
    width: 24vw;
    height: 24vw;
    border-radius: 24vw;
}


.shiftleft {
    left: 5vw;
}

.shifttop {
    top: 3vh;
}

.shiftbottom{
    bottom: 8vh;
}

#grandrouge, #pisc{
    top: 155vh;
}

#grandbleu {
    top: 230vh;
}

#orangefondu, #aries {
    bottom: 20vh;
}

#andro, #orion, #sagi, #forn {
    top: 22vh;
}

#forn, #orion {
    left: 10vw;
}

#grandorange {
    left: 85vw;
}

#grandbleu, #indus {
    left: 75vw;
}

#trou {
    right: 13vw;
}

/* KEYFRAMES ANIMATIONS ------------- */

@keyframes diagonal {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(0, 30vh);
      left : -50px;
    }
  }

  @keyframes horizontal {
    0% {
      transform: translate(-35vw, 0);
    }
    100% {
      transform: translate(2vw, 0);
      
    }
  }  

@keyframes surplace {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(0, 1.5vh);
    }
  }
  
  
@keyframes vertical {
    0% {
      transform: translate(0, -2vw);
    }
    100% {
      transform: translate(0, 2vw);
      
    }
  }