*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  --bar-width: 25px;
  --bar-height: 2.5px;
  --hamburger-gap: 5px;
  --foreground-transp: #2b2b2bc9;
  --foreground: #2b2b2b;
  --background: #fdf8dd;
  --accent: #ffd700;
  --animation-timing: 200ms ease-in-out;
  --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}

.hamburger {
  --x-width: calc(var(--hamburger-height) * 1.4142135624);

  flex-direction: column;
  gap: var(--hamburger-gap);
  width: max-content;

  z-index: 35;
  cursor: pointer;
}

.hamburger:has(input:checked) {
  --foreground: var(--background);
}

.hamburger input,
.hamburger::before,
.hamburger::after {
  content: "";
  width: var(--bar-width);
  height: var(--bar-height);
  background-color: var(--foreground);
  border-radius: 100px;
  transform-origin: left center;
  transition: opacity var(--animation-timing), width var(--animation-timing),
    rotate var(--animation-timing), translate var(--animation-timing),
    background-color var(--animation-timing);
}

.hamburger input {
  appearance: none;
  padding: 0;
  margin: 0;
  outline: none;
  pointer-events: none;
}

.hamburger:has(input:checked)::before {
  rotate: 45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / -2);
}

.hamburger:has(input:checked)::after {
  rotate: -45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / 2);
}

.hamburger input:checked {
  opacity: 0;
  width: 0;
}

@media (max-width: 1024px) {
  .hamburger:has(input:checked) + .side-bar {
    translate: 0;
  }

  .side-bar {
    transition: translate var(--animation-timing);
    translate: -100%;
    padding: 0.5rem 1rem;
    background-color: var(--foreground-transp);
    color: var(--background);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;

    margin: 0;
    padding: 0;

    width: 50vw;
    min-height: 100vh;

    display: flex;
    align-items: start;
    justify-content: center;
  }

  .nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    height: 100%;
    padding-top: calc(20px + var(--top-band-height));
  }

  .nav li {
    all: unset;
  }

  .nav a {
    color: var(--background);
    font-weight: normal;
  }

  .nav a.nav-active {
    color: var(--accent);
    font-weight: normal;
  }
}