*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    background-color: #E9F0F2;
}

header{
    width: 100%;
    height: auto;
    background-color: white;
    padding: 30px;
    text-align: center;
}

footer{
   background-color: white;
   border-radius: 57px;
   font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    

}
h1{
        font-family: "Baskervville SC", serif;
        font-weight: 400;
        font-style: normal; 
    color: #B2BF9F

}

h2{
    color: #647749;
    

    
}

h3{
    color: #647749;
    font-family: "Elsie", serif;
  font-weight: 400;
  font-size: 60px;
  font-style: normal;
}


   



section{
    border: solid white;
}

#whatare{
    text-align: center;
    margin-top: 100px;
    
}

#text1{
    padding: 20px 35px;
     border: 2px;
    border-radius: 57px;
    background-color: #B2BF9F;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
  
    
}

#text2{
    padding: 20px 35px;
     border: 2px;
    border-radius: 57px;
    background-color: #B2BF9F;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    
}

#text3{
    padding: 20px 35px;
     border: 2px;
    border-radius: 57px;
    background-color: #B2BF9F;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    
}

#text4{
    padding: 20px 35px;
     border: 2px;
    border-radius: 57px;
    background-color: #B2BF9F;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    
}

#theprocess{
    text-align: center;

}

#thedifference{
    text-align: center;
}

.gallery{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;

 
}

.gallery figure img{
    width: 100%;
    }      

#miku{
   width: 280px;
  position: absolute
  


}

#k-on{
    width: 300px;
    border-radius: 57px;
    box-shadow: 2px 4px 10px rgba(168, 182, 245, 0.541)  ;
}

#neon{
 
    width: 300px;
    border-radius: 57px;
    box-shadow: 2px 4px 10px rgba(168, 182, 245, 0.541)  ;
}


#haru{
    width: 300px;
    border-radius: 57px;
    box-shadow: 2px 4px 10px rgba(168, 182, 245, 0.541)  ;
}


#dollfie{
    width: 300px;
    box-shadow: 2px 4px 10px rgba(168, 182, 245, 0.541)  ;
    margin-bottom: 350px;
    border-radius: 57px;
    position: relative;
   

 
}
#dollfie.side{
     transition:transform 0.5s ;
    transform: translateY(353px);
 }   


#video{
    border: solid 10px white;
}


 #rel{
    position: relative;
  }
  #placeholder{
    opacity: 0;
  }
  
  .container {
      width: 85vmin;
      position: absolute;
      transform: translate(-50%, 0);
      top:0;
      left: 50%;
      overflow: hidden;
     border: solid 10px white;
   
  
    }
    .wrapper {
      max-width: 100%;
      height: auto;
      display: flex;
      animation: slide 30s infinite;
    }
   .container img {
      width: 100%;
     
      
    }
     @keyframes slide{
     
      0%{
          transform: translateX(0);
      }
      5%{
          transform: translateX(0);
      }
      10%{
          transform: translateX(-100%);
      }
      15%{
          transform: translateX(-100%);
      }
      20%{
          transform: translateX(-200%);
      }
      25%{
          transform: translateX(-200%);
      }
      30%{
          transform: translateX(-300%);
      }
      35%{
          transform: translateX(-300%);
      }
        40%{
        transform: translateX(-400%);
        }
  
     45%{
          transform: translateX(-400%);
      }
        50%{
        transform: translateX(-500%);
        }
      55%{
          transform: translateX(-500%);
      }
        60%{
        transform: translateX(-600%);
        }
     65%{
          transform: translateX(-600%);
      }
       70%{
        transform: translateX(-700%);
       }
     75%{
          transform: translateX(-700%);
      }
        80%{
        transform: translateX(-800%);
        }
    85%{
          transform: translateX(-800%);
      }
        90%{
        transform: translateX(-900%);
        }
     100%{
          transform: translateX(-900%);
     
     
    }
  }




@media screen and (max-width: 450px){
    #video{
        width: 300px;
        height: auto;
    }

    #placeholder{
        width:300px;
        height: auto;
    }

    #dollfie{
        width:300px;
        height:auto;
    }

    #miku{
        width: 300px;
        height: auto;
    }

    #header{
        width: 300px;
        height: auto;
    }
}