nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 9.375rem;
  padding: 2.5rem 3%;
  background: #031418;
  font-size: 1.125rem;
  white-space: nowrap;

  .logo {
    flex-shrink: 0;

    img {
      width: 13.125rem;
      height: 4.274rem;
    }
  }
}

menu {
  display: flex;
  align-items: center;

  li > a {
    display: block;
    padding: 1rem 1.125rem;
  }

  .download-btn {
    margin-left: 1.25rem;
  }
}

.hamburger {
  display: none;
  font-size: var(--font-size-xxl);
  cursor: pointer;
  z-index: 1;
  margin: 0 2.125rem;
}

@media screen and (width <=940px) {
  menu {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    top: -100vh;
    right: 3%;
    padding: 1rem;
    border: 1px solid red;
    border-radius: 0.5rem;
    transition: top 250ms;

    &.active {
      top: 2.25rem;
    }

    li > a {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

    .download-btn {
      margin: 0.5rem 0 0 0;
    }
  }

  .hamburger {
    display: block;
  }
}