.topbar {position: absolute; padding: 0; z-index: 99998; display: flex; align-items: center; gap: 1vw; margin: 3vw;}
.menu-wrap, .menu-button {position: relative;}
.menu-button {padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; z-index: 99999;}
.menu-button .bar {height: 3px; width: 100%; background: #000; border-radius: 2px; transition: all .5s cubic-bezier(.34,1.56,.64,1);}
.author {margin-left: auto; right: 0;}

/* dropdown */
.dropdown-menu {position: absolute; display: flex; z-index: 900; transition: all .5s cubic-bezier(.34,1.56,.64,1);}
.menu-wrap.open .dropdown-menu{background: rgba(0, 0, 0, .75);}
.dropdown-menu a {display: block; color: transparent; text-decoration: none; cursor: default;pointer-events: none; transition: all .5s cubic-bezier(.34,1.56,.64,1);}
.menu-wrap.open .dropdown-menu a:hover {color: rgba(255, 255, 255, 1); cursor: pointer;}
.menu-wrap.open .dropdown-menu a{color: rgba(255, 255, 255, .5); pointer-events: auto;}
.menu-wrap.open .bar{background: #fff;}


/*-----------------------screens----------------------*/
@media only screen and (orientation : landscape){
  .topbar {height: 5vh;}
  .menu-button {width: 3vw; height: 2vw; }
  .page-title, .author {font-size: 1.5vw;}
  .dropdown-menu{max-width: 0; left: -3vw; top: -.5vw; height: 2vw; border-radius: 0 1.5vw 1.5vw 0; flex-direction: row; padding-top: .5vw; padding-bottom: .5vw;}
  .menu-wrap.open .dropdown-menu {max-width: 90vw; padding-right: 3vw; padding-left: 7vw;}
  .dropdown-menu a{padding: 0 1.5vw; font-size: 1.5vw; line-height: 2vw;}
  .menu-wrap.open .bar1{transform: translate(0, 0.9vw) rotate(-45deg);}
  .menu-wrap.open .bar2{opacity: 0;}
  .menu-wrap.open .bar3{transform: translate(0, -0.9vw) rotate(45deg);}
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 16/9){
 
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/9){
 
}
@media only screen and (orientation : landscape) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3){
 
}
@media only screen and (orientation : portrait){
  .topbar {height: 5vh;}
  .menu-button {width: 3vh; height: 2vh;}
  .page-title, .author {font-size: 1.5vh;}
  .dropdown-menu{max-width: 0; left: -3vh; top: -.5vh; height: 2vh; border-radius: 0 1.5vh 1.5vh 0; flex-direction: row; padding-top: .5vw; padding-bottom: .5vw;}
  .menu-wrap.open .dropdown-menu {max-width: 90vh; padding-right: 3.5vh; padding-left: 7vh;}
  .dropdown-menu a{padding: 0 1.5vh; font-size: 2vh; line-height: 2vh;}
  .menu-wrap.open .bar1{transform: translate(0, 0.9vh) rotate(-45deg);}
  .menu-wrap.open .bar2{opacity: 0;}
  .menu-wrap.open .bar3{transform: translate(0, -0.9vh) rotate(45deg);}
}
@media only screen and (orientation : portrait) and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1){
  
}
@media only screen and (orientation : portrait) and (max-aspect-ratio: 3/4) and (max-width: 767px){
  .topbar {height: 10vh;}
  .menu-button {width: 4vh; height: 3vh;}
  .page-title, .author {font-size: 3vh;}
  .dropdown-menu{width: 0; left: -3vw; top: -7vh; height: 100vh; padding-top: 35vh; flex-direction: column;}
  .menu-wrap.open .dropdown-menu {width: 100vw; padding-right: 0; padding-left: 0;}
  .dropdown-menu a{padding: 0 1.5vh; font-size: 5vh; line-height: 7vh; text-align: center;}
  .menu-wrap.open{position: fixed;}
  .menu-wrap.open .bar1{transform: translate(0, 1.25vh) rotate(-45deg);}
  .menu-wrap.open .bar2{opacity: 0;}
  .menu-wrap.open .bar3{transform: translate(0, -1.25vh) rotate(45deg);}
}