/* normal animation*/

@media(max-width:300px){
    .harsh{
       width: 35px;
       height: auto;
       font-size: 80%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 85%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.harsh1{
       width: 60px;
       height: auto;
       font-size: 80%;
       animation-name: myAnimation2;
}
@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 210px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 210px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 335px; left: 210px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 335px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 65px;
  height: auto;
  font-size: 80%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 210px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 210px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 355px; left: 210px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 355px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 355px;  left: 210px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left:210px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 210px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 100px;
    height: auto;
    font-size: 80%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 350px; left: 80px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 350px; left: 100px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 350px; left: 120px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 350px; left: 150px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 350px; left: 160px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 350px; left: 80px;}
  }

.harsh6{
  width: 50px;
  height: auto;
  font-size: 80%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -600px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -530px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 210px; top: -530px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 210px; top: -240px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -240px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -240px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px; }
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 5px 5px;
  font-size: 80%;
}

.dell{
    margin-top: 130px;
     margin-left: 80px;
     width:200px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 120px;
  margin-left: 25%;
}

.paragraph{
  font-size: 120%;
  width: 100%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 240px;
  left: 100px;
  font-size: 80%;
}

  .animationimg1{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 76px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 120px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 120px; left: 75px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 120px; left: 75px; top: 280px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 280px;}
    30%{display: grid; width: 120px; top: 280px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 75px;}
    40%{display: grid; width: 120px; top: 280px; left: 75px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 120px; left: 75px; top: 280px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 120px; top: 280px; left: 75px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 120px; transform: rotate(0deg); left: 75px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 120px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 75px;}
    80%{display: grid; width: 120px; transform: rotate(0deg); left: 75px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 120px; left: 75px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 120px; left: 75px; top: 280px;}
  }


   .control-images{
    width: 120px;
    left: 75px;
    top: 260px;
    height: 210px;
  }
  }


  @media(min-width:300px){
    .harsh{
       width: 35px;
       height: auto;
       font-size: 80%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 40%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 85%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 40%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }


.harsh1{
       width: 60px;
       height: auto;
       font-size: 80%;
       animation-name: myAnimation2;
}
@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 240px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 240px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 340px; left: 240px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 340px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 65px;
  height: auto;
  font-size: 80%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 235px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 235px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 360px; left: 235px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 360px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 360px;  left: 235px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left: 235px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 235px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 100px;
    height: auto;
    font-size: 80%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 350px; left: 80px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 350px; left: 100px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 350px; left: 120px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 350px; left: 150px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 350px; left: 160px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 350px; left: 80px;}
  }

.harsh6{
  width: 50px;
  height: auto;
  font-size: 80%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -600px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -530px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 240px; top: -530px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 240px; top: -230px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -230px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -230px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px; }
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 5px 8px;
  font-size: 80%;
}

.dell{
    margin-top: 130px;
     margin-left: 80px;
     width:200px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 120px;
  margin-left: 25%;
}

.paragraph{
  font-size: 120%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 240px;
  left: 120px;
  font-size: 80%;
}


  .animationimg1{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 120px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 120px; left: 85px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 120px; left: 85px; top: 280px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 280px;}
    30%{display: grid; width: 120px; top: 280px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 85px;}
    40%{display: grid; width: 120px; top: 280px; left: 85px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 120px; left: 85px; top: 280px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 120px; top: 280px; left: 85px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 120px; transform: rotate(0deg); left: 85px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 120px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 85px;}
    80%{display: grid; width: 120px; transform: rotate(0deg); left: 85px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 120px; left: 85px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 120px; left: 85px; top: 280px;}
  }

  .control-images{
    width: 120px;
    left: 90px;
    top: 260px;
    height: 210px;
  } 
  }




  @media(min-width:350px) {
    

  .animationimg1{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 120px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 120px; left: 100px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 120px; left: 100px; top: 280px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 280px;}
    30%{display: grid; width: 120px; top: 280px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 100px;}
    40%{display: grid; width: 120px; top: 280px; left: 100px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 120px; left: 100px; top: 280px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 120px; top: 280px; left: 100px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 120px; transform: rotate(0deg); left: 100px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 120px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 100px;}
    80%{display: grid; width: 120px; transform: rotate(0deg); left: 100px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 120px; left: 100px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 120px; left: 100px; top: 280px;}
  }

.control-images{
    width: 120px;
    left: 100px;
    top: 260px;
    height: 210px;
  }   

  .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 240px;
  left: 130px;
  font-size: 80%;
}
  }


@media(min-width:357px){
.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 218px;
  left: 130px;
  font-size: 80%;
}
  }

@media(min-width:360px){
.control-images{
    width: 120px;
    left: 100px;
    top: 240px;
    height: 210px;
  } 

}




 @media(min-width:400px){
    .harsh{
       width: 35px;
       height: auto;
       font-size: 90%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 40%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 85%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 40%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.harsh1{
       width: 70px;
       height: auto;
       font-size: 90%;
       animation-name: myAnimation2;
}

@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 300px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 300px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 380px; left: 300px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 380px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 90px;
  height: auto;
  font-size: 90%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 300px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 300px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 400px; left: 300px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 400px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 400px;  left: 300px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left: 300px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 300px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 100px;
    height: auto;
    font-size: 90%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 390px; left: 80px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 390px; left: 120px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 390px; left: 160px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 390px; left: 180px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 390px; left: 220px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 390px; left: 80px;}
  }

.harsh6{
  width: 50px;
  height: auto;
  font-size: 90%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -700px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -620px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 300px; top: -620px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 300px; top: -280px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -280px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -280px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px; }
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 90%;
}

.dell{
    margin-top: 115px;
     margin-left: 80px;
     width:300px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 150px;
  margin-left: 25%;
}

.paragraph{
  font-size: 150%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 255px;
  left: 150px;
  font-size: 90%;
}


  .animationimg1{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 150px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 150px; left: 115px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 150px; left: 115px; top: 230px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 230px;}
    30%{display: grid; width: 150px; top: 230px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 115px;}
    40%{display: grid; width: 150px; top: 230px; left: 115px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 150px; left: 115px; top: 230px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 150px; top: 230px; left: 115px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 150px; transform: rotate(0deg); left: 115px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 150px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 115px;}
    80%{display: grid; width: 150px; transform: rotate(0deg); left: 115px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 150px; left: 115px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 150px; left: 115px; top: 230px;}
  }

  .control-images{
    width: 150px;
    left: 115px;
    top: 280px;
    height: 260px;
  } 
 }


 @media(min-width: 446px){
  .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 230px;
  left: 150px;
  font-size: 90%;
}
 }


@media(min-width:450px){
  

  .animationimg1{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 150px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 150px; left: 125px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 150px; left: 125px; top: 230px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 230px;}
    30%{display: grid; width: 150px; top: 230px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 125px;}
    40%{display: grid; width: 150px; top: 230px; left: 125px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 150px; left: 125px; top: 230px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 150px; top: 230px; left: 125px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 150px; transform: rotate(0deg); left: 125px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 150px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 125px;}
    80%{display: grid; width: 150px; transform: rotate(0deg); left: 125px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 150px; left: 125px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 150px; left: 125px; top: 230px;}
  }

.control-images{
    width: 150px;
    left: 130px;
    top: 250px;
    height: 260px;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 230px;
  left: 160px;
  font-size: 90%;
}
}


 
 @media(min-width:500px){
    .harsh{
       width: 40px;
       height: auto;
       font-size: 100%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.harsh1{
       width: 80px;
       height: auto;
       font-size: 100%;
       animation-name: myAnimation2;
}

@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 355px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 355px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 450px; left: 355px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 450px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 95px;
  height: auto;
  font-size: 100%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 355px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 355px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 480px; left: 355px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 480px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 480px;  left: 355px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left: 355px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 355px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 100px;
    height: auto;
    font-size: 100%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 475px; left: 80px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 475px; left: 120px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 475px; left: 160px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 475px; left: 180px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 475px; left: 220px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 475px; left: 80px;}
  }

.harsh6{
  width: 50px;
  height: auto;
  font-size: 100%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -820px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -710px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 360px; top: -710px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 360px; top: -300px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -300px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -300px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px; }
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 100%;
}

.dell{
    margin-top: 150px;
     margin-left: 80px;
     width:300px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 180px;
  margin-left: 25%;
}

.paragraph{
  font-size: 170%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 295px;
  left: 180px;
  font-size: 100%;
}


  .animationimg1{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 180px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 180px; left: 140px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 180px; left: 140px; top: 180px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 180px;}
    30%{display: grid; width: 180px; top: 180px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 140px;}
    40%{display: grid; width: 180px; top: 180px; left: 140px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 180px; top: 400px;}
    50%{display: grid; width: 180px; left: 140px; top: 180px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 180px;}
    60%{display: grid; width: 180px; top: 180px; left: 140px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 180px; transform: rotate(0deg); left: 140px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 180px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 140px;}
    80%{display: grid; width: 180px; transform: rotate(0deg); left: 140px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 180px; left: 140px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 180px; left: 140px; top: 180px;}
  }

  .control-images{
    width: 180px;
    left: 140px;
    top: 315px;
    height: 320px;
}
 }


 @media(min-width:505px){
  .control-images{
    width: 180px;
    left: 140px;
    top: 285px;
    height: 320px;
  }

  .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 265px;
  left: 190px;
  font-size: 100%;
}
 }
 
@media(min-width:550px){
  
  .animationimg1{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 180px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 180px; left: 150px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 180px; left: 150px; top: 180px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 180px;}
    30%{display: grid; width: 180px; top: 180px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 150px;}
    40%{display: grid; width: 180px; top: 180px; left: 150px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 180px; top: 400px;}
    50%{display: grid; width: 180px; left: 150px; top: 180px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 180px;}
    60%{display: grid; width: 180px; top: 180px; left: 150px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 180px; transform: rotate(0deg); left: 150px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 180px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 150px;}
    80%{display: grid; width: 180px; transform: rotate(0deg); left: 150px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 180px; left: 150px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 180px; left: 150px; top: 180px;}
  }
  
    .control-images{
    width: 180px;
    left: 150px;
    top: 285px;
    height: 315px;
}
}

 

 
 @media(min-width:600px){
    .harsh{
       width: 50px;
       height: auto;
       font-size: 120%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.harsh1{
       width: 90px;
       height: auto;
       font-size: 120%;
       animation-name: myAnimation2;
}

@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 390px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 390px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 520px; left: 390px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 520px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 120px;
  height: auto;
  font-size: 120%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 390px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 390px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 550px; left: 390px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 550px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 550px;  left: 390px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left: 390px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 390px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 110px;
    height: auto;
    font-size: 120%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 540px; left: 90px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 540px; left: 150px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 540px; left: 220px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 540px; left: 290px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 540px; left: 350px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 540px; left: 90px;}
  }

.harsh6{
  width: 60px;
  height: auto;
  font-size: 120%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -970px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -890px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 390px; top: -890px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 390px; top: -400px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -400px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -400px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 120%;
}

.dell{
    margin-top: 150px;
     margin-left: 100px;
     width: 480px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 220px;
  margin-left: 20%;
}

.paragraph{
  font-size: 200%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 70px;
  top: 285px;
  left: 200px;
  font-size: 120%;
}

  
  .animationimg1{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 220px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 220px; left: 130px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 220px; left: 130px; top: 110px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 110px;}
    30%{display: grid; width: 220px; top: 110px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 130px;}
    40%{display: grid; width: 220px; top: 110px; left: 130px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 110px; top: 400px;}
    50%{display: grid; width: 220px; left: 130px; top: 110px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 110px;}
    60%{display: grid; width: 220px; top: 110px; left: 130px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 220px; transform: rotate(0deg); left: 130px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 110px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 130px;}
    80%{display: grid; width: 220px; transform: rotate(0deg); left: 130px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 220px; left: 130px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 150px; top: 380px;}
    100%{display: grid; width: 220px; left: 130px; top: 110px;}
  }

  
    .control-images{
    width: 220px;
    left: 130px;
    top: 315px;
    height: 380px;
    }
 }




 @media(min-width:650px){
  
  .animationimg1{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 220px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 220px; left: 140px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 220px; left: 140px; top: 110px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 110px;}
    30%{display: grid; width: 220px; top: 110px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 140px;}
    40%{display: grid; width: 220px; top: 110px; left: 140px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 110px; top: 400px;}
    50%{display: grid; width: 220px; left: 140px; top: 110px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 110px;}
    60%{display: grid; width: 220px; top: 110px; left: 140px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 220px; transform: rotate(0deg); left: 140px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 110px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 140px;}
    80%{display: grid; width: 220px; transform: rotate(0deg); left: 140px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 140px;}
    90%{display: grid; width: 220px; left: 140px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 150px; top: 380px;}
    100%{display: grid; width: 220px; left: 140px; top: 110px;}
  }

  
    .control-images{
    width: 220px;
    left: 140px;
    top: 315px;
    height: 380px;
    }
 }
 
 
 @media(min-width: 700px){
    .harsh{
       width: 60px;
       height: auto;
       font-size: 150%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.harsh1{
       width: 110px;
       height: auto;
       font-size: 150%;
       animation-name: myAnimation2;
}

@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 440px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 280px; left: 440px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 590px; left: 440px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 590px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 150px;
  height: auto;
  font-size: 150%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 440px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 440px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 620px; left: 440px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 620px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 620px;  left: 440px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 160px; left: 440px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 440px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 110px;
    height: auto;
    font-size: 150%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 620px; left: 90px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 620px; left: 180px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 620px; left: 250px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 620px; left: 330px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 620px; left: 400px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 620px; left: 90px;}
  }

.harsh6{
  width: 70px;
  height: auto;
  font-size: 150%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -500px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -1120px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -1040px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 440px; top: -1040px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 440px; top: -480px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -480px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -480px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 150%;
}

.dell{
    margin-top: 180px;
     margin-left: 100px;
     width: 550px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 250px;
  margin-left: 20%;
}

.paragraph{
  font-size: 240%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 90px;
  top: 375px;
  left: 220px;
  font-size: 150%;
}



  .animationimg1{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 250px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 250px; left: 150px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 250px; left: 150px; top: 60px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 60px;}
    30%{display: grid; width: 250px; top: 60px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 150px;}
    40%{display: grid; width: 250px; top: 60px; left: 150px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 250px; left: 150px; top: 60px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 250px; top: 60px; left: 150px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 250px; transform: rotate(0deg); left: 150px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 150px;}
    80%{display: grid; width: 250px; transform: rotate(0deg); left: 150px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 150px;}
    90%{display: grid; width: 250px; left: 150px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 150px; top: 380px;}
    100%{display: grid; width: 250px; left: 150px; top: 60px;}
  }

  
    .control-images{
    width: 250px;
    left: 150px;
    top: 405px;
    height: 430px;
    }
 }


 @media(min-width:713px){

  .control-images{
    width: 250px;
    left: 150px;
    top: 360px;
    height: 430px;
    }

    .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 90px;
  top: 330px;
  left: 220px;
  font-size: 150%;
}
 }


 @media(min-width:750px){
  
  .animationimg1{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 250px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 250px; left: 165px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 250px; left: 165px; top: 60px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 60px;}
    30%{display: grid; width: 250px; top: 60px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 165px;}
    40%{display: grid; width: 250px; top: 60px; left: 165px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 165px; top: 400px;}
    50%{display: grid; width: 250px; left: 165px; top: 60px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 165px;}
    60%{display: grid; width: 250px; top: 60px; left: 165px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 250px; transform: rotate(0deg); left: 165px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 165px;}
    80%{display: grid; width: 250px; transform: rotate(0deg); left: 165px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 165px;}
    90%{display: grid; width: 250px; left: 165px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 165px; top: 380px;}
    100%{display: grid; width: 250px; left: 165px; top: 60px;}
  }
 
    .control-images{
    width: 250px;
    left: 165px;
    top: 365px;
    height: 430px;
    }
 }

 
 
 @media(min-width: 800px){
    .harsh{
       width: 70px;
       height: auto;
       font-size: 180%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.harsh1{
       width: 140px;
       height: auto;
       font-size: 180%;
       animation-name: myAnimation2;
}

@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 490px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 280px; left: 490px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 680px; left: 490px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 680px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 180px;
  height: auto;
  font-size: 180%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 490px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 490px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 710px; left: 490px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 710px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 710px;  left: 490px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 160px; left: 490px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 490px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 110px;
    height: auto;
    font-size: 180%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 710px; left: 90px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 710px; left: 200px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 710px; left: 280px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 710px; left: 370px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 710px; left: 460px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 710px; left: 90px;}
  }

.harsh6{
  width: 80px;
  height: auto;
  font-size: 180%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 220px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -500px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 16px; top: -1300px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -1200px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 490px; top: -1200px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 490px; top: -565px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -565px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -565px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 220px; top: 30px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 220px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 180%;
}

.dell{
    margin-top: 220px;
     margin-left: 110px;
     width: 650px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 280px;
  margin-left: 20%;
}

.paragraph{
  font-size: 280%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 120px;
  top: 435px;
  left: 250px;
  font-size: 180%;
}



  .animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 280px; left: 170px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 280px; left: 170px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 170px;}
    40%{display: grid; width: 280px; top: 10px; left: 170px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 170px; top: 400px;}
    50%{display: grid; width: 280px; left: 170px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 170px;}
    60%{display: grid; width: 280px; top: 10px; left: 170px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 170px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 170px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 170px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 170px;}
    90%{display: grid; width: 280px; left: 170px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 170px; top: 380px;}
    100%{display: grid; width: 280px; left: 170px; top: 10px;}
  }

  
    .control-images{
    width: 280px;
    left: 170px;
    top: 470px;
    height: 480px;
    }
 }

@media(min-width:831px){
  .control-images{
    width: 280px;
    left: 170px;
    top: 430px;
    height: 480px;
    }

    .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 120px;
  top: 380px;
  left: 250px;
  font-size: 180%;
}
 }

 @media(min-width:850px){

  .animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 280px; left: 180px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 280px; left: 180px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 180px;}
    40%{display: grid; width: 280px; top: 10px; left: 180px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 180px; top: 400px;}
    50%{display: grid; width: 280px; left: 180px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 180px;}
    60%{display: grid; width: 280px; top: 10px; left: 180px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 180px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 180px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 180px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 180px;}
    90%{display: grid; width: 280px; left: 180px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 180px; top: 380px;}
    100%{display: grid; width: 280px; left: 180px; top: 10px;}
  }

  
    .control-images{
    width: 280px;
    left: 180px;
    top: 420px;
    height: 480px;
    }
 }


  
 @media(min-width: 900px){
    .harsh{
       width: 55px;
       height: auto;
       font-size: 150%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.harsh1{
       width: 70px;
       height: auto;
       font-size: 150%;
       animation-name: myAnimation2;
}

@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 360px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 280px; left: 360px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 560px; left: 360px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 560px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 120px;
  height: auto;
  font-size: 150%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 360px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 360px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 425px; left: 360px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 425px; left: 520px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 425px;  left: 360px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 360px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 360px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 100px;
    height: auto;
    font-size: 150%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 60px; left: 570px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 60px; left: 600px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 60px; left: 630px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 60px; left: 670px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 60px; left: 700px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 60px; left: 570px;}
  }

.harsh6{
  width: 70px;
  height: auto;
  font-size: 150%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 820px; top: -370px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 820px; top: -550px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 400px; top: -550px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 10px; top: -550px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -200px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -550px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 390px; top: -550px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 390px; top: -200px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 390px; top: -550px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 820px; top: -550px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 820px; top: -620px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 820px; top: -370px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 200%;
}

.dell{
    margin-top: 90px;
    width: 400px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 200px;
  margin-left: 30%;
}

.paragraph{
  font-size: 320%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 100px;
  top: 500px;
  left: 200px;
  font-size: 150%;
}


  .animationimg1{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 200px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 145px;}
    10%{display: grid; width: 200px; left: 135px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 200px; left: 135px; top: 145px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 145px;}
    30%{display: grid; width: 200px; top: 145px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 135px;}
    40%{display: grid; width: 200px; top: 145px; left: 135px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 135px; top: 400px;}
    50%{display: grid; width: 200px; left: 135px; top: 145px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 135px;}
    60%{display: grid; width: 200px; top: 145px; left: 135px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 200px; transform: rotate(0deg); left: 135px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 145px; transform: rotate(-360deg); left: 135px;}
    80%{display: grid; width: 200px; transform: rotate(0deg); left: 135px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 135px;}
    90%{display: grid; width: 200px; left: 135px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 135px; top: 380px;}
    100%{display: grid; width: 200px; left: 135px; top: 145px;}
  }

  .control-images{
    width: 200px;
    left: 135px;
    top: 530px;
    height: 350px;
  }
 } 


@media(min-width: 950px){
  .control-images{
    width: 200px;
    left: 140px;
    top: 470px;
    height: 350px;
    }

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 100px;
  top: 440px;
  left: 200px;
  font-size: 150%;
}
 }

 
  
 @media(min-width: 1000px){
    .harsh{
       width: 60px;
       height: auto;
       font-size: 160%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.harsh1{
       width: 70px;
       height: auto;
       font-size: 160%;
       animation-name: myAnimation2;
}

@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 380px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 380px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 660px; left: 380px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 660px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 120px;
  height: auto;
  font-size: 160%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 380px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 380px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 475px; left: 380px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 475px; left: 540px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 475px;  left: 380px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 380px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 380px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 100px;
    height: auto;
    font-size: 160%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 60px; left: 600px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 60px; left: 640px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 60px; left: 690px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 60px; left: 750px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 60px; left: 800px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 60px; left: 600px;}
  }

.harsh6{
  width: 70px;
  height: auto;
  font-size: 160%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 920px; top: -480px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 920px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 400px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -250px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 390px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 390px; top: -250px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 390px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 920px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 920px; top: -750px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 920px; top: -480px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 200%;
}

.dell{
    margin-top: 90px;
    width: 450px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 250px;
  margin-left: 20%;
}

.paragraph{
  font-size: 320%;
}

.harsh5{
  display: grid;
  width: 100px;
  top: 460px;
  left: 190px;
  font-size: 150%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 250px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 60px;}
    10%{display: grid; width: 250px; left: 105px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 250px; top: 500px;}
    20%{display: grid; width: 250px; left: 105px; top: 60px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 60px;}
    30%{display: grid; width: 250px; top: 60px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 105px;}
    40%{display: grid; width: 250px; top: 60px; left: 105px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 105px; top: 400px;}
    50%{display: grid; width: 250px; left: 105px; top: 60px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 105px;}
    60%{display: grid; width: 250px; top: 60px; left: 105px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 250px;}
    70%{display: grid; width: 250px; transform: rotate(0deg); left: 105px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 250px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 105px;}
    80%{display: grid; width: 250px; transform: rotate(0deg); left: 105px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 105px;}
    90%{display: grid; width: 250px; left: 105px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 105px; top: 380px;}
    100%{display: grid; width: 250px; left: 105px; top: 60px;}
  }

.control-images{
    width: 250px;
    left: 105px;
    top: 490px;
    height: 430px;
}
 }


 
 
  
 @media(min-width: 1100px){
    .harsh{
       width: 60px;
       height: auto;
       font-size: 170%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.harsh1{
       width: 130px;
       height: auto;
       font-size: 170%;
       animation-name: myAnimation2;
}

@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 440px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 440px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 440px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 120px;
  height: auto;
  font-size: 170%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 440px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 440px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 485px; left: 440px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 485px; left: 640px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 485px;  left: 440px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 440px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 440px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 100px;
    height: auto;
    font-size: 170%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 55px; left: 630px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 55px; left: 670px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 55px; left: 730px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 55px; left: 790px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 55px; left: 850px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 55px; left: 630px;}
  }

.harsh6{
  width: 75px;
  height: auto;
  font-size: 170%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1000px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1000px; top: -680px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 500px; top: -680px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -680px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -680px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 450px; top: -680px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 450px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 450px; top: -680px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1000px; top: -680px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1000px; top: -760px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1000px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 220%;
}

.dell{
    margin-top: 90px;
    width: 490px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 350%;
}

.harsh5{
  display: grid;
  width: 110px;
  top: 455px;
  left: 220px;
  font-size: 160%;
}

.harsh7{
  display: none;
}

.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 145px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 145px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 145px;}
    40%{display: grid; width: 280px; top: 10px; left: 145px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 145px; top: 400px;}
    50%{display: grid; width: 280px; left: 145px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 145px;}
    60%{display: grid; width: 280px; top: 10px; left: 145px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 145px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 145px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 145px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 145px;}
    90%{display: grid; width: 280px; left: 145px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 145px; top: 380px;}
    100%{display: grid; width: 280px; left: 145px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 145px;
    top: 490px;
    height: 480px;
}
 }



  
  
 @media(min-width: 1200px){
    .harsh{
       width: 60px;
       height: auto;
       font-size: 170%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.harsh1{
       width: 130px;
       height: auto;
       font-size: 170%;
       animation-name: myAnimation2;
}

@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 460px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 460px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 460px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 170px;
  height: auto;
  font-size: 170%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 460px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 460px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 495px; left: 460px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 495px; left: 640px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 495px;  left: 460px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 460px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 460px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 100px;
    height: auto;
    font-size: 170%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 55px; left: 700px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 55px; left: 770px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 55px; left: 840px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 55px; left: 910px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 55px; left: 970px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 55px; left: 700px;}
  }

.harsh6{
  width: 75px;
  height: auto;
  font-size: 170%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1100px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1100px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 500px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 470px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 470px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 470px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1100px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1100px; top: -720px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1100px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 220%;
}

.dell{
    margin-top: 90px;
    width: 550px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 350%;
}

.harsh5{
  display: grid;
  width: 110px;
  top: 420px;
  left: 220px;
  font-size: 170%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 160px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 160px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 160px;}
    40%{display: grid; width: 280px; top: 10px; left: 160px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 160px; top: 400px;}
    50%{display: grid; width: 280px; left: 160px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 160px;}
    60%{display: grid; width: 280px; top: 10px; left: 160px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 160px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 160px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 160px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 160px;}
    90%{display: grid; width: 280px; left: 160px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 160px; top: 380px;}
    100%{display: grid; width: 280px; left: 160px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 160px;
    top: 455px;
    height: 480px;
}
 }



   
  
 @media(min-width: 1300px){
    .harsh{
       width: 65px;
       height: auto;
       font-size: 180%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.harsh1{
       width: 130px;
       height: auto;
       font-size: 180%;
       animation-name: myAnimation2;
}

@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 480px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 480px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 480px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 180px;
  height: auto;
  font-size: 180%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 480px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 480px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 520px; left: 480px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 520px; left: 670px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 520px;  left: 480px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 480px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 480px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 100px;
    height: auto;
    font-size: 180%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 55px; left: 750px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 55px; left: 820px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 55px; left: 890px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 55px; left: 950px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 55px; left: 1020px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 55px; left: 750px;}
  }

.harsh6{
  width: 80px;
  height: auto;
  font-size: 180%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1190px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1190px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 600px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 480px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 480px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 480px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1190px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1190px; top: -720px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1190px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 250%;
}

.dell{
    margin-top: 90px;
    width: 600px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 380%;
}

.harsh5{
  display: grid;
  width: 120px;
  top: 450px;
  left: 230px;
  font-size: 180%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 170px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 170px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 170px;}
    40%{display: grid; width: 280px; top: 10px; left: 170px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 170px; top: 400px;}
    50%{display: grid; width: 280px; left: 170px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 170px;}
    60%{display: grid; width: 280px; top: 10px; left: 170px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 170px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 170px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 170px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 170px;}
    90%{display: grid; width: 280px; left: 170px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 170px; top: 380px;}
    100%{display: grid; width: 280px; left: 170px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 170px;
    top: 490px;
    height: 480px;
}
 }





 

  
 @media(min-width: 1400px){
    .harsh{
       width: 70px;
       height: auto;
       font-size: 190%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.harsh1{
       width: 140px;
       height: auto;
       font-size: 190%;
       animation-name: myAnimation2;
}

@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 480px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 480px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 480px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 200px;
  height: auto;
  font-size: 190%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 480px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 480px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 540px; left: 480px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 540px; left: 670px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 540px;  left: 480px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 480px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 480px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 110px;
    height: auto;
    font-size: 190%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 55px; left: 750px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 55px; left: 820px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 55px; left: 890px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 55px; left: 950px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 55px; left: 1020px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 55px; left: 750px;}
  }

.harsh6{
  width: 90px;
  height: auto;
  font-size: 190%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1190px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1190px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 600px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 480px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 480px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 480px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1190px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1190px; top: -720px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1190px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 250%;
}

.dell{
    margin-top: 90px;
    width: 600px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 380%;
}

.harsh5{
  display: grid;
  width: 125px;
  top: 460px;
  left: 240px;
  font-size: 190%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 180px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 180px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 180px;}
    40%{display: grid; width: 280px; top: 10px; left: 180px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 180px; top: 400px;}
    50%{display: grid; width: 280px; left: 180px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 180px;}
    60%{display: grid; width: 280px; top: 10px; left: 180px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 180px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 180px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 180px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 170px;}
    90%{display: grid; width: 280px; left: 170px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 180px; top: 380px;}
    100%{display: grid; width: 280px; left: 180px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 180px;
    top: 495px;
    height: 480px;
   
}
 }











 
  
 @media(min-width: 1500px){
    .harsh{
       width: 70px;
       height: auto;
       font-size: 190%;
       animation-name: myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.harsh1{
       width: 140px;
       height: auto;
       font-size: 190%;
       animation-name: myAnimation2;
}

@keyframes myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 520px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 520px; transform: rotate(-30deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 520px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.harsh2{
  width: 200px;
  height: auto;
  font-size: 190%;
  animation-name: myAnimation3;
}

@keyframes myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 520px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 520px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 540px; left: 520px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 540px; left: 750px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 540px;  left: 520px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 520px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 520px; transform: rotate(-10deg);}
  }

  .harsh3{
     width: 110px;
    height: auto;
    font-size: 190%;
    animation-name: myAnimation4;
  }
  
@keyframes myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 50px; left: 800px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 50px; left: 890px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 50px; left: 980px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 50px; left: 1080px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 50px; left: 1150px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 50px; left: 800px;}
  }

.harsh6{
  width: 90px;
  height: auto;
  font-size: 190%;
  animation-name: myAnimation5;
}
  
@keyframes myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1300px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1300px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 600px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 520px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 520px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 520px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1190px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1300px; top: -650px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1300px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 250%;
}

.dell{
    margin-top: 90px;
    width: 600px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 380%;
}

.harsh5{
  display: grid;
  width: 125px;
  top: 460px;
  left: 250px;
  font-size: 190%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 190px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 190px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 190px;}
    40%{display: grid; width: 280px; top: 10px; left: 190px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 190px; top: 400px;}
    50%{display: grid; width: 280px; left: 190px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 190px;}
    60%{display: grid; width: 280px; top: 10px; left: 190px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 190px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 190px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 190px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 190px;}
    90%{display: grid; width: 280px; left: 190px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 190px; top: 380px;}
    100%{display: grid; width: 280px; left: 190px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 190px;
    top: 495px;
    height: 480px;
   
}
 }



























































 /* slow animation*/



 @media(max-width:300px){
    .slow-harsh{
       width: 35px;
       height: auto;
       font-size: 80%;
       animation-name: slow-myAnimation1;
    }

    @keyframes slow-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 85%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.slow-harsh1{
       width: 60px;
       height: auto;
       font-size: 80%;
       animation-name: slow-myAnimation2;
}
@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 210px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 210px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 335px; left: 210px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 335px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 65px;
  height: auto;
  font-size: 80%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 210px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 210px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 355px; left: 210px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 355px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 355px;  left: 210px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left:210px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 210px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 100px;
    height: auto;
    font-size: 80%;
    animation-name: slow-myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 350px; left: 80px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 350px; left: 100px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 350px; left: 120px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 350px; left: 150px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 350px; left: 160px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 350px; left: 80px;}
  }

.slow-harsh6{
  width: 50px;
  height: auto;
  font-size: 80%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -600px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -530px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 210px; top: -530px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 210px; top: -240px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -240px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -240px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px; }
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 5px 5px;
  font-size: 80%;
}

.dell{
    margin-top: 130px;
     margin-left: 80px;
     width:200px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 120px;
  margin-left: 25%;
}

.paragraph{
  font-size: 120%;
  width: 100%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 240px;
  left: 100px;
  font-size: 80%;
}

  .animationimg1{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 76px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 120px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 120px; left: 75px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 120px; left: 75px; top: 280px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 280px;}
    30%{display: grid; width: 120px; top: 280px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 75px;}
    40%{display: grid; width: 120px; top: 280px; left: 75px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 120px; left: 75px; top: 280px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 120px; top: 280px; left: 75px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 120px; transform: rotate(0deg); left: 75px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 120px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 75px;}
    80%{display: grid; width: 120px; transform: rotate(0deg); left: 75px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 120px; left: 75px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 120px; left: 75px; top: 280px;}
  }


   .control-images{
    width: 120px;
    left: 75px;
    top: 260px;
    height: 210px;
  }
  }


  @media(min-width:300px){
    .slow-harsh{
       width: 35px;
       height: auto;
       font-size: 80%;
       animation-name: slow-myAnimation1;
    }

    @keyframes slow-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 40%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 85%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 40%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }


.slow-harsh1{
       width: 60px;
       height: auto;
       font-size: 80%;
       animation-name: myAnimation2;
}
@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 240px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 240px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 340px; left: 240px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 340px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 65px;
  height: auto;
  font-size: 80%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 235px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 235px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 360px; left: 235px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 360px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 360px;  left: 235px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left: 235px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 235px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 100px;
    height: auto;
    font-size: 80%;
    animation-name: slow-myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 350px; left: 80px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 350px; left: 100px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 350px; left: 120px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 350px; left: 150px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 350px; left: 160px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 350px; left: 80px;}
  }

.slow-harsh6{
  width: 50px;
  height: auto;
  font-size: 80%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -600px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -530px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 240px; top: -530px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 240px; top: -230px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -230px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -230px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px; }
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 5px 8px;
  font-size: 80%;
}

.dell{
    margin-top: 130px;
     margin-left: 80px;
     width:200px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 120px;
  margin-left: 25%;
}

.paragraph{
  font-size: 120%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 240px;
  left: 120px;
  font-size: 80%;
}


  .animationimg1{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 120px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 120px; left: 85px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 120px; left: 85px; top: 280px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 280px;}
    30%{display: grid; width: 120px; top: 280px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 85px;}
    40%{display: grid; width: 120px; top: 280px; left: 85px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 120px; left: 85px; top: 280px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 120px; top: 280px; left: 85px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 120px; transform: rotate(0deg); left: 85px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 120px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 85px;}
    80%{display: grid; width: 120px; transform: rotate(0deg); left: 85px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 120px; left: 85px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 120px; left: 85px; top: 280px;}
  }

  .control-images{
    width: 120px;
    left: 90px;
    top: 260px;
    height: 210px;
  } 
  }




  @media(min-width:350px) {
    

  .animationimg1{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 120px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 120px; left: 100px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 120px; left: 100px; top: 280px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 280px;}
    30%{display: grid; width: 120px; top: 280px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 100px;}
    40%{display: grid; width: 120px; top: 280px; left: 100px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 120px; left: 100px; top: 280px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 120px; top: 280px; left: 100px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 120px; transform: rotate(0deg); left: 100px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 120px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 100px;}
    80%{display: grid; width: 120px; transform: rotate(0deg); left: 100px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 120px; left: 100px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 120px; left: 100px; top: 280px;}
  }

.control-images{
    width: 120px;
    left: 100px;
    top: 260px;
    height: 210px;
  }   

  .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 240px;
  left: 130px;
  font-size: 80%;
}
  }


@media(min-width:357px){
.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 218px;
  left: 130px;
  font-size: 80%;
}
  }

@media(min-width:360px){
.control-images{
    width: 120px;
    left: 100px;
    top: 240px;
    height: 210px;
  } 

}




 @media(min-width:400px){
    .slow-harsh{
       width: 35px;
       height: auto;
       font-size: 90%;
       animation-name: slow-myAnimation1;
    }

    @keyframes myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 40%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 85%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 40%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.slow-harsh1{
       width: 70px;
       height: auto;
       font-size: 90%;
       animation-name: slow-myAnimation2;
}

@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 300px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 300px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 380px; left: 300px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 380px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 90px;
  height: auto;
  font-size: 90%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 300px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 300px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 400px; left: 300px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 400px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 400px;  left: 300px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left: 300px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 300px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 100px;
    height: auto;
    font-size: 90%;
    animation-name: slow-myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 390px; left: 80px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 390px; left: 120px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 390px; left: 160px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 390px; left: 180px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 390px; left: 220px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 390px; left: 80px;}
  }

.slow-harsh6{
  width: 50px;
  height: auto;
  font-size: 90%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -700px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -620px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 300px; top: -620px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 300px; top: -280px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -280px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -280px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px; }
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 90%;
}

.dell{
    margin-top: 115px;
     margin-left: 80px;
     width:300px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 150px;
  margin-left: 25%;
}

.paragraph{
  font-size: 150%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 255px;
  left: 150px;
  font-size: 90%;
}


  .animationimg1{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 150px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 150px; left: 115px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 150px; left: 115px; top: 230px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 230px;}
    30%{display: grid; width: 150px; top: 230px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 115px;}
    40%{display: grid; width: 150px; top: 230px; left: 115px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 150px; left: 115px; top: 230px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 150px; top: 230px; left: 115px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 150px; transform: rotate(0deg); left: 115px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 150px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 115px;}
    80%{display: grid; width: 150px; transform: rotate(0deg); left: 115px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 150px; left: 115px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 150px; left: 115px; top: 230px;}
  }

  .control-images{
    width: 150px;
    left: 115px;
    top: 280px;
    height: 260px;
  } 
 }


 @media(min-width: 446px){
  .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 230px;
  left: 150px;
  font-size: 90%;
}
 }


@media(min-width:450px){
  

  .animationimg1{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 150px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 150px; left: 125px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 150px; left: 125px; top: 230px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 230px;}
    30%{display: grid; width: 150px; top: 230px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 125px;}
    40%{display: grid; width: 150px; top: 230px; left: 125px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 150px; left: 125px; top: 230px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 150px; top: 230px; left: 125px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 150px; transform: rotate(0deg); left: 125px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 150px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 125px;}
    80%{display: grid; width: 150px; transform: rotate(0deg); left: 125px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 150px; left: 125px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 150px; left: 125px; top: 230px;}
  }

.control-images{
    width: 150px;
    left: 130px;
    top: 250px;
    height: 260px;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 230px;
  left: 160px;
  font-size: 90%;
}
}


 
 @media(min-width:500px){
    .slow-harsh{
       width: 40px;
       height: auto;
       font-size: 100%;
       animation-name: slow-myAnimation1;
    }

    @keyframes slow-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.slow-harsh1{
       width: 80px;
       height: auto;
       font-size: 100%;
       animation-name: slow-myAnimation2;
}

@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 355px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 355px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 450px; left: 355px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 450px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 95px;
  height: auto;
  font-size: 100%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 355px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 355px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 480px; left: 355px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 480px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 480px;  left: 355px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left: 355px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 355px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 100px;
    height: auto;
    font-size: 100%;
    animation-name: slow-myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 475px; left: 80px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 475px; left: 120px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 475px; left: 160px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 475px; left: 180px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 475px; left: 220px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 475px; left: 80px;}
  }

.slow-harsh6{
  width: 50px;
  height: auto;
  font-size: 100%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -820px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -710px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 360px; top: -710px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 360px; top: -300px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -300px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -300px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px; }
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 100%;
}

.dell{
    margin-top: 150px;
     margin-left: 80px;
     width:300px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 180px;
  margin-left: 25%;
}

.paragraph{
  font-size: 170%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 295px;
  left: 180px;
  font-size: 100%;
}


  .animationimg1{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 180px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 180px; left: 140px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 180px; left: 140px; top: 180px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 180px;}
    30%{display: grid; width: 180px; top: 180px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 140px;}
    40%{display: grid; width: 180px; top: 180px; left: 140px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 180px; top: 400px;}
    50%{display: grid; width: 180px; left: 140px; top: 180px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 180px;}
    60%{display: grid; width: 180px; top: 180px; left: 140px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 180px; transform: rotate(0deg); left: 140px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 180px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 140px;}
    80%{display: grid; width: 180px; transform: rotate(0deg); left: 140px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 180px; left: 140px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 180px; left: 140px; top: 180px;}
  }

  .control-images{
    width: 180px;
    left: 140px;
    top: 315px;
    height: 320px;
}
 }


 @media(min-width:505px){
  .control-images{
    width: 180px;
    left: 140px;
    top: 285px;
    height: 320px;
  }

  .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 265px;
  left: 190px;
  font-size: 100%;
}
 }
 
@media(min-width:550px){
  
  .animationimg1{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 180px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 180px; left: 150px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 180px; left: 150px; top: 180px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 180px;}
    30%{display: grid; width: 180px; top: 180px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 150px;}
    40%{display: grid; width: 180px; top: 180px; left: 150px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 180px; top: 400px;}
    50%{display: grid; width: 180px; left: 150px; top: 180px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 180px;}
    60%{display: grid; width: 180px; top: 180px; left: 150px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 180px; transform: rotate(0deg); left: 150px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 180px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 150px;}
    80%{display: grid; width: 180px; transform: rotate(0deg); left: 150px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 180px; left: 150px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 180px; left: 150px; top: 180px;}
  }
  
    .control-images{
    width: 180px;
    left: 150px;
    top: 285px;
    height: 315px;
}
}

 

 
 @media(min-width:600px){
    .slow-harsh{
       width: 50px;
       height: auto;
       font-size: 120%;
       animation-name: slow-myAnimation1;
    }

    @keyframes slow-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.slow-harsh1{
       width: 90px;
       height: auto;
       font-size: 120%;
       animation-name: slow-myAnimation2;
}

@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 390px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 390px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 520px; left: 390px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 520px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 120px;
  height: auto;
  font-size: 120%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 390px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 390px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 550px; left: 390px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 550px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 550px;  left: 390px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left: 390px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 390px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 110px;
    height: auto;
    font-size: 120%;
    animation-name: slow-myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 540px; left: 90px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 540px; left: 150px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 540px; left: 220px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 540px; left: 290px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 540px; left: 350px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 540px; left: 90px;}
  }

.slow-harsh6{
  width: 60px;
  height: auto;
  font-size: 120%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -970px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -890px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 390px; top: -890px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 390px; top: -400px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -400px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -400px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 120%;
}

.dell{
    margin-top: 150px;
     margin-left: 100px;
     width: 480px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 220px;
  margin-left: 20%;
}

.paragraph{
  font-size: 200%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 70px;
  top: 285px;
  left: 200px;
  font-size: 120%;
}

  
  .animationimg1{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 220px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 220px; left: 130px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 220px; left: 130px; top: 110px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 110px;}
    30%{display: grid; width: 220px; top: 110px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 130px;}
    40%{display: grid; width: 220px; top: 110px; left: 130px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 110px; top: 400px;}
    50%{display: grid; width: 220px; left: 130px; top: 110px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 110px;}
    60%{display: grid; width: 220px; top: 110px; left: 130px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 220px; transform: rotate(0deg); left: 130px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 110px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 130px;}
    80%{display: grid; width: 220px; transform: rotate(0deg); left: 130px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 220px; left: 130px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 150px; top: 380px;}
    100%{display: grid; width: 220px; left: 130px; top: 110px;}
  }

  
    .control-images{
    width: 220px;
    left: 130px;
    top: 315px;
    height: 380px;
    }
 }




 @media(min-width:650px){
  
  .animationimg1{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 220px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 220px; left: 140px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 220px; left: 140px; top: 110px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 110px;}
    30%{display: grid; width: 220px; top: 110px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 140px;}
    40%{display: grid; width: 220px; top: 110px; left: 140px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 110px; top: 400px;}
    50%{display: grid; width: 220px; left: 140px; top: 110px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 110px;}
    60%{display: grid; width: 220px; top: 110px; left: 140px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 220px; transform: rotate(0deg); left: 140px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 110px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 140px;}
    80%{display: grid; width: 220px; transform: rotate(0deg); left: 140px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 140px;}
    90%{display: grid; width: 220px; left: 140px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 150px; top: 380px;}
    100%{display: grid; width: 220px; left: 140px; top: 110px;}
  }

  
    .control-images{
    width: 220px;
    left: 140px;
    top: 315px;
    height: 380px;
    }
 }
 
 
 @media(min-width: 700px){
    .slow-harsh{
       width: 60px;
       height: auto;
       font-size: 150%;
       animation-name: slow-myAnimation1;
    }

    @keyframes slow-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.slow-harsh1{
       width: 110px;
       height: auto;
       font-size: 150%;
       animation-name: slow-myAnimation2;
}

@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 440px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 280px; left: 440px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 590px; left: 440px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 590px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 150px;
  height: auto;
  font-size: 150%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 440px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 440px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 620px; left: 440px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 620px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 620px;  left: 440px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 160px; left: 440px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 440px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 110px;
    height: auto;
    font-size: 150%;
    animation-name: slow-myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 620px; left: 90px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 620px; left: 180px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 620px; left: 250px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 620px; left: 330px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 620px; left: 400px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 620px; left: 90px;}
  }

.slow-harsh6{
  width: 70px;
  height: auto;
  font-size: 150%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -500px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -1120px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -1040px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 440px; top: -1040px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 440px; top: -480px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -480px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -480px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 150%;
}

.dell{
    margin-top: 180px;
     margin-left: 100px;
     width: 550px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 250px;
  margin-left: 20%;
}

.paragraph{
  font-size: 240%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 90px;
  top: 375px;
  left: 220px;
  font-size: 150%;
}



  .animationimg1{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 250px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 250px; left: 150px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 250px; left: 150px; top: 60px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 60px;}
    30%{display: grid; width: 250px; top: 60px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 150px;}
    40%{display: grid; width: 250px; top: 60px; left: 150px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 250px; left: 150px; top: 60px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 250px; top: 60px; left: 150px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 250px; transform: rotate(0deg); left: 150px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 150px;}
    80%{display: grid; width: 250px; transform: rotate(0deg); left: 150px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 150px;}
    90%{display: grid; width: 250px; left: 150px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 150px; top: 380px;}
    100%{display: grid; width: 250px; left: 150px; top: 60px;}
  }

  
    .control-images{
    width: 250px;
    left: 150px;
    top: 405px;
    height: 430px;
    }
 }


 @media(min-width:713px){

  .control-images{
    width: 250px;
    left: 150px;
    top: 360px;
    height: 430px;
    }

    .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 90px;
  top: 330px;
  left: 220px;
  font-size: 150%;
}
 }


 @media(min-width:750px){
  
  .animationimg1{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 250px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 250px; left: 165px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 250px; left: 165px; top: 60px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 60px;}
    30%{display: grid; width: 250px; top: 60px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 165px;}
    40%{display: grid; width: 250px; top: 60px; left: 165px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 165px; top: 400px;}
    50%{display: grid; width: 250px; left: 165px; top: 60px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 165px;}
    60%{display: grid; width: 250px; top: 60px; left: 165px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 250px; transform: rotate(0deg); left: 165px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 165px;}
    80%{display: grid; width: 250px; transform: rotate(0deg); left: 165px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 165px;}
    90%{display: grid; width: 250px; left: 165px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 165px; top: 380px;}
    100%{display: grid; width: 250px; left: 165px; top: 60px;}
  }
 
    .control-images{
    width: 250px;
    left: 165px;
    top: 365px;
    height: 430px;
    }
 }

 
 
 @media(min-width: 800px){
    .slow-harsh{
       width: 70px;
       height: auto;
       font-size: 180%;
       animation-name: slow-myAnimation1;
    }

    @keyframes slow-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.slow-harsh1{
       width: 140px;
       height: auto;
       font-size: 180%;
       animation-name: slow-myAnimation2;
}

@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 490px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 280px; left: 490px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 680px; left: 490px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 680px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 180px;
  height: auto;
  font-size: 180%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 490px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 490px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 710px; left: 490px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 710px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 710px;  left: 490px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 160px; left: 490px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 490px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 110px;
    height: auto;
    font-size: 180%;
    animation-name: slow-myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 710px; left: 90px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 710px; left: 200px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 710px; left: 280px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 710px; left: 370px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 710px; left: 460px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 710px; left: 90px;}
  }

.slow-harsh6{
  width: 80px;
  height: auto;
  font-size: 180%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 220px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -500px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 16px; top: -1300px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -1200px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 490px; top: -1200px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 490px; top: -565px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -565px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -565px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 220px; top: 30px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 220px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 180%;
}

.dell{
    margin-top: 220px;
     margin-left: 110px;
     width: 650px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 280px;
  margin-left: 20%;
}

.paragraph{
  font-size: 280%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 120px;
  top: 435px;
  left: 250px;
  font-size: 180%;
}



  .animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 280px; left: 170px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 280px; left: 170px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 170px;}
    40%{display: grid; width: 280px; top: 10px; left: 170px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 170px; top: 400px;}
    50%{display: grid; width: 280px; left: 170px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 170px;}
    60%{display: grid; width: 280px; top: 10px; left: 170px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 170px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 170px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 170px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 170px;}
    90%{display: grid; width: 280px; left: 170px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 170px; top: 380px;}
    100%{display: grid; width: 280px; left: 170px; top: 10px;}
  }

  
    .control-images{
    width: 280px;
    left: 170px;
    top: 470px;
    height: 480px;
    }
 }

@media(min-width:831px){
  .control-images{
    width: 280px;
    left: 170px;
    top: 430px;
    height: 480px;
    }

    .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 120px;
  top: 380px;
  left: 250px;
  font-size: 180%;
}
 }

 @media(min-width:850px){

  .animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 280px; left: 180px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 280px; left: 180px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 180px;}
    40%{display: grid; width: 280px; top: 10px; left: 180px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 180px; top: 400px;}
    50%{display: grid; width: 280px; left: 180px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 180px;}
    60%{display: grid; width: 280px; top: 10px; left: 180px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 180px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 180px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 180px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 180px;}
    90%{display: grid; width: 280px; left: 180px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 180px; top: 380px;}
    100%{display: grid; width: 280px; left: 180px; top: 10px;}
  }

  
    .control-images{
    width: 280px;
    left: 180px;
    top: 420px;
    height: 480px;
    }
 }


  
 @media(min-width: 900px){
    .slow-harsh{
       width: 55px;
       height: auto;
       font-size: 150%;
       animation-name: slow-myAnimation1;
    }

    @keyframes slow-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.slow-harsh1{
       width: 70px;
       height: auto;
       font-size: 150%;
       animation-name: slow-myAnimation2;
}

@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 360px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 280px; left: 360px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 560px; left: 360px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 560px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 120px;
  height: auto;
  font-size: 150%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 360px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 360px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 425px; left: 360px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 425px; left: 520px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 425px;  left: 360px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 360px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 360px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 100px;
    height: auto;
    font-size: 150%;
    animation-name: slow-myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 60px; left: 570px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 60px; left: 600px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 60px; left: 630px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 60px; left: 670px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 60px; left: 700px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 60px; left: 570px;}
  }

.slow-harsh6{
  width: 70px;
  height: auto;
  font-size: 150%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 820px; top: -370px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 820px; top: -550px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 400px; top: -550px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 10px; top: -550px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -200px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -550px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 390px; top: -550px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 390px; top: -200px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 390px; top: -550px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 820px; top: -550px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 820px; top: -620px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 820px; top: -370px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 200%;
}

.dell{
    margin-top: 90px;
    width: 400px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 200px;
  margin-left: 30%;
}

.paragraph{
  font-size: 320%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 100px;
  top: 500px;
  left: 200px;
  font-size: 150%;
}


  .animationimg1{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 200px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 145px;}
    10%{display: grid; width: 200px; left: 135px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 200px; left: 135px; top: 145px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 145px;}
    30%{display: grid; width: 200px; top: 145px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 135px;}
    40%{display: grid; width: 200px; top: 145px; left: 135px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 135px; top: 400px;}
    50%{display: grid; width: 200px; left: 135px; top: 145px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 135px;}
    60%{display: grid; width: 200px; top: 145px; left: 135px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 200px; transform: rotate(0deg); left: 135px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 145px; transform: rotate(-360deg); left: 135px;}
    80%{display: grid; width: 200px; transform: rotate(0deg); left: 135px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 135px;}
    90%{display: grid; width: 200px; left: 135px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 135px; top: 380px;}
    100%{display: grid; width: 200px; left: 135px; top: 145px;}
  }

  .control-images{
    width: 200px;
    left: 135px;
    top: 530px;
    height: 350px;
  }
 } 


@media(min-width: 950px){
  .control-images{
    width: 200px;
    left: 140px;
    top: 470px;
    height: 350px;
    }

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 100px;
  top: 440px;
  left: 200px;
  font-size: 150%;
}
 }

 
  
 @media(min-width: 1000px){
    .slow-harsh{
       width: 60px;
       height: auto;
       font-size: 160%;
       animation-name: slow-myAnimation1;
    }

    @keyframes slow-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.slow-harsh1{
       width: 70px;
       height: auto;
       font-size: 160%;
       animation-name: slow-myAnimation2;
}

@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 380px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 380px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 660px; left: 380px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 660px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 120px;
  height: auto;
  font-size: 160%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 380px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 380px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 475px; left: 380px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 475px; left: 540px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 475px;  left: 380px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 380px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 380px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 100px;
    height: auto;
    font-size: 160%;
    animation-name: slow-myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 60px; left: 600px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 60px; left: 640px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 60px; left: 690px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 60px; left: 750px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 60px; left: 800px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 60px; left: 600px;}
  }

.slow-harsh6{
  width: 70px;
  height: auto;
  font-size: 160%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 920px; top: -480px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 920px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 400px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -250px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 390px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 390px; top: -250px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 390px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 920px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 920px; top: -750px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 920px; top: -480px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 200%;
}

.dell{
    margin-top: 90px;
    width: 450px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 250px;
  margin-left: 20%;
}

.paragraph{
  font-size: 320%;
}

.harsh5{
  display: grid;
  width: 100px;
  top: 460px;
  left: 190px;
  font-size: 150%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 250px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 60px;}
    10%{display: grid; width: 250px; left: 105px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 250px; top: 500px;}
    20%{display: grid; width: 250px; left: 105px; top: 60px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 60px;}
    30%{display: grid; width: 250px; top: 60px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 105px;}
    40%{display: grid; width: 250px; top: 60px; left: 105px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 105px; top: 400px;}
    50%{display: grid; width: 250px; left: 105px; top: 60px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 105px;}
    60%{display: grid; width: 250px; top: 60px; left: 105px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 250px;}
    70%{display: grid; width: 250px; transform: rotate(0deg); left: 105px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 250px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 105px;}
    80%{display: grid; width: 250px; transform: rotate(0deg); left: 105px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 105px;}
    90%{display: grid; width: 250px; left: 105px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 105px; top: 380px;}
    100%{display: grid; width: 250px; left: 105px; top: 60px;}
  }

.control-images{
    width: 250px;
    left: 105px;
    top: 490px;
    height: 430px;
}
 }


 
 
  
 @media(min-width: 1100px){
    .slow-harsh{
       width: 60px;
       height: auto;
       font-size: 170%;
       animation-name: slow-myAnimation1;
    }

    @keyframes slow-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.slow-harsh1{
       width: 130px;
       height: auto;
       font-size: 170%;
       animation-name: slow-myAnimation2;
}

@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 440px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 440px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 440px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 120px;
  height: auto;
  font-size: 170%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 440px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 440px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 485px; left: 440px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 485px; left: 640px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 485px;  left: 440px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 440px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 440px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 100px;
    height: auto;
    font-size: 170%;
    animation-name: slow-myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 55px; left: 630px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 55px; left: 670px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 55px; left: 730px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 55px; left: 790px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 55px; left: 850px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 55px; left: 630px;}
  }

.slow-harsh6{
  width: 75px;
  height: auto;
  font-size: 170%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1000px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1000px; top: -680px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 500px; top: -680px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -680px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -680px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 450px; top: -680px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 450px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 450px; top: -680px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1000px; top: -680px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1000px; top: -760px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1000px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 220%;
}

.dell{
    margin-top: 90px;
    width: 490px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 350%;
}

.harsh5{
  display: grid;
  width: 110px;
  top: 455px;
  left: 220px;
  font-size: 160%;
}

.harsh7{
  display: none;
}

.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 145px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 145px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 145px;}
    40%{display: grid; width: 280px; top: 10px; left: 145px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 145px; top: 400px;}
    50%{display: grid; width: 280px; left: 145px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 145px;}
    60%{display: grid; width: 280px; top: 10px; left: 145px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 145px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 145px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 145px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 145px;}
    90%{display: grid; width: 280px; left: 145px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 145px; top: 380px;}
    100%{display: grid; width: 280px; left: 145px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 145px;
    top: 490px;
    height: 480px;
}
 }



  
  
 @media(min-width: 1200px){
    .slow-harsh{
       width: 60px;
       height: auto;
       font-size: 170%;
       animation-name: slow-myAnimation1;
    }

    @keyframes slow-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.slow-harsh1{
       width: 130px;
       height: auto;
       font-size: 170%;
       animation-name: slow-myAnimation2;
}

@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 460px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 460px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 460px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 170px;
  height: auto;
  font-size: 170%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 460px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 460px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 495px; left: 460px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 495px; left: 640px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 495px;  left: 460px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 460px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 460px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 100px;
    height: auto;
    font-size: 170%;
    animation-name: myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 55px; left: 700px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 55px; left: 770px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 55px; left: 840px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 55px; left: 910px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 55px; left: 970px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 55px; left: 700px;}
  }

.slow-harsh6{
  width: 75px;
  height: auto;
  font-size: 170%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1100px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1100px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 500px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 470px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 470px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 470px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1100px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1100px; top: -720px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1100px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 220%;
}

.dell{
    margin-top: 90px;
    width: 550px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 350%;
}

.harsh5{
  display: grid;
  width: 110px;
  top: 420px;
  left: 220px;
  font-size: 170%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 160px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 160px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 160px;}
    40%{display: grid; width: 280px; top: 10px; left: 160px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 160px; top: 400px;}
    50%{display: grid; width: 280px; left: 160px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 160px;}
    60%{display: grid; width: 280px; top: 10px; left: 160px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 160px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 160px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 160px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 160px;}
    90%{display: grid; width: 280px; left: 160px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 160px; top: 380px;}
    100%{display: grid; width: 280px; left: 160px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 160px;
    top: 455px;
    height: 480px;
}
 }



   
  
 @media(min-width: 1300px){
    .slow-harsh{
       width: 65px;
       height: auto;
       font-size: 180%;
       animation-name: slow-myAnimation1;
    }

    @keyframes slow-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.slow-harsh1{
       width: 130px;
       height: auto;
       font-size: 180%;
       animation-name: slow-myAnimation2;
}

@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 480px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 480px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 480px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 180px;
  height: auto;
  font-size: 180%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 480px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 480px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 520px; left: 480px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 520px; left: 670px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 520px;  left: 480px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 480px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 480px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 100px;
    height: auto;
    font-size: 180%;
    animation-name: slow-myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 55px; left: 750px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 55px; left: 820px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 55px; left: 890px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 55px; left: 950px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 55px; left: 1020px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 55px; left: 750px;}
  }

.slow-harsh6{
  width: 80px;
  height: auto;
  font-size: 180%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1190px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1190px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 600px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 480px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 480px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 480px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1190px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1190px; top: -720px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1190px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 250%;
}

.dell{
    margin-top: 90px;
    width: 600px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 380%;
}

.harsh5{
  display: grid;
  width: 120px;
  top: 450px;
  left: 230px;
  font-size: 180%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 170px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 170px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 170px;}
    40%{display: grid; width: 280px; top: 10px; left: 170px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 170px; top: 400px;}
    50%{display: grid; width: 280px; left: 170px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 170px;}
    60%{display: grid; width: 280px; top: 10px; left: 170px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 170px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 170px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 170px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 170px;}
    90%{display: grid; width: 280px; left: 170px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 170px; top: 380px;}
    100%{display: grid; width: 280px; left: 170px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 170px;
    top: 490px;
    height: 480px;
}
 }





 

  
 @media(min-width: 1400px){
    .slow-harsh{
       width: 70px;
       height: auto;
       font-size: 190%;
       animation-name: slow-myAnimation1;
    }

    @keyframes slow-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.slow-harsh1{
       width: 140px;
       height: auto;
       font-size: 190%;
       animation-name: slow-myAnimation2;
}

@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 480px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 480px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 480px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 200px;
  height: auto;
  font-size: 190%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 480px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 480px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 540px; left: 480px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 540px; left: 670px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 540px;  left: 480px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 480px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 480px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 110px;
    height: auto;
    font-size: 190%;
    animation-name: slow-myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 55px; left: 750px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 55px; left: 820px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 55px; left: 890px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 55px; left: 950px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 55px; left: 1020px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 55px; left: 750px;}
  }

.slow-harsh6{
  width: 90px;
  height: auto;
  font-size: 190%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1190px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1190px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 600px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 480px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 480px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 480px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1190px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1190px; top: -720px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1190px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 250%;
}

.dell{
    margin-top: 90px;
    width: 600px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 380%;
}

.harsh5{
  display: grid;
  width: 125px;
  top: 460px;
  left: 240px;
  font-size: 190%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 180px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 180px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 180px;}
    40%{display: grid; width: 280px; top: 10px; left: 180px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 180px; top: 400px;}
    50%{display: grid; width: 280px; left: 180px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 180px;}
    60%{display: grid; width: 280px; top: 10px; left: 180px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 180px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 180px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 180px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 170px;}
    90%{display: grid; width: 280px; left: 170px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 180px; top: 380px;}
    100%{display: grid; width: 280px; left: 180px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 180px;
    top: 495px;
    height: 480px;
   
}
 }











 
  
 @media(min-width: 1500px){
    .slow-harsh{
       width: 70px;
       height: auto;
       font-size: 190%;
       animation-name: slow-myAnimation1;
    }

    @keyframes slow-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.slow-harsh1{
       width: 140px;
       height: auto;
       font-size: 190%;
       animation-name: slow-myAnimation2;
}

@keyframes slow-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 520px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 520px; transform: rotate(-30deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 520px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.slow-harsh2{
  width: 200px;
  height: auto;
  font-size: 190%;
  animation-name: slow-myAnimation3;
}

@keyframes slow-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 520px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 520px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 540px; left: 520px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 540px; left: 750px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 540px;  left: 520px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 520px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 520px; transform: rotate(-10deg);}
  }

  .slow-harsh3{
     width: 110px;
    height: auto;
    font-size: 190%;
    animation-name: slow-myAnimation4;
  }
  
@keyframes slow-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 50px; left: 800px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 50px; left: 890px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 50px; left: 980px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 50px; left: 1080px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 50px; left: 1150px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 50px; left: 800px;}
  }

.slow-harsh6{
  width: 90px;
  height: auto;
  font-size: 190%;
  animation-name: slow-myAnimation5;
}
  
@keyframes slow-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1300px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1300px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 600px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 520px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 520px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 520px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1190px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1300px; top: -650px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1300px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 250%;
}

.dell{
    margin-top: 90px;
    width: 600px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 380%;
}

.harsh5{
  display: grid;
  width: 125px;
  top: 460px;
  left: 250px;
  font-size: 190%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 190px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 190px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 190px;}
    40%{display: grid; width: 280px; top: 10px; left: 190px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 190px; top: 400px;}
    50%{display: grid; width: 280px; left: 190px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 190px;}
    60%{display: grid; width: 280px; top: 10px; left: 190px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 190px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 190px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 190px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 190px;}
    90%{display: grid; width: 280px; left: 190px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 190px; top: 380px;}
    100%{display: grid; width: 280px; left: 190px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 190px;
    top: 495px;
    height: 480px;
   
}
 }








































 












 /*fast animation*/


 
@media(max-width:300px){
    .fast-harsh{
       width: 35px;
       height: auto;
       font-size: 80%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 85%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.fast-harsh1{
       width: 60px;
       height: auto;
       font-size: 80%;
       animation-name: fast-myAnimation2;
}
@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 210px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 210px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 335px; left: 210px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 335px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 65px;
  height: auto;
  font-size: 80%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 210px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 210px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 355px; left: 210px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 355px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 355px;  left: 210px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left:210px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 210px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 100px;
    height: auto;
    font-size: 80%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 350px; left: 80px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 350px; left: 100px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 350px; left: 120px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 350px; left: 150px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 350px; left: 160px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 350px; left: 80px;}
  }

.fast-harsh6{
  width: 50px;
  height: auto;
  font-size: 80%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -600px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -530px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 210px; top: -530px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 210px; top: -240px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -240px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -240px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px; }
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 5px 5px;
  font-size: 80%;
}

.dell{
    margin-top: 130px;
     margin-left: 80px;
     width:200px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 120px;
  margin-left: 25%;
}

.paragraph{
  font-size: 120%;
  width: 100%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 240px;
  left: 100px;
  font-size: 80%;
}

  .animationimg1{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 76px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 120px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 120px; left: 75px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 120px; left: 75px; top: 280px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 280px;}
    30%{display: grid; width: 120px; top: 280px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 75px;}
    40%{display: grid; width: 120px; top: 280px; left: 75px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 120px; left: 75px; top: 280px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 120px; top: 280px; left: 75px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 120px; transform: rotate(0deg); left: 75px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 120px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 75px;}
    80%{display: grid; width: 120px; transform: rotate(0deg); left: 75px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 120px; left: 75px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 75px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 120px; left: 75px; top: 280px;}
  }


   .control-images{
    width: 120px;
    left: 75px;
    top: 260px;
    height: 210px;
  }
  }


  @media(min-width:300px){
    .fast-harsh{
       width: 35px;
       height: auto;
       font-size: 80%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 40%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 85%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 40%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }


.fast-harsh1{
       width: 60px;
       height: auto;
       font-size: 80%;
       animation-name: fast-myAnimation2;
}
@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 240px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 240px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 340px; left: 240px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 340px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 65px;
  height: auto;
  font-size: 80%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 235px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 235px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 360px; left: 235px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 360px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 360px;  left: 235px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left: 235px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 235px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 100px;
    height: auto;
    font-size: 80%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 350px; left: 80px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 350px; left: 100px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 350px; left: 120px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 350px; left: 150px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 350px; left: 160px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 350px; left: 80px;}
  }

.fast-harsh6{
  width: 50px;
  height: auto;
  font-size: 80%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -600px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -530px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 240px; top: -530px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 240px; top: -230px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -230px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -230px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px; }
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 5px 8px;
  font-size: 80%;
}

.dell{
    margin-top: 130px;
     margin-left: 80px;
     width:200px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 120px;
  margin-left: 25%;
}

.paragraph{
  font-size: 120%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 240px;
  left: 120px;
  font-size: 80%;
}


  .animationimg1{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 120px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 120px; left: 85px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 120px; left: 85px; top: 280px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 280px;}
    30%{display: grid; width: 120px; top: 280px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 85px;}
    40%{display: grid; width: 120px; top: 280px; left: 85px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 120px; left: 85px; top: 280px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 120px; top: 280px; left: 85px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 120px; transform: rotate(0deg); left: 85px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 120px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 85px;}
    80%{display: grid; width: 120px; transform: rotate(0deg); left: 85px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 120px; left: 85px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 85px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 120px; left: 85px; top: 280px;}
  }

  .control-images{
    width: 120px;
    left: 90px;
    top: 260px;
    height: 210px;
  } 
  }




  @media(min-width:350px) {
    

  .animationimg1{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 120px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 120px; left: 100px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 120px; left: 100px; top: 280px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 280px;}
    30%{display: grid; width: 120px; top: 280px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 100px;}
    40%{display: grid; width: 120px; top: 280px; left: 100px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 120px; left: 100px; top: 280px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 120px; top: 280px; left: 100px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 120px; transform: rotate(0deg); left: 100px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 120px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 100px;}
    80%{display: grid; width: 120px; transform: rotate(0deg); left: 100px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 120px; left: 100px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 120px;
    height: auto;
    top: 280px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 100px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 120px; left: 100px; top: 280px;}
  }

.control-images{
    width: 120px;
    left: 100px;
    top: 260px;
    height: 210px;
  }   

  .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 240px;
  left: 130px;
  font-size: 80%;
}
  }


@media(min-width:357px){
.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 218px;
  left: 130px;
  font-size: 80%;
}
  }

@media(min-width:360px){
.control-images{
    width: 120px;
    left: 100px;
    top: 240px;
    height: 210px;
  } 

}




 @media(min-width:400px){
    .fast-harsh{
       width: 35px;
       height: auto;
       font-size: 90%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 40%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 85%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 40%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.fast-harsh1{
       width: 70px;
       height: auto;
       font-size: 90%;
       animation-name: fast-myAnimation2;
}

@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 300px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 300px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 380px; left: 300px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 380px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 90px;
  height: auto;
  font-size: 90%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 300px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 300px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 400px; left: 300px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 400px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 400px;  left: 300px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left: 300px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 300px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 100px;
    height: auto;
    font-size: 90%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 390px; left: 80px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 390px; left: 120px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 390px; left: 160px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 390px; left: 180px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 390px; left: 220px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 390px; left: 80px;}
  }

.fast-harsh6{
  width: 50px;
  height: auto;
  font-size: 90%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -700px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -620px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 300px; top: -620px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 300px; top: -280px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -280px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -280px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px; }
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 90%;
}

.dell{
    margin-top: 115px;
     margin-left: 80px;
     width:300px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 150px;
  margin-left: 25%;
}

.paragraph{
  font-size: 150%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 255px;
  left: 150px;
  font-size: 90%;
}


  .animationimg1{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 150px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 150px; left: 115px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 150px; left: 115px; top: 230px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 230px;}
    30%{display: grid; width: 150px; top: 230px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 115px;}
    40%{display: grid; width: 150px; top: 230px; left: 115px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 150px; left: 115px; top: 230px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 150px; top: 230px; left: 115px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 150px; transform: rotate(0deg); left: 115px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 150px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 115px;}
    80%{display: grid; width: 150px; transform: rotate(0deg); left: 115px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 150px; left: 115px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 115px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 150px; left: 115px; top: 230px;}
  }

  .control-images{
    width: 150px;
    left: 115px;
    top: 280px;
    height: 260px;
  } 
 }


 @media(min-width: 446px){
  .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 230px;
  left: 150px;
  font-size: 90%;
}
 }


@media(min-width:450px){
  

  .animationimg1{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 150px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 150px; left: 125px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 150px; left: 125px; top: 230px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 230px;}
    30%{display: grid; width: 150px; top: 230px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 125px;}
    40%{display: grid; width: 150px; top: 230px; left: 125px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 150px; left: 125px; top: 230px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 150px; top: 230px; left: 125px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 150px; transform: rotate(0deg); left: 125px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 150px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 125px;}
    80%{display: grid; width: 150px; transform: rotate(0deg); left: 125px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 150px; left: 125px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 150px;
    height: auto;
    top: 230px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 125px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 150px; left: 125px; top: 230px;}
  }

.control-images{
    width: 150px;
    left: 130px;
    top: 250px;
    height: 260px;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 230px;
  left: 160px;
  font-size: 90%;
}
}


 
 @media(min-width:500px){
    .fast-harsh{
       width: 40px;
       height: auto;
       font-size: 100%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.fast-harsh1{
       width: 80px;
       height: auto;
       font-size: 100%;
       animation-name: fast-myAnimation2;
}

@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 355px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 355px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 450px; left: 355px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 450px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 95px;
  height: auto;
  font-size: 100%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 355px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 355px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 480px; left: 355px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 480px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 480px;  left: 355px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left: 355px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 355px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 100px;
    height: auto;
    font-size: 100%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 475px; left: 80px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 475px; left: 120px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 475px; left: 160px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 475px; left: 180px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 475px; left: 220px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 475px; left: 80px;}
  }

.fast-harsh6{
  width: 50px;
  height: auto;
  font-size: 100%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -820px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -710px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 360px; top: -710px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 360px; top: -300px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -300px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -300px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px; }
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 100%;
}

.dell{
    margin-top: 150px;
     margin-left: 80px;
     width:300px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 180px;
  margin-left: 25%;
}

.paragraph{
  font-size: 170%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 295px;
  left: 180px;
  font-size: 100%;
}


  .animationimg1{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 180px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 180px; left: 140px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 180px; left: 140px; top: 180px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 180px;}
    30%{display: grid; width: 180px; top: 180px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 140px;}
    40%{display: grid; width: 180px; top: 180px; left: 140px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 180px; top: 400px;}
    50%{display: grid; width: 180px; left: 140px; top: 180px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 180px;}
    60%{display: grid; width: 180px; top: 180px; left: 140px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 180px; transform: rotate(0deg); left: 140px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 180px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 140px;}
    80%{display: grid; width: 180px; transform: rotate(0deg); left: 140px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 180px; left: 140px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 180px; left: 140px; top: 180px;}
  }

  .control-images{
    width: 180px;
    left: 140px;
    top: 315px;
    height: 320px;
}
 }


 @media(min-width:505px){
  .control-images{
    width: 180px;
    left: 140px;
    top: 285px;
    height: 320px;
  }

  .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 60px;
  top: 265px;
  left: 190px;
  font-size: 100%;
}
 }
 
@media(min-width:550px){
  
  .animationimg1{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 180px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 180px; left: 150px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 180px; left: 150px; top: 180px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 180px;}
    30%{display: grid; width: 180px; top: 180px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 150px;}
    40%{display: grid; width: 180px; top: 180px; left: 150px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 180px; top: 400px;}
    50%{display: grid; width: 180px; left: 150px; top: 180px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 180px;}
    60%{display: grid; width: 180px; top: 180px; left: 150px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 180px; transform: rotate(0deg); left: 150px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 180px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 150px;}
    80%{display: grid; width: 180px; transform: rotate(0deg); left: 150px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 180px; left: 150px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 180px;
    height: auto;
    top: 180px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 100px; top: 380px;}
    100%{display: grid; width: 180px; left: 150px; top: 180px;}
  }
  
    .control-images{
    width: 180px;
    left: 150px;
    top: 285px;
    height: 315px;
}
}

 

 
 @media(min-width:600px){
    .fast-harsh{
       width: 50px;
       height: auto;
       font-size: 120%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.fast-harsh1{
       width: 90px;
       height: auto;
       font-size: 120%;
       animation-name: fast-myAnimation2;
}

@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 390px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 180px; left: 390px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 520px; left: 390px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 520px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 120px;
  height: auto;
  font-size: 120%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 80px; left: 390px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 390px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 550px; left: 390px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 550px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 550px;  left: 390px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 100px; left: 390px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 80px; left: 390px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 110px;
    height: auto;
    font-size: 120%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 540px; left: 90px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 540px; left: 150px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 540px; left: 220px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 540px; left: 290px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 540px; left: 350px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 540px; left: 90px;}
  }

.fast-harsh6{
  width: 60px;
  height: auto;
  font-size: 120%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -200px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -970px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -890px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 390px; top: -890px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 390px; top: -400px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -400px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -400px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 120%;
}

.dell{
    margin-top: 150px;
     margin-left: 100px;
     width: 480px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 220px;
  margin-left: 20%;
}

.paragraph{
  font-size: 200%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 70px;
  top: 285px;
  left: 200px;
  font-size: 120%;
}

  
  .animationimg1{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 220px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 220px; left: 130px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 220px; left: 130px; top: 110px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 110px;}
    30%{display: grid; width: 220px; top: 110px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 130px;}
    40%{display: grid; width: 220px; top: 110px; left: 130px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 110px; top: 400px;}
    50%{display: grid; width: 220px; left: 130px; top: 110px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 110px;}
    60%{display: grid; width: 220px; top: 110px; left: 130px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 220px; transform: rotate(0deg); left: 130px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 110px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 130px;}
    80%{display: grid; width: 220px; transform: rotate(0deg); left: 130px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 130px;}
    90%{display: grid; width: 220px; left: 130px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 130px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 150px; top: 380px;}
    100%{display: grid; width: 220px; left: 130px; top: 110px;}
  }

  
    .control-images{
    width: 220px;
    left: 130px;
    top: 315px;
    height: 380px;
    }
 }




 @media(min-width:650px){
  
  .animationimg1{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 220px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 220px; left: 140px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 220px; left: 140px; top: 110px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 110px;}
    30%{display: grid; width: 220px; top: 110px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 140px;}
    40%{display: grid; width: 220px; top: 110px; left: 140px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 110px; top: 400px;}
    50%{display: grid; width: 220px; left: 140px; top: 110px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 110px;}
    60%{display: grid; width: 220px; top: 110px; left: 140px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 220px; transform: rotate(0deg); left: 140px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 110px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 140px;}
    80%{display: grid; width: 220px; transform: rotate(0deg); left: 140px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 140px;}
    90%{display: grid; width: 220px; left: 140px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 220px;
    height: auto;
    top: 110px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 140px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 150px; top: 380px;}
    100%{display: grid; width: 220px; left: 140px; top: 110px;}
  }

  
    .control-images{
    width: 220px;
    left: 140px;
    top: 315px;
    height: 380px;
    }
 }
 
 
 @media(min-width: 700px){
    .fast-harsh{
       width: 60px;
       height: auto;
       font-size: 150%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.fast-harsh1{
       width: 110px;
       height: auto;
       font-size: 150%;
       animation-name: fast-myAnimation2;
}

@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 440px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 280px; left: 440px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 590px; left: 440px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 590px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 150px;
  height: auto;
  font-size: 150%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 440px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 440px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 620px; left: 440px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 620px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 620px;  left: 440px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 160px; left: 440px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 440px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 110px;
    height: auto;
    font-size: 150%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 620px; left: 90px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 620px; left: 180px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 620px; left: 250px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 620px; left: 330px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 620px; left: 400px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 620px; left: 90px;}
  }

.fast-harsh6{
  width: 70px;
  height: auto;
  font-size: 150%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 120px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -500px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 16px; top: -1120px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -1040px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 440px; top: -1040px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 440px; top: -480px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -480px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -480px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 120px; top: 30px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 120px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 150%;
}

.dell{
    margin-top: 180px;
     margin-left: 100px;
     width: 550px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 250px;
  margin-left: 20%;
}

.paragraph{
  font-size: 240%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 90px;
  top: 375px;
  left: 220px;
  font-size: 150%;
}



  .animationimg1{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 250px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 250px; left: 150px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 250px; left: 150px; top: 60px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 60px;}
    30%{display: grid; width: 250px; top: 60px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 150px;}
    40%{display: grid; width: 250px; top: 60px; left: 150px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 150px; top: 400px;}
    50%{display: grid; width: 250px; left: 150px; top: 60px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 150px;}
    60%{display: grid; width: 250px; top: 60px; left: 150px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 250px; transform: rotate(0deg); left: 150px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 150px;}
    80%{display: grid; width: 250px; transform: rotate(0deg); left: 150px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 150px;}
    90%{display: grid; width: 250px; left: 150px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 150px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 150px; top: 380px;}
    100%{display: grid; width: 250px; left: 150px; top: 60px;}
  }

  
    .control-images{
    width: 250px;
    left: 150px;
    top: 405px;
    height: 430px;
    }
 }


 @media(min-width:713px){

  .control-images{
    width: 250px;
    left: 150px;
    top: 360px;
    height: 430px;
    }

    .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 90px;
  top: 330px;
  left: 220px;
  font-size: 150%;
}
 }


 @media(min-width:750px){
  
  .animationimg1{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 250px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 250px; left: 165px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 250px; left: 165px; top: 60px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 60px;}
    30%{display: grid; width: 250px; top: 60px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 165px;}
    40%{display: grid; width: 250px; top: 60px; left: 165px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 165px; top: 400px;}
    50%{display: grid; width: 250px; left: 165px; top: 60px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 165px;}
    60%{display: grid; width: 250px; top: 60px; left: 165px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 250px; transform: rotate(0deg); left: 165px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 165px;}
    80%{display: grid; width: 250px; transform: rotate(0deg); left: 165px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 165px;}
    90%{display: grid; width: 250px; left: 165px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 165px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 165px; top: 380px;}
    100%{display: grid; width: 250px; left: 165px; top: 60px;}
  }
 
    .control-images{
    width: 250px;
    left: 165px;
    top: 365px;
    height: 430px;
    }
 }

 
 
 @media(min-width: 800px){
    .fast-harsh{
       width: 70px;
       height: auto;
       font-size: 180%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.fast-harsh1{
       width: 140px;
       height: auto;
       font-size: 180%;
       animation-name: fast-myAnimation2;
}

@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 490px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 280px; left: 490px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 680px; left: 490px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 680px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 180px;
  height: auto;
  font-size: 180%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 490px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 490px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 710px; left: 490px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 710px; left: 120px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 710px;  left: 490px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 160px; left: 490px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 490px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 110px;
    height: auto;
    font-size: 180%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 710px; left: 90px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 710px; left: 200px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 710px; left: 280px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 710px; left: 370px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 710px; left: 460px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 710px; left: 90px;}
  }

.fast-harsh6{
  width: 80px;
  height: auto;
  font-size: 180%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 220px; top: 10px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 16px; top: 10px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 16px; top: -500px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 16px; top: -1300px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 16px; top: -1200px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 490px; top: -1200px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 490px; top: -565px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 120px; top: -565px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 20px; top: -565px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 20px; top: 30px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 220px; top: 30px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 220px; top: 10px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 180%;
}

.dell{
    margin-top: 220px;
     margin-left: 110px;
     width: 650px;
  }

  .harsh4{
    display: block;
    grid-template-columns: 70% 30%;
}

#harshimage{
  width: 280px;
  margin-left: 20%;
}

.paragraph{
  font-size: 280%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 120px;
  top: 435px;
  left: 250px;
  font-size: 180%;
}



  .animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 280px; left: 170px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 280px; left: 170px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 170px;}
    40%{display: grid; width: 280px; top: 10px; left: 170px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 170px; top: 400px;}
    50%{display: grid; width: 280px; left: 170px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 170px;}
    60%{display: grid; width: 280px; top: 10px; left: 170px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 170px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 170px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 170px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 170px;}
    90%{display: grid; width: 280px; left: 170px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 170px; top: 380px;}
    100%{display: grid; width: 280px; left: 170px; top: 10px;}
  }

  
    .control-images{
    width: 280px;
    left: 170px;
    top: 470px;
    height: 480px;
    }
 }

@media(min-width:831px){
  .control-images{
    width: 280px;
    left: 170px;
    top: 430px;
    height: 480px;
    }

    .harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 120px;
  top: 380px;
  left: 250px;
  font-size: 180%;
}
 }

 @media(min-width:850px){

  .animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 210px;}
    10%{display: grid; width: 280px; left: 180px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 280px; left: 180px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 180px;}
    40%{display: grid; width: 280px; top: 10px; left: 180px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 180px; top: 400px;}
    50%{display: grid; width: 280px; left: 180px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 180px;}
    60%{display: grid; width: 280px; top: 10px; left: 180px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 180px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 180px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 180px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 180px;}
    90%{display: grid; width: 280px; left: 180px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 180px; top: 380px;}
    100%{display: grid; width: 280px; left: 180px; top: 10px;}
  }

  
    .control-images{
    width: 280px;
    left: 180px;
    top: 420px;
    height: 480px;
    }
 }


  
 @media(min-width: 900px){
    .fast-harsh{
       width: 55px;
       height: auto;
       font-size: 150%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.fast-harsh1{
       width: 70px;
       height: auto;
       font-size: 150%;
       animation-name: fast-myAnimation2;
}

@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 360px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 280px; left: 360px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 560px; left: 360px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 560px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 180px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 120px;
  height: auto;
  font-size: 150%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 360px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 360px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 425px; left: 360px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 425px; left: 520px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 425px;  left: 360px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 360px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 360px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 100px;
    height: auto;
    font-size: 150%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 60px; left: 570px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 60px; left: 600px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 60px; left: 630px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 60px; left: 670px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 60px; left: 700px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 60px; left: 570px;}
  }

.fast-harsh6{
  width: 70px;
  height: auto;
  font-size: 150%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 820px; top: -370px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 820px; top: -550px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 400px; top: -550px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 10px; top: -550px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -200px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -550px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 390px; top: -550px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 390px; top: -200px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 390px; top: -550px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 820px; top: -550px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 820px; top: -620px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 820px; top: -370px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 200%;
}

.dell{
    margin-top: 90px;
    width: 400px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 200px;
  margin-left: 30%;
}

.paragraph{
  font-size: 320%;
}

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 100px;
  top: 500px;
  left: 200px;
  font-size: 150%;
}


  .animationimg1{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
    transition: width 1s;
  }

  @keyframes img1 {
    0% {display: grid; width: 200px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 145px;}
    10%{display: grid; width: 200px; left: 135px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 200px; top: 500px;}
    20%{display: grid; width: 200px; left: 135px; top: 145px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 145px;}
    30%{display: grid; width: 200px; top: 145px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 135px;}
    40%{display: grid; width: 200px; top: 145px; left: 135px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 135px; top: 400px;}
    50%{display: grid; width: 200px; left: 135px; top: 145px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 135px;}
    60%{display: grid; width: 200px; top: 145px; left: 135px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 200px;}
    70%{display: grid; width: 200px; transform: rotate(0deg); left: 135px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 200px;}
    75%{display: grid; width: 145px; transform: rotate(-360deg); left: 135px;}
    80%{display: grid; width: 200px; transform: rotate(0deg); left: 135px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 135px;}
    90%{display: grid; width: 200px; left: 135px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 200px;
    height: auto;
    top: 145px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 135px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 135px; top: 380px;}
    100%{display: grid; width: 200px; left: 135px; top: 145px;}
  }

  .control-images{
    width: 200px;
    left: 135px;
    top: 530px;
    height: 350px;
  }
 } 


@media(min-width: 950px){
  .control-images{
    width: 200px;
    left: 140px;
    top: 470px;
    height: 350px;
    }

.harsh5{
  display: none;
}

.harsh7{
  display: grid;
  width: 100px;
  top: 440px;
  left: 200px;
  font-size: 150%;
}
 }

 
  
 @media(min-width: 1000px){
    .fast-harsh{
       width: 60px;
       height: auto;
       font-size: 160%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.fast-harsh1{
       width: 70px;
       height: auto;
       font-size: 160%;
       animation-name: fast-myAnimation2;
}

@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 380px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 380px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 660px; left: 380px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 660px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 120px;
  height: auto;
  font-size: 160%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 380px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 380px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 475px; left: 380px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 475px; left: 540px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 475px;  left: 380px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 380px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 380px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 100px;
    height: auto;
    font-size: 160%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 60px; left: 600px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 60px; left: 640px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 60px; left: 690px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 60px; left: 750px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 60px; left: 800px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 60px; left: 600px;}
  }

.fast-harsh6{
  width: 70px;
  height: auto;
  font-size: 160%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 920px; top: -480px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 920px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 400px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color:yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -250px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 390px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 390px; top: -250px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 390px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 920px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 920px; top: -750px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 920px; top: -480px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 200%;
}

.dell{
    margin-top: 90px;
    width: 450px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 250px;
  margin-left: 20%;
}

.paragraph{
  font-size: 320%;
}

.harsh5{
  display: grid;
  width: 100px;
  top: 460px;
  left: 190px;
  font-size: 150%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 250px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 60px;}
    10%{display: grid; width: 250px; left: 105px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 250px; top: 500px;}
    20%{display: grid; width: 250px; left: 105px; top: 60px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 60px;}
    30%{display: grid; width: 250px; top: 60px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 105px;}
    40%{display: grid; width: 250px; top: 60px; left: 105px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 105px; top: 400px;}
    50%{display: grid; width: 250px; left: 105px; top: 60px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 105px;}
    60%{display: grid; width: 250px; top: 60px; left: 105px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 250px;}
    70%{display: grid; width: 250px; transform: rotate(0deg); left: 105px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 250px;}
    75%{display: grid; width: 60px; transform: rotate(-360deg); left: 105px;}
    80%{display: grid; width: 250px; transform: rotate(0deg); left: 105px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 105px;}
    90%{display: grid; width: 250px; left: 105px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 250px;
    height: auto;
    top: 60px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 105px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 105px; top: 380px;}
    100%{display: grid; width: 250px; left: 105px; top: 60px;}
  }

.control-images{
    width: 250px;
    left: 105px;
    top: 490px;
    height: 430px;
}
 }


 
 
  
 @media(min-width: 1100px){
    .fast-harsh{
       width: 60px;
       height: auto;
       font-size: 170%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.fast-harsh1{
       width: 130px;
       height: auto;
       font-size: 170%;
       animation-name: fast-myAnimation2;
}

@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 440px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 440px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 440px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 120px;
  height: auto;
  font-size: 170%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 440px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 440px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 485px; left: 440px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 485px; left: 640px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 485px;  left: 440px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 440px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 440px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 100px;
    height: auto;
    font-size: 170%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 55px; left: 630px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 55px; left: 670px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 55px; left: 730px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 55px; left: 790px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 55px; left: 850px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 55px; left: 630px;}
  }

.fast-harsh6{
  width: 75px;
  height: auto;
  font-size: 170%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1000px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1000px; top: -680px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 500px; top: -680px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -680px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -680px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 450px; top: -680px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 450px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 450px; top: -680px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1000px; top: -680px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1000px; top: -760px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1000px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 220%;
}

.dell{
    margin-top: 90px;
    width: 490px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 350%;
}

.harsh5{
  display: grid;
  width: 110px;
  top: 455px;
  left: 220px;
  font-size: 160%;
}

.harsh7{
  display: none;
}

.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 145px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 145px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 145px;}
    40%{display: grid; width: 280px; top: 10px; left: 145px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 145px; top: 400px;}
    50%{display: grid; width: 280px; left: 145px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 145px;}
    60%{display: grid; width: 280px; top: 10px; left: 145px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 145px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 145px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 145px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 145px;}
    90%{display: grid; width: 280px; left: 145px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 145px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 145px; top: 380px;}
    100%{display: grid; width: 280px; left: 145px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 145px;
    top: 490px;
    height: 480px;
}
 }



  
  
 @media(min-width: 1200px){
    .fast-harsh{
       width: 60px;
       height: auto;
       font-size: 170%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.fast-harsh1{
       width: 130px;
       height: auto;
       font-size: 170%;
       animation-name: fast-myAnimation2;
}

@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 460px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 460px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 460px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 170px;
  height: auto;
  font-size: 170%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 460px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 460px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 495px; left: 460px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 495px; left: 640px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 495px;  left: 460px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 460px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 460px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 100px;
    height: auto;
    font-size: 170%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 55px; left: 700px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 55px; left: 770px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 55px; left: 840px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 55px; left: 910px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 55px; left: 970px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 55px; left: 700px;}
  }

.fast-harsh6{
  width: 75px;
  height: auto;
  font-size: 170%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1100px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1100px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 500px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 470px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 470px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 470px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1100px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1100px; top: -720px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1100px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 220%;
}

.dell{
    margin-top: 90px;
    width: 550px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 350%;
}

.harsh5{
  display: grid;
  width: 110px;
  top: 420px;
  left: 220px;
  font-size: 170%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 160px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 160px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 160px;}
    40%{display: grid; width: 280px; top: 10px; left: 160px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 160px; top: 400px;}
    50%{display: grid; width: 280px; left: 160px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 160px;}
    60%{display: grid; width: 280px; top: 10px; left: 160px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 160px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 160px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 160px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 160px;}
    90%{display: grid; width: 280px; left: 160px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 160px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 160px; top: 380px;}
    100%{display: grid; width: 280px; left: 160px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 160px;
    top: 455px;
    height: 480px;
}
 }



   
  
 @media(min-width: 1300px){
    .fast-harsh{
       width: 65px;
       height: auto;
       font-size: 180%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.fast-harsh1{
       width: 130px;
       height: auto;
       font-size: 180%;
       animation-name: fast-myAnimation2;
}

@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 480px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 480px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 480px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 180px;
  height: auto;
  font-size: 180%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 480px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 480px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 520px; left: 480px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 520px; left: 670px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 520px;  left: 480px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 480px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 480px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 100px;
    height: auto;
    font-size: 180%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 55px; left: 750px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 55px; left: 820px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 55px; left: 890px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 55px; left: 950px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 55px; left: 1020px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 55px; left: 750px;}
  }

.fast-harsh6{
  width: 80px;
  height: auto;
  font-size: 180%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1190px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1190px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 600px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 480px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 480px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 480px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1190px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1190px; top: -720px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1190px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 250%;
}

.dell{
    margin-top: 90px;
    width: 600px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 380%;
}

.harsh5{
  display: grid;
  width: 120px;
  top: 450px;
  left: 230px;
  font-size: 180%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 170px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 170px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 170px;}
    40%{display: grid; width: 280px; top: 10px; left: 170px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 170px; top: 400px;}
    50%{display: grid; width: 280px; left: 170px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 170px;}
    60%{display: grid; width: 280px; top: 10px; left: 170px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 170px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 170px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 170px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 170px;}
    90%{display: grid; width: 280px; left: 170px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 170px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 170px; top: 380px;}
    100%{display: grid; width: 280px; left: 170px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 170px;
    top: 490px;
    height: 480px;
}
 }





 

  
 @media(min-width: 1400px){
    .fast-harsh{
       width: 70px;
       height: auto;
       font-size: 190%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.fast-harsh1{
       width: 140px;
       height: auto;
       font-size: 190%;
       animation-name: fast-myAnimation2;
}

@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 480px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 480px; transform: rotate(-30deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 480px; transform: rotate(0deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 200px;
  height: auto;
  font-size: 190%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 480px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 480px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 540px; left: 480px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 540px; left: 670px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 540px;  left: 480px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 480px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 480px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 110px;
    height: auto;
    font-size: 190%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 55px; left: 750px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 55px; left: 820px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 55px; left: 890px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 55px; left: 950px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 55px; left: 1020px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 55px; left: 750px;}
  }

.fast-harsh6{
  width: 90px;
  height: auto;
  font-size: 190%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1190px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1190px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 600px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 480px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 480px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 480px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1190px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1190px; top: -720px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1190px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 250%;
}

.dell{
    margin-top: 90px;
    width: 600px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 380%;
}

.harsh5{
  display: grid;
  width: 125px;
  top: 460px;
  left: 240px;
  font-size: 190%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 180px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 180px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 180px;}
    40%{display: grid; width: 280px; top: 10px; left: 180px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 180px; top: 400px;}
    50%{display: grid; width: 280px; left: 180px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 180px;}
    60%{display: grid; width: 280px; top: 10px; left: 180px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 180px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 180px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 180px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 170px;}
    90%{display: grid; width: 280px; left: 170px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 180px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 180px; top: 380px;}
    100%{display: grid; width: 280px; left: 180px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 180px;
    top: 495px;
    height: 480px;
   
}
 }











 
  
 @media(min-width: 1500px){
    .fast-harsh{
       width: 70px;
       height: auto;
       font-size: 190%;
       animation-name: fast-myAnimation1;
    }

    @keyframes fast-myAnimation1 {
      0%   {background-color:blue; color: red; top: 0%; left: 0%; transform: rotate(0deg);}
      25%  {background-color:yellow; color: rebeccapurple; top: 0%; left: 45%; transform: rotate(360deg);}
      50%  {background-color:red; color: blue; top: 0%; left: 90%; transform: rotate(0deg);}
      75%  {background-color:gold; color: green; top: 0%; left: 45%; transform: rotate(-360deg);}
      100% {background-color:blue; color: red; left: 0%; top: 0%; transform: rotate(0deg);}        
    }

.fast-harsh1{
       width: 140px;
       height: auto;
       font-size: 190%;
       animation-name: fast-myAnimation2;
}

@keyframes fast-myAnimation2 {
  0%   {background-color:green; color: blue; top: 0px; left: 0px;}
  15%  {background-color:yellow; color: #4cff05; top: 0px; left: 520px; transform: rotate(0deg);}
  26%  {background-color:gold; color: green; top: 380px; left: 520px; transform: rotate(-30deg);}
  58%  {background-color:blue; color: gold; top: 690px; left: 0px; transform: rotate(0deg);}
  42%  {background-color:red; color: aqua; top: 690px; left: 520px; transform: rotate(0deg);}
  78%  {background-color: violet; color: red; top: 280px; left:0px;transform: rotate(360deg);}
  100%  {background-color: green; color: blue; top: 0px; left: 0px; transform: rotate(0deg);}
}

.fast-harsh2{
  width: 200px;
  height: auto;
  font-size: 190%;
  animation-name: fast-myAnimation3;
}

@keyframes fast-myAnimation3 {
  0%   {background-color:rgb(24, 59, 214); color: #4cff05; top: 160px; left: 520px; transform: rotate(-10deg);}
  15%  {background-color:rgb(218, 127, 23); color: red; top: 0px; left: 520px;}
  21%  {background-color:rgb(194, 13, 13); color: blue; top: 540px; left: 520px; transform: rotate(0deg);}
  42%  {background-color:rgb(58, 219, 18); color: brown; top: 540px; left: 750px; transform: rotate(-10deg);}
  58%  {background-color:blue; color: #6effaf; top: 540px;  left: 520px; transform: rotate(0deg);}
  78%  {background-color: rgb(32, 197, 161); color: gold; top: 260px; left: 520px; transform: rotate(10deg);}
 100%  {background-color: rgb(24, 59, 214); color: #4cff05; top: 160px; left: 520px; transform: rotate(-10deg);}
  }

  .fast-harsh3{
     width: 110px;
    height: auto;
    font-size: 190%;
    animation-name: fast-myAnimation4;
  }
  
@keyframes fast-myAnimation4 {
  0%   {background-color:rgb(151, 204, 29); color: blue; top: 50px; left: 800px;}
  20%  {background-color:rgb(52, 7, 110);color: #4cff05; top: 50px; left: 890px;}
  40%  {background-color:rgb(99, 12, 19); color:yellow; top: 50px; left: 980px;}
  60%  {background-color:rgb(26, 214, 36); color:red; top: 50px; left: 1080px;}
  80%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); top: 50px; left: 1150px;}
  100%  {background-color: rgb(151, 204, 29); color: blue; top: 50px; left: 800px;}
  }

.fast-harsh6{
  width: 90px;
  height: auto;
  font-size: 190%;
  animation-name: fast-myAnimation5;
}
  
@keyframes fast-myAnimation5 {
  0%   {background-color: grey;  color: rgb(123, 214, 19); left: 1300px; top: -520px; transform: rotate(0deg);}
  10%  {background-color:rgb(253, 88, 11);color: #4cff05; left: 1300px; top: -650px; transform: rotate(0deg);}
  22%  {background-color: #4cff05; color: aqua; left: 600px; top: -650px; transform: rotate(-25deg);}
  32%  {background-color:rgb(19, 62, 182); color: yellow; left: 10px; top: -650px; transform: rotate(0deg);}
  40%  {background-color:rgb(26, 214, 36); color:red; left: 10px; top: -290px; transform: rotate(360deg);}
  48%  {background-color:rgb(214, 23, 23); color: rgb(192, 165, 12); left: 10px; top: -650px; transform: rotate(0deg);}
  56%  {background-color: rgb(33, 255, 207); color: rgb(225, 0, 255); left: 520px; top: -650px; transform: rotate(0deg);}
  60%  {background-color: pink; color: #4cff05; left: 520px; top: -290px; transform: rotate(-30deg);}
  80%  {background-color: red; color: blue; left: 520px; top: -650px; transform: rotate(0deg);}
  84%  {background-color: green; color: red; left: 1190px; top: -650px; transform: rotate(360deg);}
  92%  {background-color: rgb(41, 43, 192); color: aqua; left: 1300px; top: -650px;}
  100% {background-color: grey; color: rgb(123, 214, 19); left: 1300px; top: -520px;}
  }  

.apply-btn{
  padding: 6px 10px;
  font-size: 250%;
}

.dell{
    margin-top: 90px;
    width: 600px;
  }

  .harsh4{
    display: grid;
    grid-template-columns: 45% 55%;
}

#harshimage{
  width: 280px;
  margin-left: 26%;
}

.paragraph{
  font-size: 380%;
}

.harsh5{
  display: grid;
  width: 125px;
  top: 460px;
  left: 250px;
  font-size: 190%;
}

.harsh7{
  display: none;
}


.animationimg1{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img1;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
    transition: width 1s;
  }

@keyframes img1 {
    0% {display: grid; width: 280px;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg2{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img2;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
    transition: width 1s;
  }

  @keyframes img2 {
    0%{ display: none; width: 0px; left: 100px;}
    10%{display: grid; width: 280px; left: 190px;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

  .animationimg3{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img3;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
    transition: width 1s;
  }

  @keyframes img3 {
    0%{ display: none;}
    10%{display: none; width: 0px; left: 280px; top: 500px;}
    20%{display: grid; width: 280px; left: 190px; top: 10px;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

    .animationimg4{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img4;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     transition: width 1s;
  }

  @keyframes img4 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none; width: 0px; top: 10px;}
    30%{display: grid; width: 280px; top: 10px;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }
  
      .animationimg5{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img5;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     transition: width 1s;
  }

  @keyframes img5 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none; width: 0px; top: 420px; left: 190px;}
    40%{display: grid; width: 280px; top: 10px; left: 190px;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg6{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img6;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     transition: width 1s;
  }

  @keyframes img6 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none; width: 0px; left: 190px; top: 400px;}
    50%{display: grid; width: 280px; left: 190px; top: 10px;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg7{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img7;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
    transition: width 1s;
  }

  @keyframes img7 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none; width: 0px; top: 480px; left: 190px;}
    60%{display: grid; width: 280px; top: 10px; left: 190px;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }


      .animationimg8{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img8;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     
  }

  @keyframes img8 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none; width: 0px; transform: rotate(40deg); left: 280px;}
    70%{display: grid; width: 280px; transform: rotate(0deg); left: 190px;}
    80%{display: none;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg9{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img9;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     
  }

  @keyframes img9 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none; width: 0px; left: 280px;}
    75%{display: grid; width: 10px; transform: rotate(-360deg); left: 190px;}
    80%{display: grid; width: 280px; transform: rotate(0deg); left: 190px;}
    90%{display: none;}
    100%{display: none;}
  }

      .animationimg10{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img10;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     
  }

  @keyframes img10 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none; width: 0px; left: 190px;}
    90%{display: grid; width: 280px; left: 190px;}
    100%{display: none;}
  }

      .animationimg11{
    width: 280px;
    height: auto;
    top: 10px;
    animation-duration: 10s;
    animation-name: img11;
    animation-iteration-count: infinite;
    position: absolute;
    left: 190px;
     
  }

  @keyframes img11 {
    0%{ display: none;}
    10%{display: none;}
    20%{display: none;}
    30%{display: none;}
    40%{display: none;}
    50%{display: none;}
    60%{display: none;}
    70%{display: none;}
    80%{display: none;}
    90%{display: none; width: 0px; left: 190px; top: 380px;}
    100%{display: grid; width: 280px; left: 190px; top: 10px;}
  }

.control-images{
    width: 280px;
    left: 190px;
    top: 495px;
    height: 480px;
   
}
 }