.Koko {
  margin-top: 100px;
}

  
  .box-1 {
    font-size: 30px;
    transition: all 1.5s;
      margin: 40px;
      padding: 30px;
      background: #ff61a5;
    }
    
    div:hover {
      background: #25ff46;
      color: #9900ff;
  }
  
  .box-2 {
    font-size: 30px;
    transition: color 1.5s;
    transition: all 1.5s;
      margin: 40px;
      padding: 30px;
      background: #1b6fff;
    }
    
    div:hover {
      background: #25ff46;
      color: #ff49bc;
  }
  
  .box-3 {
    font-size: 30px;
    transition: color 1.5s, background 0.2s;
    margin: 40px;
      padding: 30px;
      background: #61ffad;
    }

    div:hover {
      background: #f4ffbe;
      color: #ff0051;
  }
  
  .box-4 {
    font-size: 30px;
    transition: all 1.5s 0.5s;
    margin: 40px;
      padding: 30px;
      background: #ff3e3e;
  }
  
  .box-5 {
    font-size: 30px;
    transition: all 2.0s 1.5s;
    margin: 40px;
      padding: 30px;
      background: #b0ff61;
  }
  
  .box-5:hover {
    font-size: 30px;
    transition: all 0.2s;
    margin: 40px;
      padding: 30px;
      background: #ff3ec8;
  }

  .box-6 {
    font-size: 30px;
    transition: all 1.5s;
    margin: 40px;
      padding: 30px;
      background: #7161ff;
  }
  
  .box-7 {
    font-size: 30px;
    transition: color 1.5s;
    margin: 40px;
      padding: 30px;
      background: #61ffad;
  }
  
  .box-8 {
    font-size: 30px;
    transition: color 1.5s, background 0.2s;
    margin: 40px;
      padding: 30px;
      background: #f4ff61;
    
  }
  
  
  .box-9 {
    font-size: 30px;
    transition: all 1.5s 0.5s;
    margin: 40px;
      padding: 30px;
      background: #00e1ff;
  }
  
  .box-10 {
    font-size: 30px;
    transition: all 2.0s 1.5s;
    margin: 40px;
      padding: 30px;
      background: #ff2693;
  }
  
  .box-10:hover {
    font-size: 30px;
    transition: all 0.2s;
    margin: 40px;
      padding: 30px;
      background: #ffb11f;
  }

  body {
    background: repeating-linear-gradient(
        190deg,
        rgba(255, 138, 138, 0.5) 40px,
        rgba(255, 226, 183, 0.5) 80px,
        rgba(255, 255, 130, 0.5) 120px,
        rgba(0, 255, 0, 0.5) 160px,
        rgba(172, 172, 255, 0.5) 200px,
        rgba(75, 0, 130, 0.5) 240px,
        rgba(238, 130, 238, 0.5) 280px,
        rgba(198, 255, 132, 0.5) 300px
      ), repeating-linear-gradient(
        -190deg,
        rgba(255, 0, 0, 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);
  };