@import "style.css";
@font-face {
  font-family: "knorke";
  src: url("fonts/Knorke.ttf")
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
    filter:blur(0px);
  }
  100% {
    transform: rotate(360deg);
    filter:blur(50px);
  }
}

@keyframes rotate2 {
  0% {
    transform: rotate(40deg);
    filter:blur(0px);
  }
  100% {
    transform: rotate(180deg);
    filter:blur(90px);
  }
}

@keyframes hauteur {
from {height: 0%;}
to {height: 100%;}
  }

  @keyframes hauteur2 {
    from {height: 100%;}
    to {height: 0%;}
      }



/* :root permet de créer des variables  */
:root{
    --columns: 13;
    --rows: 9;
    --color: #792eca;
    --background: hsl(0, 0%, 0%);
}

.texte{font-family:"Knorke";}

.texte{
  text-align: center;
  margin:0px;
  animation: hauteur 5s infinite alternate;
  overflow: hidden;
}
.texte:hover{
animation: hauteur2 5s infinite alternate;

}






/*COULES*/
.B2{grid-area: 2 / 2 / 5 / 4; 
  border-radius: 70px;
  background: repeating-linear-gradient(
          190deg,
          rgb(247, 0, 255) 40px,
          rgba(0, 255, 234, 0.475) 80px,
          rgb(0, 255, 85) 120px,
          rgb(255, 0, 200) 160px,
          rgb(0, 0, 255) 200px,
          rgba(75, 0, 130, 0.5) 240px,
          rgb(238, 130, 200) 280px,
          rgb(200, 255, 0) 300px
        ), repeating-linear-gradient(
          -190deg,
          rgb(255, 0, 123) 30px,
          rgb(255, 153, 0) 60px,
          rgb(255, 255, 0) 90px,
          rgba(0, 255, 0, 0.5) 120px,
          rgba(0, 0, 255, 0.5) 150px,
          rgba(75, 0, 130, 0.5) 180px,
          rgb(238, 130, 238) 210px,
          rgba(255, 0, 0, 0.5) 230px
        ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
            200px, blue 250px, indigo 300px, violet 350px, red 370px);
            font-size: 4px;
            width: 44%;
            writing-mode: vertical-rl;
            text-orientation: upright;
            display: flex;
            margin: 0 auto;
  }

.B7{grid-area: 2 / 7 / 6 / 7; 
border-radius: 70px;
background: repeating-linear-gradient(
        190deg,
        rgb(247, 0, 255) 40px,
        rgba(0, 255, 234, 0.475) 80px,
        rgb(0, 255, 85) 120px,
        rgb(255, 0, 200) 160px,
        rgb(0, 0, 255) 200px,
        rgba(75, 0, 130, 0.5) 240px,
        rgb(238, 130, 200) 280px,
        rgb(200, 255, 0) 300px
      ), repeating-linear-gradient(
        -190deg,
        rgb(255, 0, 123) 30px,
        rgb(255, 153, 0) 60px,
        rgb(255, 255, 0) 90px,
        rgba(0, 255, 0, 0.5) 120px,
        rgba(0, 0, 255, 0.5) 150px,
        rgba(75, 0, 130, 0.5) 180px,
        rgb(238, 130, 238) 210px,
        rgba(255, 0, 0, 0.5) 230px
      ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
          200px, blue 250px, indigo 300px, violet 350px, red 370px);
          font-size: 4px;
          width: 60%;
          writing-mode: vertical-rl;
          text-orientation: upright;
          display: flex;
          margin: 0 auto;
}

.G2{grid-area: 7 / 2 / 9 / 5; 
  border-radius: 100px;
  background: repeating-linear-gradient(
    190deg,
    rgb(247, 0, 255) 40px,
    rgba(0, 255, 234, 0.475) 80px,
    rgb(0, 255, 85) 120px,
    rgb(255, 0, 200) 160px,
    rgb(0, 0, 255) 200px,
    rgba(75, 0, 130, 0.5) 240px,
    rgba(238, 130, 200, 0.724) 280px,
    rgba(200, 255, 0, 0.386) 300px
  ), repeating-linear-gradient(
    -190deg,
    rgba(255, 0, 123, 0.5) 30px,
    rgba(255, 153, 0, 0.5) 60px,
    rgba(255, 255, 0, 0.5) 90px,
    rgba(0, 255, 0, 0.5) 120px,
    rgba(0, 0, 255, 0.5) 150px,
    rgba(75, 0, 130, 0.5) 180px,
    rgba(238, 130, 238, 0.5) 210px,
    rgba(255, 0, 0, 0.5) 230px
  ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
      200px, blue 250px, indigo 300px, violet 350px, red 370px);
      font-size: 4px;
          width: 38%;
          writing-mode: vertical-rl;
          text-orientation: upright;
          display: flex;
          margin: 0 auto;
}

.I3{grid-area: 9 / 3 / 10 / 5; 
  border-radius: 60px;
  background: repeating-linear-gradient(
    190deg,
    rgb(247, 0, 255) 40px,
    rgba(0, 255, 234, 0.475) 80px,
    rgb(0, 255, 85) 120px,
    rgb(255, 0, 200) 160px,
    rgb(0, 0, 255) 200px,
    rgb(149, 0, 255) 240px,
    rgba(238, 130, 200, 0.724) 280px,
    rgb(200, 255, 0) 300px
  ), repeating-linear-gradient(
    -190deg,
    rgba(255, 0, 123, 0.5) 30px,
    rgba(255, 153, 0, 0.5) 60px,
    rgb(234, 0, 255) 90px,
    rgba(0, 255, 0, 0.5) 120px,
    rgba(0, 0, 255, 0.5) 150px,
    rgba(75, 0, 130, 0.5) 180px,
    rgba(238, 130, 238, 0.5) 210px,
    rgba(255, 0, 0, 0.5) 230px
  ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
      200px, blue 250px, indigo 300px, violet 350px, red 370px);
      font-size: 4px;
      width: 57%;
      writing-mode: vertical-rl;
      text-orientation: upright;
      display: flex;
      margin: 0 auto;
}

.D12{grid-area: 4 / 11 / 7 / 13; 
  border-radius: 70px;
    background: repeating-linear-gradient(
        190deg,
        rgb(136, 0, 255) 40px,
        rgb(0, 81, 255) 80px,
        rgb(69, 246, 213) 120px,
        rgb(0, 255, 0) 160px,
        rgb(0, 0, 255) 200px,
        rgba(75, 0, 130, 0.5) 240px,
        rgb(255, 98, 255) 280px,
        rgb(245, 42, 123) 300px
      ), repeating-linear-gradient(
        -190deg,
        rgb(170, 0, 255) 30px,
        rgb(13, 0, 255) 60px,
        rgb(0, 255, 247) 90px,
        rgb(0, 255, 0) 120px,
        rgb(0, 0, 255) 150px,
        rgba(75, 0, 130, 0.5) 180px,
        rgb(255, 0, 255) 210px,
        rgb(255, 0, 0) 230px
      ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
          200px, blue 250px, indigo 300px, violet 350px, red 370px);
          font-size: 4px;
          width: 35%;
          writing-mode: vertical-rl;
          text-orientation: upright;
          display: flex;
          margin: 0 auto;
}

.H11{grid-area: 8 / 10 / 9 / 14; 
  border-radius: 60px;
  background: repeating-linear-gradient(
    190deg,
    rgb(136, 0, 255) 40px,
    rgb(0, 26, 255) 80px,
    rgb(246, 69, 137) 120px,
    rgb(0, 255, 0) 160px,
    rgb(0, 0, 255) 200px,
    rgb(200, 123, 255) 240px,
    rgb(0, 157, 255) 280px,
    rgb(255, 74, 213) 300px
  ), repeating-linear-gradient(
    -190deg,
    rgb(212, 255, 0) 30px,
    rgb(13, 0, 255) 60px,
    rgb(0, 255, 217) 90px,
    rgb(0, 255, 0) 120px,
    rgb(255, 107, 193) 150px,
    rgb(157, 111, 233) 180px,
    rgb(255, 0, 255) 210px,
    rgb(255, 0, 0) 230px
  ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green
      200px, blue 250px, indigo 300px, violet 350px, red 370px);
      /* Single animation */
      font-size: 4px;
      width: 50%;
      writing-mode: vertical-rl;
      text-orientation: upright;
      display: flex;
      margin: 0 auto;
}







/*BATEAUX*/
.A5{grid-area: 1 / 5 / 3 / 6; 
  border-radius: 90px;
background:rgb(0, 4, 255);
animation: rotate 6s infinite alternate;}
  
  .box {
    background-color: rebeccapurple;
    border-radius: 10px;
    width: 100px;
    height: 100px;
  }
  
  /*background-image: url('image/bleupeau.jpg');}*/
.I6{grid-area: 9 / 6 / 10 / 7; 
  border-radius: 90px;
background:rgb(0, 4, 255);
animation: rotate 6s infinite alternate;
}

.F2{grid-area: 6 / 2 / 7 / 3; 
  border-radius: 90px;
  background:rgb(0, 13, 255);
  animation: rotate 6s infinite alternate;}
/*background: rgb(0, 4, 255);}*/
/*background-image: url('image/bleupeau.jpg');}*/

.G7{grid-area: 7 / 7 / 8 / 9; 
  border-radius: 70px;
  background:rgb(0, 13, 255);
  animation: rotate 6s infinite alternate;}


.C12{grid-area: 3 / 11 / 4 / 12; 
  border-radius: 90px;
background:rgb(0, 4, 255);
animation: rotate 6s infinite alternate;}

.E6{grid-area: 5 / 6 / 5 / 7; 
  border-radius: 90px;
background:rgb(0, 4, 255);
animation: rotate 6s infinite alternate;}

  .I8{grid-area: 9 / 8 / 9 / 9; 
    border-radius: 90px;
    background:rgb(0, 4, 255);
    animation: rotate 6s infinite alternate;}



    



   /*PLOUFS*/
.A3{grid-area: 1 / 3 / 1 / 3; 
  background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
  border-radius: 100px;
  filter: blur(30px);}
  
  .E3{grid-area: 5 / 3 / 5 / 4; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}

  .H1{grid-area: 8 / 1 / 8 / 2; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .I1{grid-area: 9 / 1 / 9 / 2; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .E4{grid-area: 5 / 4 / 5 / 5; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .F4{grid-area: 6 / 4 / 6 / 5; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .F5{grid-area: 6 / 5 / 6 / 6; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .H5{grid-area: 8 / 5 / 8 / 6; 
  background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
  border-radius: 100px;
  filter: blur(30px);}
  
  .C6{grid-area: 3 / 6 / 3 / 7; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .F7{grid-area: 6 / 7 / 6 / 8; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .H7{grid-area: 8 / 7 / 8 / 8; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .A8{grid-area: 1 / 8 / 2 / 9; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .C8{grid-area: 3 / 8 / 4 / 9; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .E10{grid-area: 5 / 9 / 5 / 10; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .G10{grid-area: 7 / 9 / 7 / 10; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .B11{grid-area: 2 / 10 / 2 / 11; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .D11{grid-area: 4 / 10 / 4 / 11; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .B11{grid-area: 2 / 10 / 2 / 11; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .A12{grid-area: 1 / 11 / 1 / 12; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .I12{grid-area: 9 / 11 / 9 / 12; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .B13{grid-area: 2 / 12 / 2 / 13; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}
  
  .E14{grid-area: 5 / 13 / 5 / 14; 
    background: radial-gradient(at 50% 50%, rgb(0, 15, 178) 6px, rgb(0, 0, 0) 90%);
    border-radius: 100px;
    filter: blur(30px);}

    @media only screen and (min-width: 1200px) {
      .page {
        background: black;
        
      }
.texte {}

.D12 p{
  position: relative;
  right: -6%;
}

    }