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

.menu-btn {
    position: absolute;
    z-index: 3;
    right: 35px;
    top: 35px;
    cursor: pointer;
    transition: all 0.5s ease-out; }
.menu-btn .btn-line {
      width: 28px;
      height: 3px;
      margin: 0 0 5px 0;
      background: #fff;
      transition: all 0.5s ease-out; }
.menu-btn.close {
      transform: rotate(180deg); }
.menu-btn.close .btn-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px); }
.menu-btn.close .btn-line:nth-child(2) {
        opacity: 0; }
.menu-btn.close .btn-line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px); }
  
.menu {
    position: fixed;
    z-index: 2;
    top: 0;
    width: 100%;
     display: flex;
     opacity: 0; 
     transition: all 0.5s ease-out; }
  

.menu.show {
        opacity: .9;         }
.menu-branding, .menu-nav {
      display: flex;
      flex-flow: column wrap;
      align-items: center;
      justify-content: center;
       width: 50%;
      height: 100vh;
      overflow: hidden; }
.menu-nav {
       margin: 0;
      padding: 0;
      background: #373737;
      list-style: none;
      transform: translate3d(0, -100%, 0);
      transition: all 0.5s ease-out; }
.menu-nav.show {
        transform: translate3d(0, 0, 0); }
.menu-branding {
      background: #444;
      transform: translate3d(0, 100%, 0);
      transition: all 0.5s ease-out; }
.menu-branding.show {
        transform: translate3d(0, 0, 0); }
.menu-branding .portrait {
        width: 250px;
        height: 250px;
        background: url("/img/per.jpg");
        background-size: cover;
        border-radius: 50%;
        border: solid 3px chartreuse; }
.menu .nav-item {
      transform: translate3d(600px, 0, 0);
      transition: all 0.5s ease-out; }
.menu .nav-item.show {
        transform: translate3d(0, 0, 0); }
.menu .nav-item.current > a {
        color: chartreuse; }
.menu .nav-link {
      display: inline-block;
      position: relative;
      font-size: 30px;
      text-transform: uppercase;
      padding: 1rem 0;
      font-weight: 300;
      color: #fff;
      text-decoration: none;
      transition: all 0.5s ease-out; }
.menu .nav-link:hover {
        color: chartreuse;
          transform: scale(1.25)
  }
 
  .nav-item:nth-child(1) {
    transition-delay: 0.1s; }
  
  .nav-item:nth-child(2) {
    transition-delay: 0.2s; }
  
  .nav-item:nth-child(3) {
    transition-delay: 0.3s; }
  
  .nav-item:nth-child(4) {
    transition-delay: 0.4s; } 
  
    
    main {
        position: relative;
         padding: 0px;
        margin: 0px;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background-image: url(/img/background.jpg);
        background-size: cover;
        color: #fff;
        line-height: 2;
     }
    main::before{
       content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color:rgba(0, 0, 0, .3);
    }


    main h1::after{
        content: "";
        position: absolute;
        left:15%;
         animation: y 10s steps(20,end) infinite alternate  ;
    
         
    white-space: nowrap;
    overflow: hidden;
     border-right: 2px solid #000;
    
     }
    
      
     
    @keyframes y{
        0% {
    width: 400px;
    font-size: 2rem;
            content: "I'm FrontEnd web developer";
            transform:translateX(0px);   
        }
      20% {
        width: 70px;
    font-size: 2rem;
    transform:translateX(70px);   
    
           
    
      }
    
      40% {
        width: 400px;
        font-size: 2rem;
                content: "I'm FrontEnd web developer";
                transform:translateX(0px);   
    
      }
      70% {
        width: 70px;
        font-size: 2rem;
        transform:translateX(70px);   
    
     
      }100% {
        width: 400px;
        font-size: 2rem;
                content: "I'm FrontEnd web developer";
                transform:translateX(0px);   
    
     
    
      }
    
    
    }