@media screen and (max-width:768px){
  body{
    
  overflow-x: hidden;
  }
  header{
  padding: 15px 0;
  height: 80px;
}
  header .wrap{
    
  width: 100%;
  margin: 0 auto;
  /*! padding: 0 15px; */
  justify-content: space-around;
  border-radius: 25px;
  }
  header h1 a{
    
  font-size: 10px;
  white-space: nowrap;
  }
  header h1 a::before{
  display: none;
  }
  header ul li a{
  font-size: calc(22px * 0.5);
  padding: 15px 20px;
  }
  #title{
  font-size: calc(165px * 0.4);
  line-height: 1.2;
  margin: 50px 15px;
  }
  #title div.wrap{   
  width: 100%;
  }
  #title .wrap h2{
  font-size: 57px;
  line-height: 1.5;
  }
  #title .wrap h2 strong span:first-child{ 
  margin-right: 115px;
  }
  .typed-text-output{
  font-size: calc(50px * 0.5);
  }
  #title .wrap .left p{ 
  font-size: calc(20px * 0.7);
  }
  #title .wrap .right{ 
  left: 120px;
  bottom: 145px;
  }
  #title .wrap .right img{
    
  width: 150px;
  height: 150px;
  }
  #title .wrap .image{
    
  width: 28px;
  bottom: 112px;
  right: 25px;
  }
  section#about{
  padding: 80px 15px;
  }
  section#about .wrap{
  width: 100%;
  }
  section#about .wrap h3{
  writing-mode: inherit;
  transform: initial;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}
  .h3{
  font-size: calc(150px * 0.5);
  }
  section#about .wrap .infor{  
  padding: 30px 22px;
  }
  section#about .wrap .intro{
  padding: 50px 20px;
  transform: translateX(12%) translateY(0%);
  margin-top: 35px;
  border-radius: 35px;
  }
  section#about .wrap .intro img{
    
  width: 132px;
  height: 202px;
  }
  section#about .educate{
    
  line-height: 2.5;
  margin: 0;
  margin-top: 35px;
  padding: 15px 15px;
  }
  section#about .educate ul li{ 
  line-height: 2;
  }
  section#about .wrap .intro span{
    
  width: 25px;
  height: 25px;
  }
  #skill .wrap{
  flex-direction: column;
  }
  #skill .wrap h3{
   writing-mode: inherit;
  transform: initial;
  }
  .skill-bar{
  font-size: 12px;
  }
  .skill-show{
    
  padding: 50px 120px;
  }
  #portfolio .wrap{
    
  width: 100%;
  flex-direction: column;
  }
  #portfolio .wrap ul{
    
  gap: 18px;
  }
  #portfolio .wrap ul li{
  width: 212px;
  height: 160px;
  }
  #portfolio .wrap ul li h4{
    
  font-size: 20px;
  }
  #portfolio .wrap h3{
  writing-mode: inherit;
  transform: initial; 
  margin-bottom: 25px;
  }
  #portfolio .wrap ul li figure figcaption{
  font-size: calc(20px * 0.7);
}
  section#contact .wrap{
  width: 100%;
  padding: 15px 0px;
  }
  section#contact h3{
    
  width: 100%;
  display: none;
  }
  section#contact .wrap .contact-form{
  display: none;
  }
  footer .wrap{
    
  width: 100%;
  }
}