.header-modal{
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.header-modal >div{
  display: flex;
  width: 100%;
  background-color: #0f0f0f;
  padding-top: 52px; padding-bottom: 24px;
  animation: hm 0.4s ease-in-out;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 15px;
}
.header-modal a{
  cursor: pointer; text-decoration: none;
  color: white;
  font-size: 15px;
}
@keyframes hm {
  from{transform: translateY(-100%);}
  to{transform: translateY(0px);}
}
.header-drawer{
  position: absolute; right: 8px; width: 45px; height: 45px; display: flex; flex-direction: column;
  gap: 3px; align-items: center; justify-content: center;
}
.header-drawer >div{
  width: 21px; height: 1px; background-color: white;
  transform-origin: center;
}