#menu_box{
  width: 20vw;
  height: 100vh;
  color: rgb(30, 30, 30);
  background-color: pink;
  background-color: white;
  font-family: Avenir;
  text-align: center;
  float: left;
}

#logo{
  padding-top: 10vh;
  font-size: 1.9vw;
  transition: .3s;
}
#about_btn{
  transition: .3s;
}
#works_btn{
  transition: .3s;
}
#social_btn{
  transition: .3s;
}

#menu{
  padding-top: 6vh;
}
.menu_item{
  font-size: 1.15vw;
  margin-bottom: 3.5vh;
}


@media screen and (max-width: 768px) {
  #menu_box{
    width: 100vw;
    height: 10vh;
    float: none;
    display: flex;
    /* background-color: lightyellow; */
  }
  #menu{
    width: 48vw;
    margin-left: auto;
    line-height: 10vh;
    padding-top: 0;
    display: flex;
    justify-content: space-around;
    /* background-color: lightgreen; */
  }

  #logo{
    width: 20vw;
    /* line-height: 10vh; */
    padding: 2.5vh 0;
    font-size: 3.7vw;
    margin-left: 2vw;
    /* background-color: lightblue; */
  }
  .menu_item{
    font-size: 2.65vw;
    margin-bottom: 4vh;
  }
  #social_btn{
    margin-right: 2vw;
  }
}