:root{
    --main-color:#fff;
  }


  
  .main-header{
    background: #4FB391;
    width: 100%;
    height:50px;
  }
  
  nav{
    position: absolute;
    left:0;
    top:0;
    width: 200px;
    /* top:200px; */
    height:100vh;
    background:var(--primary-color);
    transform:translateX(-100%);
    transition:.4s ease;
  }
  
  .navprueba{
    top:200px;

  }
  .navigation li{
    list-style:none;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.5);
  }
  
  .navigation a{
    color:var(--main-color);
    display: block;
    line-height:3.5;
    padding: 0 10px;
    text-decoration:none;
    transition:.4s ease;
  }
  
  .navigation a:hover{
    transform:translateX(10%);
  }
  
  #btn-nav{
    display: none;
  }
  
  #btn-nav:checked ~ nav{
    transform:translateX(0);
  }
  
  /* .btn-nav{
    color:var(--main-color);
    font-size:30px;
    position: absolute;
    left:0;
    top:0;
    cursor:pointer;
    padding:6.5px 15px;
    transition:.2s ease;
    background:rgba(0,0,0,.1);
  } */
  
  .btn-nav:hover{
    background:rgba(0,0,0,.3);
  }