html, body {
    margin: 0;
    padding: 0;
    background-color: white;
    font-family: "Bell MT";
  }
section{
    position:relative ;
    width:100%;
    height:100vh;
    background: white;
    overflow:hidden ;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: #ffffff;
    animation-name: color;
    animation-duration: 20s;
    animation-iteration-count: infinite;
  }

  img{
    max-width: 200px;
    border-radius: 3%;
    box-shadow: 3px 3px 6px #7a7a7a;
  }
  a:link { text-decoration: none; }

  a:visited { text-decoration: none; }
  
  a:hover { text-decoration: none; }
  
  a:active { text-decoration: none; }

h2{
    color:#383838;
    font-size:2em;
    text-transform: uppercase;
    cursor: pointer;
    background-color: #e6e6e6;
    border: 4px solid rgb(66, 64, 64);
    border-radius: 100px;
    padding: 10px 20px;
    z-index: 100;
    position: relative;
    box-shadow: 3px 3px 30px #ffffff;
  }
  h2:hover{
    background-color: #eeeeee;
  }
  section .set{
    position:absolute ;
    width:100%;
    height:100%;
    top:0;
    left:0;
    pointer-events:none;
  }
  section .set div{
    position:absolute ;
    display:block ;
  }
  section .set div:nth-child(1){
    left:20%;
    animation:animate 25s linear infinite ;
    animation-delay:-7s;
    z-index: 20;
  }
  section .set div:nth-child(2){
    left:50%;
    animation:animate 30s linear infinite ;
    animation-delay:-5s;
    z-index: 20;
  }
  section .set div:nth-child(3){
    left:70%;
    animation:animate 30s linear infinite ;
    animation-delay:0s;
    z-index: 20;
  }
  section .set div:nth-child(4){
    left:0%;
    animation:animate 25s linear infinite ;
    animation-delay:-5s;
    z-index: 20;
  }
  section .set div:nth-child(5){
    left:85%;
    animation:animate 28s linear infinite ;
    animation-delay:-10s;
    z-index: 20;
  }
  section .set div:nth-child(6){
    left:20%;
    animation:animate 25s linear infinite ;
    animation-delay:-7s;
    z-index: 20;
  }
  section .set div:nth-child(7){
    left:0%;
    animation:animate 22s linear infinite ;
    z-index: 20;
    
  }
  section .set div:nth-child(8){
    left:60%;
    animation:animate 25s linear infinite ;
    z-index: 20;
  }

  .set2{
    transform:scale(2) rotateY(180deg);
    filter:blur(2px);
  }
  .set3{
    transform:scale(0.8) rotateX(180deg);
    filter:blur(4px);
  }

  @keyframes animate{
    0%{
      opacity:0;
      top: -10%;
      transform:translateX(20px) rotate(0deg);
    }
    10%{
      opacity:1;
    }
    20%{
      transform:translateX(-20px) rotate(45deg);
    }
    40%{
      transform:translateX(-20px) rotate(90deg);
    }
    60%{
      transform:translateX(20px) rotate(150deg);
    }
    80%{
      transform:translateX(-20px) rotate(200deg);
    }
    100%{
      top: 110%;
      transform:translateX(-20px) rotate(225deg);
    }
  }

  @keyframes color {
    0% {
      background-color: #ffffff;
    }
    50% {
      background-color: #7a7a7a;
    }
    100% {
      background-color: #ffffff;
    }
  }

  @media screen and (max-width: 1100px) {
    img{
        max-width: 180px;
    }
    section .set div:nth-child(6){
        display: none;
      }
    section .set div:nth-child(7){
        display: none;
      }
    section .set div:nth-child(8){
        display: none;
      }
  }

  @media screen and (max-width: 550px) {
    img{
        max-width: 140px;
    }
    section .set div:nth-child(5){
        display: none;
      }
    section .set div:nth-child(6){
        display: none;
      }
    section .set div:nth-child(7){
        display: none;
      }
    section .set div:nth-child(8){
        display: none;
      }
  }