.nav-menu { display: flex; align-items: flex-end; padding: 1em; } li { padding: 1rem; } .download-btn-container { color: var(--black); font-family: var(--font-family-jetbrains-mono); font-size: var(--font-size-s); font-weight: 400; font-style: normal; align-items: flex-end; background-color: var(--aquamarine); border-radius: 5px; display: flex; height: 52px; min-width: 245px; padding: 12px 5.2px; transform: scale(1); transition: 0.3s; } .header-alt { color: var(--aquamarine); font-family: var(--font-family-jetbrains-mono); } .download-btn-container a { color: black; } .download-btn-container:hover { transform: scale(1.01); transition: 0.3s; } .download-btn { letter-spacing: 0; min-height: 26px; text-align: center; width: 234px; display: block; } .hamburger { display: none; } .mobile-menu { display: none; } @media screen and (width <=940px) { .nav-menu { display: none; } .hamburger { display: block; position: flex; max-width: fit-content; z-index: 999; font-size: var(--font-size-xl); -webkit-tap-highlight-color: transparent; } .mobile-menu { display: flex; flex-direction: column; width: auto; margin-left: 50%; top: -100vh; right: 0; opacity: 100; position: absolute; justify-content: space-between; align-items: flex-end; background-color: #031418; border-radius: 10px; outline: solid #07363fa7 0.1px; box-shadow: 0.1px 4px 4px #00000096; transition: 0.55s; z-index: 998 !important; } .active { top: 2em; } .mobile-menu li { padding: 1em 0.5em; margin: 0 1em; } .download-btn-container { transform: scale(0.7); transition: 0.3s; margin-left: -0.8em; } .download-btn-container:hover { transform: scale(0.75); transition: 0.3s; } .download-btn { letter-spacing: 0; min-height: 26px; text-align: center; width: 234px; display: block; } }