body {


    background: linear-gradient(167deg, #fff8dc, #c6c4bb, #000000);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:45% 0%}
    50%{background-position:56% 100%}
    100%{background-position:45% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:45% 0%}
    50%{background-position:56% 100%}
    100%{background-position:45% 0%}
}
@keyframes AnimationName {
    0%{background-position:45% 0%}
    50%{background-position:56% 100%}
    100%{background-position:45% 0%}
}


#mouse{
  position:absolute;
  }

.wrapper

  
          html, body {
              height: 100%;
              margin: 0;
          }
  
          .wrapper {
              display: flex;
              flex-wrap: wrap;
              height: 100%;
          }

          .row {
            display: flex;
            flex-direction: row;
            flex: 5;
          }
  
          .column {
              display: flex;
              flex-direction: column;
              flex: 1;
          }
  
          .column > div {
              font-size: 1.5vh;
              font-family: 'Roboto mono', monospace;
              color: rgb(0, 0, 0);
             /* background-color: rgb(104, 194, 43); */
              margin: .1em;
              padding: 3em 1em;
              border-radius: 3px;
              flex: 1;
          }

          .middleparent {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(3, 1fr);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            }
            
            .div1 { grid-area: 1 / 1 / 2 / 3; }
            .div2 { grid-area: 1 / 3 / 2 / 6; }
            .div3 { grid-area: 2 / 1 / 4 / 5; }
            .div4 { grid-area: 2 / 5 / 4 / 6; }

          .parent {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(12, 1fr);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            }
            
            .div1 { grid-area: 1 / 1 / 4 / 2; }
            .div2 { grid-area: 4 / 1 / 9 / 2; }
            .div3 { grid-area: 12 / 1 / 13 / 4; }
            .div4 { grid-area: 10 / 3 / 12 / 5; }
            .div5 { grid-area: 7 / 2 / 10 / 3; }
            .div6 { grid-area: 10 / 1 / 12 / 3; }
            .div7 { grid-area: 9 / 1 / 10 / 2; }
            .div8 { grid-area: 1 / 3 / 6 / 5; }
            .div9 { grid-area: 1 / 5 / 2 / 6; }
            .div10 { grid-area: 2 / 5 / 8 / 6; }
            .div11 { grid-area: 1 / 2 / 7 / 3; }
            .div12 { grid-area: 12 / 4 / 13 / 5; }
            .div13 { grid-area: 8 / 5 / 13 / 6; }
            .div14 { grid-area: 6 / 3 / 9 / 4; }
            .div15 { grid-area: 9 / 3 / 10 / 5; }
            .div16 { grid-area: 6 / 4 / 7 / 5; }
            .div17 { grid-area: 7 / 4 / 9 / 5; }




  #grid {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
  #grid > div {
    font-family: 'Work Sans', sans-serif;
    padding: 10px;
  }
  #grid > div:nth-child(1) {
    grid-column: span 2;
  }
  #grid > div:nth-child(2) {
    grid-row: span 4;
  }
  #grid > div:nth-child(9) {
    grid-column: span 3;
  }

  #invisible {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
  
  }


  #invisible > div {
    opacity: 100;
    color: rgb(0, 0, 0);
    font-size: 1.5vh;
    font-family: 'Roboto mono', monospace;
    font-style: normal;
  } 

    
  #moving {
    display: grid;
    grid: auto auto auto / auto auto auto;
    gap: 10px;
    animation: myAnimation 15s ease 10s alternate forwards;
    animation-iteration-count: infinite;
  }
  #moving > div {
    background-color: 'green';
    color: rgb(0, 0, 0);
    font-size: 1.5vh;
    font-family: 'Roboto mono', monospace;
  
    padding: 10px;
    font-style: italic;
  } 
  @keyframes myAnimation {
    30% {
    gap: 30px;
    }
    60% {
    gap: 0px;
    }
  }

.image{
  display:grid;
  height: 100%;
}


  #bg-Untitled_1_copy {
    width: 883px; height: 1185px;
    zoom:0.30;
    /* Mozilla support */
    object-fit: contain;
    background: url('css_sprites.png') -10px -1391px;
}

#bg-funny {

  width: 883px; height: 1185px;
  zoom:0.30;
  /* Mozilla support */
  object-fit: contain;
  background: url('css_sprites.png') -1155px -1391px;
}

#bg-Untitled_4_copy {
  width: 1125px; height: 1361px;
  zoom:0.30;
  background: url('css_sprites.png') -10px -10px;
}

#bg-scribs06_copy {
  width: 960px; height: 1157px;
  zoom:0.30;
  background: url('css_sprites.png') -2300px -10px;
}

#bg-Untitled_3_copy {
  width: 1125px; height: 1203px;
  zoom:0.30;
  background: url('css_sprites.png') -1155px -10px;
}

#bg-Untitled_1 {
  width: 902px; height: 1049px;
  zoom:0.30;
  background: url('css_sprites.png') -3280px -10px;
}