body {
  overflow: hidden;
  background-color: white;
}

#wrapper{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: grid;
  width: 600px;
  height: 600px;
  grid-template-columns: 60% 40%;
  grid-template-rows: 40% 30% 30%;
  grid-gap: 3%;
  /* grid-auto-rows: minmax(100px,auto); */
}

#one{
  grid-column: 1;
  grid-row: 1;
  /* grid-area: 1 1; */
  background-color:#1c2619;
  position: relative;
  outline: 3.5px solid rgb(22, 22, 22)
}

#two{
  grid-column: 2;
  grid-row: 1;
  /* grid-area: 1 2; */
  background-color:#1c2619;
  position: relative;
  outline: 3.5px solid rgb(22, 22, 22)
}

#three{
  /* grid-column: 1; */
  /* grid-row: 2/4; */
  grid-area: 2/1/4;
  background-color:#1c2619;
  position: relative;
  outline: 3.5px solid rgb(22, 22, 22)
}

#four{
  grid-column: 2;
  grid-row: 2;
  /* grid-area: 2 2; */
  background-color:#1c2619;
  position: relative;
  outline: 3.5px solid rgb(22, 22, 22)
}

#five{
  grid-column: 2;
  grid-row:3;
  /* grid-area: 3 2; */
  background-color:#4D2186;
  position: relative;
  outline: 3.5px solid rgb(22, 22, 22)
}

.canvas{
  position: absolute;
  width: 100%;
  height: 100%;
}

#noise2{
  top:0;
  position: absolute;
  mix-blend-mode:multiply;
  opacity: 0.9;
}

#glsl,#glsl3,#glsl4,#glsl5,#glsl2{
  position: absolute;
  width: 100%;
  height: 100%;
}

#el_1_p1,#el_1_p2,#el_1_p3,#el_1_p4,
#el_2_p1,#el_2_p2,#el_2_p3,
#el_3_p1,#el_3_p2,#el_3_p3,#el_3_p4,#el_3_p5,#el_3_p6,#el_3_eye,
#el_4_p1,#el_4_p2,#el_4_p3,
#el_5_p1,#el_5_p2,#el_5_p3,#el_5_p4{
  position: absolute;
}

.second{
  position: absolute;
  opacity: 0.3;
  mix-blend-mode:hard-light;
  left: 1%;
}

/* ELEMENTS 1 */
#el_1_p1{
  animation: move 8s ease-in-out infinite;
  filter: blur(0.7px);
}

    #el_1_p1_2{
      animation: move_2 8s ease-in-out infinite;
      filter: blur(0.7px);
    }

#el_1_p2{
  animation: move2 7s ease-in-out infinite;
}

    #el_1_p2_2{
      animation: move2_2 7s ease-in-out infinite;
    }

#el_1_p3{
  animation: move 6s ease-in-out infinite;
}

    #el_1_p3_2{
      animation: move_2 6s ease-in-out infinite;
    }
  
#el_1_p4{
  animation: move2 5s ease-in-out infinite;
}
    
    #el_1_p4_2{
      animation: move2_2 5s ease-in-out infinite;
    }

/* ELEMENTS 2 */
#el_2_p3{
  animation: move2 5s ease-in-out infinite;
}
    
    #el_2_p3_2{
      animation: move2_2 5s ease-in-out infinite;
    }
/* ELEMENTS 3 */

#el_3_p1{
  animation: move 5s ease-in-out infinite;
  filter: blur(0.8px);
}

  #el_3_p1_2{
    animation: move_2 5s ease-in-out infinite;
    /* filter: blur(0.8px); */
  }


#el_3_p2{
  animation: move2 5s ease-in-out infinite;
  filter: blur(0.4px);
}

  #el_3_p2_2{
    animation: move2_2 5s ease-in-out infinite;
    filter: blur(0.4px);
  }

#el_3_p3{
  animation: move 5s ease-in-out infinite;
}

  #el_3_p3_2{
    animation: move_2 5s ease-in-out infinite;
  }

#el_3_p4{
  animation: move2 5s ease-in-out infinite;
}

  #el_3_p4_2{
    animation: move2_2 5s ease-in-out infinite;
  }

#el_3_p5{
  animation: move 5s ease-in-out infinite;
}

  #el_3_p5_2{
    animation: move_2 5s ease-in-out infinite;
    left: 5px;
  }

#el_3_p6{
  animation: move2 5s ease-in-out infinite;
}

  #el_3_p6_2{
    animation: move2_2 5s ease-in-out infinite;
  }

#el_3_eye{
  top: 5%;
}

  #el_3_eye_2{
    top: 6%;
    left: 1%;
  }

/* ELEMENTS 4 */
#el_4_p2{
  animation: move_el4 5s ease-in-out infinite;
  filter: blur(0.4px);
}

  #el_4_p2_2{
    animation: move_el4_2 5s ease-in-out infinite;
    filter: blur(0.4px);
  }

/* ELEMENTS 5 */
#el_5_p2{
  animation: move 5s ease-in-out infinite;
}
  #el_5_p2_2{
    animation: move_2 5s ease-in-out infinite;
  }

  #el_5_p3{
    animation: move 5s ease-in-out infinite;
  }
    #el_5_p3_2{
      animation: move_2 5s ease-in-out infinite;
    }

    
  #el_5_p4{
    animation: move_el5 5s ease-in-out infinite;

  }
    #el_5_p4_2{
      animation: move_el5_2 5s ease-in-out infinite;
    }


.eyes{
  animation: hue_anim 3s linear infinite;
} 

#noise{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.25;
}

@keyframes move { 
  0% { bottom: 0%;} 
  50% {bottom: 2%;}
  100% {bottom: 0%;}
}

@keyframes move_2 { 
  0% { bottom: 0.8%;} 
  50% {bottom: 2.8%;}
  100% {bottom: 0.8%;}
}

@keyframes move2 { 
  0% { top: 0%;} 
  50% {top: 2%;}
  100% {top: 0%;}
}
@keyframes move2_2 { 
  0% { top: 0.8%;} 
  50% {top: 2.8%;}
  100% {top: 0.8%;}
}

@keyframes move_el5 { 
  0% { top: 0.4%;} 
  50% {top: 1.4%;}
  100% {top: 0.4%;}
}
@keyframes move_el5_2 { 
  0% { top: 1.2%;} 
  50% {top: 2%;}
  100% {top: 1.2%;}
}

@keyframes move_el4 { 
  0% { top: -2.5%;} 
  50% {top: 2.5%;}
  100% {top: -2.5%;}
}
@keyframes move_el4_2 { 
  0% { top: -1.7%;} 
  50% {top: 3.3%;}
  100% {top: -1.7%;}
}

@keyframes move7 { 
  0% { top: -0.6%;} 
  50% {top: 1%;}
  100% {top: -0.6%;}
}
@keyframes move7_2 { 
  0% { top: 0.2%;} 
  50% {top: 1.8%;}
  100% {top: 0.2%;}
}

@keyframes hue_anim { 
  0% { filter: hue-rotate(0deg);} 
  100% {filter: hue-rotate(360deg);}
}