:root {
  --menu-toggle-line-width: 64px;
  --menu-toggle-line-height: 5px;
  --menu-toggle-line-gap: 10px;
  --menu-toggle-bar-radius: 64px;
  --menu-toggle-height: calc(
    var(--menu-toggle-line-height) * 3 + var(--menu-toggle-line-gap) * 2
  );
  /* Definition from these two variables come from the base.html template head tag */
  /* This in order to make use of the stored colors for each view. */
  /* --menu-toggle-foreground: #000; */
  /* --menu-toggle-background: #000; */

  --nav-animation-timing: 250ms ease-in-out;
  --nav-border: 20px;
}

header {
  position: sticky;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  z-index: 1000;
  user-select: none;
}

/* Nav toggle burger menu.
============================================================================= */
header label {
  --x-width: calc(var(--menu-toggle-height) * 1.41421356237);
  position: absolute;
  top: 34px;
  left: var(--nav-border);
  width: max-content;
  display: flex;
  flex-direction: column;
  gap: var(--menu-toggle-line-gap);
  z-index: 1001;
  cursor: pointer;
}

header label::before, header label::after, header label input {
  content: "";
  width: var(--menu-toggle-line-width);
  height: var(--menu-toggle-line-height);
  background-color: var(--menu-toggle-foreground);
  border-radius: var(--menu-toggle-bar-radius);
  transform-origin: left center;
  transition:
    opacity var(--nav-animation-timing),
    width var(--nav-animation-timing),
    rotate var(--nav-animation-timing),
    translate var(--nav-animation-timing),
    background-color var(--nav-animation-timing);
}

header label input {
  appearance: none;
  outline: none;
  pointer-events: none;
}

header label:has(input:checked)::before {
  background: var(--red);
  rotate: 45deg;
  width: var(--x-width);
  translate: 0 calc(var(--menu-toggle-line-height) / -2);
}

header label:has(input:checked)::after {
  background: var(--red);
  rotate: -45deg;
  width: var(--x-width);
  translate: 0 calc(var(--menu-toggle-line-height) / 2);
}

header label input:checked {
  opacity: 0;
  width: 0;
}

/*  Aside Menu and Elements
============================================================================= */
header aside {
  padding-top: calc(var(--menu-toggle-height) * 2 + var(--nav-border) + 14px);
  height: 100svh;
  max-height: 100vh;
  width: 33vw;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #1C1C1CAA;
  backdrop-filter: blur(3px);
  translate: -100%;
  transition: translate var(--nav-animation-timing);
  z-index: 1000;
}

@media (max-width: 768px) {
  header aside {
    width: 100vw;
  }
}

header label:has(input:checked) + aside {
  translate: 0;
}

header label:has(input:focus-visible)::after,
header label:has(input:focus-visible)::before,
header label:has(input:focus-visible) input {
  border: 1px solid var(--menu-toggle-foreground);
  box-shadow: 0 0 0 1px var(--menu-toggle-background);
}

header aside nav {
  height: 100%;
  display: flex;
  flex-direction: column;
}

header aside nav a {
  padding-left: 20px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  color: var(--menu-toggle-foreground);
  background-color: #00000000;
  text-decoration: none;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  line-height: var(--line-height-normal);
  transition: all var(--nav-animation-timing);
}

header aside nav a:hover {
  background-color: #1C1C1C50;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
}

header aside nav a:nth-child(1):hover {
}

header aside nav a:nth-child(2):hover {
}

header aside nav a:nth-child(3):hover {
}

header aside nav a:nth-child(4):hover {
}

/* Responsive navigation text */
@media (max-width: 768px) {
  header aside nav a {
    font-size: var(--font-size-xl);
    padding-left: 15px;
  }
}

@media (max-width: 480px) {
  header aside nav a {
    font-size: var(--font-size-lg);
  }
}

/* Header Logo and text Styles
============================================================================= */
header div {
  height: 64px;
  margin-top: var(--nav-border);
  margin-right: var(--nav-border);
  margin-bottom: var(--nav-border);
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 1000;
}

header div h2 {
  margin-right: var(--nav-border);
  line-height: var(--line-height-tight);
  user-select: none;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

/* Responsive header logo */
@media (max-width: 768px) {
  header div h2 {
    font-size: var(--font-size-base);
  }
}

@media (max-width: 480px) {
  header div h2 {
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-wide);
  }
}