html, body {
    background-color: var(--main-blue);
    padding: 0;
    height: 100%; 
}

.hero {
  background-image: url('../Images_Main/Mobile_Landing_Page.gif');
  background-repeat: no-repeat; 
  background-size: contain;
  background-position: center center;
  width: 100%;
  height: 100vh;
  max-width: 450px; 
  margin: 0 auto;
  position: relative;
}

.hero .content {
  position: relative;
  z-index: 1;
}

.long-dash {
  display: none;
}

.nav-button--menu {
  writing-mode: vertical-rl;
  text-orientation: upright;
  top: 0;
  right: 1.3rem;
  padding: 1rem .35rem .8rem .3rem;
  border-radius: 0 0 1.5rem 1.5rem;
  border-top: none;
  border-left: 1px var(--color-white) solid;
  border-bottom: 1px var(--color-white) solid;
  border-right: 1px var(--color-white) solid;
}

.nav-button--menu:hover::after {
  content: "";
  position: absolute;
  top: 0;
  right: -0.4rem;
  width: 0.4rem;
  height: 1.9rem; /* adjust until shadow is long enough */
  border: none;
  background: var(--color-white);
  z-index: -1;
}

/* ----------------------------------- tablet – min-width 500px --------------------------------------- */
@media (min-width: 500px) {
  .hero {
    background-image: url('../Images_Main/Landing_page_desktop.gif');
    background-position: 45px 45px;
    max-width: 900px;
  }

  .long-dash {
    display: inline-block; 
  }

  .nav-button {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 600;
    position: fixed;
    color: var(--color-white);
    padding: .2rem 1rem .3rem 1rem;
    box-shadow: none;
    text-decoration: none;
    z-index: 2;
}

  .nav-button--menu {
    writing-mode: horizontal-tb;
    transform: none;
    background-color: var(--main-blue);
    top: 2rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 0;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 0;
    border-top: 1px var(--color-white) solid;
    border-left: 1px var(--color-white) solid;
    border-bottom: 1px var(--color-white) solid;
    border-right: none;
    right: 0;
}
.nav-button--menu:hover {
    box-shadow:
    .4rem .3rem 0 var(--color-white),
    .4rem .45rem 0 var(--main-blue);
}
}

/* --------------------------------- desktop – min-width 992px ----------------------------------------- */
@media (min-width: 992px) {
 
.hero {
  background-position: 15px 15px;
  max-width: 1350px;
}

#nav-checkbox, .nav-button--menu, .close-button, .overlay {
  display: none;
  }
}