nav {
  position: fixed;
  /* width: 100%; */
  right: 0;

  z-index: 999;
}

.primary-nav {
  list-style: none;

  text-align: center;

  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: right;

  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(0.375rem);
  padding: 1.5rem;
  border-radius: 0 0 0 1.5rem;
}

.primary-nav a {
  font-family: "Simply Rounded Regular";
  font-size: min(1.75rem, 2vw);

  color: var(--text-clr-light);
  text-decoration: none;
  text-transform: uppercase;
}

.primary-nav a:hover,
.primary-nav a:focus {
  color: var(--whitesmoke);
}

.primary-nav .current-site {
  font-size: min(2rem, 2.5vw);

  color: var(--white);
  -webkit-text-stroke: min(1.5px, 0.375vw) var(--accent-clr);

  font-family: "Simply Rounded Bold";
}

.mobile-nav-toggle {
  display: none;
}

@media (max-width: 768px) {
  .primary-nav {
    position: fixed;
    inset: 0 0 0 50%;

    border-radius: 0;

    flex-direction: column;
    padding: min(30vh, 10rem, 60vw) min(2rem, 4vw);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }

  .primary-nav[data-visible="true"] {
    transform: translateX(0%);
  }

  .primary-nav a {
    font-size: min(2rem, 5vw);
  }

  .primary-nav .current-site {
    font-size: min(2.5rem, 6vw);
  }

  .mobile-nav-toggle {
    display: block;

    position: fixed;
    top: min(2rem, 8vw);
    right: min(2rem, 8vw);
    z-index: 1000;

    background-image: url(../img/hamburger-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.5);

    background-size: 75%;
    padding: min(1.5rem, 4vw);

    border-radius: 20%;
    border: 0;
    aspect-ratio: 1;
  }

  .mobile-nav-toggle[data-expanded="true"] {
    background-image: url(../img/xmark-solid.svg);
  }
}