:root {
  color-scheme: dark;

  --main-color: #fff;
  --main-font: 'Licinia Aged', sans-serif;
  --main-bg-color: #000;

  --nav-bg-color: #1b1b1b;
  --nav-bg-highlight: #2b2f33;
  --link-hover-color: #00bfff;

  --east-color: #ffff02;
  --east-color-rgb: 255, 255, 2;
  --south-color: #0dcf2a;
  --south-color-rgb: 13, 207, 42;
  --west-color: #00abe4;
  --west-color-rgb: 0, 171, 228;
  --north-color: #ffffff;
  --north-color-rgb: 255, 255, 255;

  --center-outer-color: #ff0000;
  --center-mid-color: #9f00bb;
  --center-inner-color: #f500bd;
  --wheel-border-color: #000;

  --shadow-offset: 2deg;
  --shadow-color: rgba(0, 0, 0, 1);
  --wheel-unselected-filter: brightness(0.5);
  --wheel-shadow-size: 20px;
  --wheel-shadow-opacity: 0.75;
}

@font-face {
  font-family: 'Licinia Aged';
  src: url('/fonts/Licinia Aged.ttf') format('truetype');
}

@font-face {
  font-family: 'BJCree';
  src: url('/fonts/bjcrus.ttf') format('truetype'),
    url('/fonts/bjcrus.eot') format('embedded-opentype');
}

@property --shadow-color {
  syntax: "<color>";
  inherits: false;
  initial-value: rgba(0, 0, 0, 0);
}

#center-mark {
  background-color: blue;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

html,
body {
  font-family: var(--main-font);
  background-color: var(--main-bg-color);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.aria-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: rect(0, 0, 0, 0);
  border: 0;
}

h1 {
  color: var(--main-color);
  text-align: center;
  font-family: 'Papyrus', 'Segoe UI Symbol', sans-serif;
  font-size: 3em;
}

.east-glow,
#east-content .poster .vimeo-embed-button {
  box-shadow: rgba(var(--east-color-rgb), var(--wheel-shadow-opacity)) 0 0 var(--wheel-shadow-size);
}

.south-glow,
#south-content .poster .vimeo-embed-button {
  box-shadow: rgba(var(--south-color-rgb), var(--wheel-shadow-opacity)) 0 0 var(--wheel-shadow-size);
}

.west-glow,
#west-content .poster .vimeo-embed-button {
  box-shadow: rgba(var(--west-color-rgb), var(--wheel-shadow-opacity)) 0 0 var(--wheel-shadow-size);
}

.north-glow,
#north-content .poster .vimeo-embed-button {
  box-shadow: rgba(var(--north-color-rgb), var(--wheel-shadow-opacity)) 0 0 var(--wheel-shadow-size);
}

/* MARK: Wheel Area */

#wheel-container {
  display: grid;
  /* 3x3 grid */
  grid-template-areas: 'top-left top-lc top top-rc top-right' 'left center-lc center center-rc right' 'bottom-left bottom-lc bottom bottom-rc bottom-right';
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(33vmin, 500px) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(33vmin, 500px) minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  height: 100vh;
  width: 100vw;
  transition: transform 0.6s ease-in-out;
}

.title-section h2 {
  color: var(--main-color);
  text-align: center;
  font-size: 2em;
  margin: 0;
  word-break: break-all;
  font-weight: 400;
  transition: all 0.3s ease-in-out;
}

:not(#select-a-direction).title-section:hover h2 {
  color: var(--link-hover-color);
}

.title-section .syllabics {
  font-family: 'BJCree', sans-serif;
  /* font-weight: 600; */
}

.title-section {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  /* background-color: red; */
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

#wheel-container.north-hover #north-section,
#wheel-container.east-hover #east-section,
#wheel-container.south-hover #south-section,
#wheel-container.west-hover #west-section,
#wheel-container.center-hover #center-section-top,
#wheel-container.center-hover #center-section-bottom,
#wheel-container[class=""] #select-a-direction,
#wheel-container:not([class]) #select-a-direction {
  transform: translate(0);
  opacity: 1;
  pointer-events: all;
}

/* MARK: Select a Direction */

#select-a-direction {
  grid-area: bottom-left / bottom-left / bottom-right / bottom-right;
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-items: start;
  gap: 1em;
  padding-top: 2.8em;
  transform: translate(0, -24px);
  pointer-events: none;
  cursor: auto;
}

/* MARK: east-section */
#east-section {
  grid-area: center-rc;
  position: relative;
  left: -2.5em;
  padding: 5em;
  align-items: center;
  justify-content: center;
  width: max-content;
  justify-self: start;
  transform: translate(-24px, 0);
}

#east-section div.cree {
  padding-bottom: 0.5em;
}

#east-section div.en-fr {
  padding-top: 0.5em;
}

/* MARK: south-section */
#south-section {
  grid-area: bottom-left / bottom-left / bottom-right / bottom-right;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1em;
  padding-top: 4em;
  transform: translate(0, -24px);
}

#south-section div {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 100%;
}

#south-section div.cree {
  align-items: end;
  padding-right: 0.5em;
}

#south-section div.en-fr {
  align-items: start;
  padding-left: 0.5em;
}

/* MARK: west-section */
#west-section {
  grid-area: center-lc;
  position: relative;
  right: -2.5em;
  padding: 5em;
  /* Needed to center the wheel, thanks CSS */
  padding-left: 3em;
  align-items: center;
  justify-content: center;
  width: max-content;
  justify-self: end;
  transform: translate(24px, 0);
}

#west-section div.cree {
  padding-bottom: 0.5em;
}

#west-section div.en-fr {
  padding-top: 0.5em;
}

/* MARK: north-section */
#north-section {
  grid-area: top-left / top-left / top-right / top-right;
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-items: end;
  gap: 1em;
  padding-bottom: 4em;
  transform: translate(0, 24px);
}

#north-section div {
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 100%;
}

#north-section div.cree {
  align-items: end;
  padding-right: 0.5em;
}

#north-section div.en-fr {
  align-items: start;
  padding-left: 0.5em;
}

#north-section h2 {
  text-align: center;
}

/* MARK: center-section top/bottom */
#center-section-top {
  grid-area: top-left / top-left / top-right / top-right;
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-items: end;
  gap: 1em;
  position: relative;
  top: 2em;
  padding-bottom: 4em;
  transform: translate(0, 24px);
}

#center-section-bottom {
  grid-area: bottom-left / bottom-left / bottom-right / bottom-right;
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-items: start;
  gap: 1em;
  position: relative;
  top: -2em;
  padding-top: 4em;
  transform: translate(0, -24px);
}

#center-section-top div,
#center-section-bottom div {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#center-section-top div {
  justify-content: end;
}

#center-section-bottom div {
  justify-content: start;
}

/* MARK: Tents */

.tent-section {
  box-sizing: border-box;
  padding: 1em;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tent-section.hover {
  opacity: 1;
  transform: translate(0, 0);
}

.tent-section img {
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 50%;
}

#east-tent {
  grid-area: center-rc / center-rc / right / right;
}

#south-tent {
  grid-area: bottom-lc / bottom-lc / bottom-rc / bottom-rc;
}

#west-tent {
  grid-area: left / left / center-lc / center-lc;
}

#north-tent {
  grid-area: top-lc / top-lc / top-rc / top-rc;
}

@media screen and (max-width: 768px) {
  #wheel-container {
    grid-template-columns: 0fr 1fr 1fr 1fr 0fr;
    grid-template-rows: 1fr 1fr 1fr;
  }

  #north-section {
    padding-bottom: 0;
  }

  #south-section {
    padding-top: 0;
  }

  #north-section,
  #south-section {
    flex-direction: column;
  }

  #north-section div,
  #south-section div {
    display: block;
  }

  #west-section {
    grid-area: top;
    justify-self: center;
    justify-items: end;
    padding-right: 0;
  }

  #east-section {
    grid-area: bottom;
    justify-self: center;
    padding-left: 0;
  }
}

/* MARK: Wheel */

#wheel-container.east #wheel {
  transform: translateX(-50vw) scale(0.70);
}

#wheel-container.south #wheel {
  transform: translateY(-50vh) scale(0.70);
}

#wheel-container.west #wheel {
  transform: translateX(50vw) scale(0.70);
}

#wheel-container.north #wheel {
  transform: translateY(50vh) scale(0.70);
}

#wheel-container.east #wheel-east,
#wheel-container.south #wheel-south,
#wheel-container.west #wheel-west,
#wheel-container.north #wheel-north {
  z-index: 3;
}

#wheel-container.center #wheel-east,
#wheel-container.center #wheel-south,
#wheel-container.center #wheel-west,
#wheel-container.center #wheel-north {
  transform: scale(0.70);
}

#wheel-container.center #wheel-east:hover,
#wheel-container.center #wheel-east.hover,
#wheel-container.center #wheel-east.hover-nav,
#wheel-container.center #wheel-south:hover,
#wheel-container.center #wheel-south.hover,
#wheel-container.center #wheel-south.hover-nav,
#wheel-container.center #wheel-west:hover,
#wheel-container.center #wheel-west.hover,
#wheel-container.center #wheel-west.hover-nav,
#wheel-container.center #wheel-north:hover,
#wheel-container.center #wheel-north.hover,
#wheel-container.center #wheel-north.hover-nav {
  transform: scale(0.85);
}

#wheel-container.center #wheel-center-outer,
#wheel-container.center-start-anim #wheel-center-outer {
  transform: scale(50);
  transition: transform 0.6s ease-in-out;
}

#wheel {
  grid-area: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  height: 90%;
  width: auto;

  max-height: 500px;
  border-radius: 50%;
  background-color: black;
  transition: transform 0.6s ease-in-out;
}

#wheel .wheel-section,
.wheel-shadow,
.wheel-border,
.wheel-color {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  border-radius: 50%;
  z-index: 0;
  cursor: pointer;
  transition: all 0.3s ease-in-out, z-index 0.3s steps(2, jump-start);
}

#wheel .wheel-section:hover,
#wheel .wheel-section.hover,
#wheel .wheel-section.hover-nav {
  z-index: 1;
}

.wheel-shadow {
  background-image: conic-gradient(rgba(0, 0, 0, 0) calc(var(--shadow-angle) - var(--shadow-offset)),
      var(--shadow-color) calc(var(--shadow-angle) + var(--shadow-offset)) calc(var(--shadow-angle) + 90deg - var(--shadow-offset)),
      rgba(0, 0, 0, 0) calc(var(--shadow-angle) + 90deg + var(--shadow-offset)));
  transition: --shadow-color 0.3s ease-in-out;
}

.wheel-selectable {
  filter: var(--wheel-unselected-filter);
}

#wheel-container.east-hover #wheel-east,
#wheel-container.east #wheel-east,
#wheel-container.south-hover #wheel-south,
#wheel-container.south #wheel-south,
#wheel-container.west-hover #wheel-west,
#wheel-container.west #wheel-west,
#wheel-container.north-hover #wheel-north,
#wheel-container.north #wheel-north,
#wheel-container.center-hover #wheel-center-outer,
#wheel-container.center-start-anim #wheel-center-outer,
#wheel-container.center #wheel-center-outer {
  filter: none;
}

#wheel-container[class=""] .wheel-selectable,
#wheel-container:not([class]) .wheel-selectable {
  filter: none;
}

/* MARK: East */

#wheel-east {
  border-radius: 50%;
  clip-path: polygon(calc(50% - 8px) 50%, calc(100% - 8px) 0, 100% 0, 100% -50%, 150% -50%, 150% 150%, 100% 150%, 100% 100%, calc(100% - 8px) 100%);
}

#wheel-east .wheel-shadow {
  --shadow-angle: 45deg;
  --shadow-color: rgba(0, 0, 0, 0);
}

#wheel-east:hover .wheel-shadow,
#wheel-east.hover .wheel-shadow,
#wheel-east.hover-nav .wheel-shadow {
  --shadow-color: rgba(0, 0, 0, 1);
}

#wheel-east .wheel-border {
  clip-path: polygon(50% 50%, 100% 100%, 100% -50%, 150% -50%, 150% 150%, 100% 150%, 100% 0);
  background-color: var(--wheel-border-color);
}

#wheel-east .wheel-color {
  clip-path: polygon(calc(50% + 2px) 50%, 100% calc(100% - 2px), 100% -50%, 150% -50%, 150% 150%, 100% 150%, 100% 2px);
  background-color: var(--east-color);
  box-shadow: rgba(var(--east-color-rgb), var(--wheel-shadow-opacity)) 0 0 var(--wheel-shadow-size);
}

#wheel-east:hover,
#wheel-east.hover,
#wheel-east.hover-nav {
  transform: translateX(-4%) scale(1.2);
}

/* MARK: South */

#wheel-south {
  border-radius: 50%;
  clip-path: polygon(50% calc(50% - 8px), 100% calc(100% - 8px), 100% 100%, 150% 100%, 150% 150%, -50% 150%, -50% 100%, 0 100%, 0 calc(100% - 8px));
}

#wheel-south .wheel-shadow {
  --shadow-angle: 135deg;
  --shadow-color: rgba(0, 0, 0, 0);
}

#wheel-south:hover .wheel-shadow,
#wheel-south.hover .wheel-shadow,
#wheel-south.hover-nav .wheel-shadow {
  --shadow-color: rgba(0, 0, 0, 1);
}

#wheel-south .wheel-border {
  clip-path: polygon(50% 50%, 100% 100%, 150% 100%, 150% 150%, -50% 150%, -50% 100%, 0 100%);
  background-color: var(--wheel-border-color);
}

#wheel-south .wheel-color {
  clip-path: polygon(50% calc(50% + 2px), calc(100% - 2px) 100%, 150% 100%, 150% 150%, -50% 150%, -50% 100%, 2px 100%);
  background-color: var(--south-color);
  box-shadow: rgba(var(--south-color-rgb), var(--wheel-shadow-opacity)) 0 0 var(--wheel-shadow-size);
}

#wheel-south:hover,
#wheel-south.hover,
#wheel-south.hover-nav {
  transform: translateY(-4%) scale(1.2);
}

/* MARK: West */

#wheel-west {
  border-radius: 50%;
  clip-path: polygon(calc(50% + 8px) 50%, 8px 100%, 0 100%, 0 150%, -50% 150%, -50% -50%, 0 -50%, 0 0, 8px 0);
}

#wheel-west .wheel-shadow {
  --shadow-angle: 225deg;
  --shadow-color: rgba(0, 0, 0, 0);
}

#wheel-west:hover .wheel-shadow,
#wheel-west.hover .wheel-shadow,
#wheel-west.hover-nav .wheel-shadow {
  --shadow-color: rgba(0, 0, 0, 1);
}

#wheel-west .wheel-border {
  clip-path: polygon(50% 50%, 0 100%, 0 150%, -50% 150%, -50% -50%, 0 -50%, 0 0);
  background-color: var(--wheel-border-color);
}

#wheel-west .wheel-color {
  clip-path: polygon(calc(50% - 2px) 50%, 0 calc(100% - 2px), 0 150%, -50% 150%, -50% -50%, 0 -50%, 0 2px);
  background-color: var(--west-color);
  box-shadow: rgba(var(--west-color-rgb), var(--wheel-shadow-opacity)) 0 0 var(--wheel-shadow-size);
}

#wheel-west:hover,
#wheel-west.hover,
#wheel-west.hover-nav {
  transform: translateX(4%) scale(1.2);
}

/* MARK: North */

#wheel-north {
  border-radius: 50%;
  clip-path: polygon(50% calc(50% + 8px), 0 8px, 0 0, -50% 0, -50% -50%, 150% -50%, 150% 0, 100% 0, 100% 8px);
}

#wheel-north .wheel-shadow {
  --shadow-angle: 315deg;
  --shadow-color: rgba(0, 0, 0, 0);
  /* Special-cased due to browsers not liking wrapping gradients past 360deg */
  background-image: conic-gradient(var(--shadow-color) 0deg 43deg,
      rgba(0, 0, 0, 0) 47deg,
      rgba(0, 0, 0, 0) 313deg,
      var(--shadow-color) 317deg 0deg);
}

#wheel-north:hover .wheel-shadow,
#wheel-north.hover .wheel-shadow,
#wheel-north.hover-nav .wheel-shadow {
  --shadow-color: rgba(0, 0, 0, 1);
}

#wheel-north .wheel-border {
  clip-path: polygon(50% 50%, 0 0, -50% 0, -50% -50%, 150% -50%, 150% 0, 100% 0);
  background-color: var(--wheel-border-color);
}

#wheel-north .wheel-color {
  clip-path: polygon(50% calc(50% - 2px), 2px 0, -50% 0, -50% -50%, 150% -50%, 150% 0, calc(100% - 2px) 0);
  background-color: var(--north-color);
  box-shadow: rgba(var(--north-color-rgb), var(--wheel-shadow-opacity)) 0 0 var(--wheel-shadow-size);
}

#wheel-north:hover,
#wheel-north.hover,
#wheel-north.hover-nav {
  transform: translateY(4%) scale(1.2);
}

/* MARK: Center */

#wheel-container.center-hover #wheel-north,
#wheel-container.center-hover #wheel-south {
  pointer-events: none;
}

#wheel-center-outer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid black;
  box-shadow: #000 0 0 10px;

  border-radius: 50%;
  width: 45%;
  height: 45%;
  background-color: var(--center-outer-color);
  z-index: 5;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

#wheel-container.center-hover #wheel-center-outer,
#wheel-center-outer:hover,
#wheel-center-outer.hover,
#wheel-center-outer.hover-nav {
  transform: scale(1.2);
}

#wheel-center-mid {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid black;
  box-shadow: #000 0 0 10px;

  border-radius: 50%;
  width: 65%;
  height: 65%;
  background-color: var(--center-mid-color);
}

#wheel-center-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid black;
  box-shadow: #000 0 0 10px;

  border-radius: 50%;
  width: 60%;
  height: 60%;
  background-color: var(--center-inner-color);
}

/* MARK: Start Anim center image */

#wheel-center-image {
  grid-area: center;
  z-index: 99;
  display: none;
}

#wheel-container.center-image-anim #wheel-center-image {
  display: initial;
  animation: center-image-anim 3s forwards;
}

@keyframes center-image-anim {
  0% {
    transform: scale(0.5);
  }

  50% {
    transform: scale(2);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* MARK: Video content */

.video-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.6s ease-in-out;

  overflow: hidden;
  scrollbar-width: thin;
  pointer-events: none;
  padding: 4em;
  box-sizing: border-box;
}

.video-content.north {
  padding-bottom: 12em;
}

.go-back-button {
  padding: 1em;
  margin: 1em;
  border: none;
  background-color: var(--nav-bg-color);
  color: var(--main-color);
  font-family: var(--main-font);
  font-size: 1.5em;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}

.go-back-button:hover,
.go-back-button:focus {
  background-color: var(--nav-bg-highlight);
  color: var(--link-hover-color);
}

.video-container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8em;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.video-container .poster {
  height: 100%;
  max-height: 480px;
}

.vimeo-embed-button {
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
  background-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: all 0.3s ease-in-out;
  height: 100%;
}

.vimeo-embed-button:focus {
  outline: 4px solid #fff;
  outline-offset: -4px;
}

.vimeo-embed-button:hover,
.vimeo-embed-button:focus {
  transform: scale(1.01);
}

.vimeo-embed-button:active {
  transform: scale(0.99);
}

/* .vimeo-embed-button img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
} */

#embed-modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100;
  justify-content: center;
  align-items: center;
  padding: 5em;
  box-sizing: border-box;

  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

#embed-modal.show {
  opacity: 1;
  pointer-events: all;
}

#close-embed-modal {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 48px;
  height: 48px;
  cursor: pointer;
  background-color: red;
  border: none;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;

  font-family: 'Courier New', Courier, monospace;
  font-size: 1.75em;
  display: flex;
  justify-content: center;
  align-items: center;
}

#close-embed-modal:hover,
#close-embed-modal:focus {
  background-color: darkred;
}

#close-embed-modal span {
  color: white;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#embed-modal .embed-responsive {
  flex-grow: 1;
  flex-shrink: 1;
  /* max-width: 640px; */
  /* max-height: 360px; */
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

#embed-modal #embed-modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
  height: 100%;
  width: 100%;
}

.video-container .embed-responsive {
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 640px;
  max-height: 360px;
  width: 100%;
  height: 100%;
}

.video-container .embed-responsive .embed-responsive-item {
  width: 100%;
  height: 360px;
}

#wheel-container.east #east-content,
#wheel-container.south #south-content,
#wheel-container.west #west-content,
#wheel-container.north #north-content,
#wheel-container.center #center-content {
  opacity: 1;
  transform: translate(0, 0);
  pointer-events: all;
}

#east-content {
  grid-area: top-left / top-left / bottom-right / bottom-right;
  transform: translate(-24px, 0);
}

#south-content {
  grid-area: top-left / top-left / bottom-right / bottom-right;
  transform: translate(0, -24px);
}

#west-content {
  grid-area: top-left / top-left / bottom-right / bottom-right;
  transform: translate(24px, 0);
}

#north-content {
  grid-area: top-left / top-left / bottom-right / bottom-right;
  transform: translate(0, 24px);
}

#center-content {
  z-index: 50;
  grid-area: top-left / top-left / bottom-right / bottom-right;
  transform: translate(0, 24px);
}

/* MARK: Navigation */

nav .nav-header-container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 8px;
}

nav.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 99;
}

label[for="nav-toggle"] {
  background-color: var(--tertiary-color);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  margin: 12px;
  z-index: 100;
  cursor: pointer;
}

.nav-label-text {
  font-size: 1.3em;
  color: var(--main-color);
  /* margin-top: 8px; */
  margin-left: 8px;
  text-align: center;
}

.hamburger-icon {
  border: 3px solid #fff;
  width: 28px;
  height: 0;
  transition: all 0.3s ease-in-out;
}

.hamburger-icon::before {
  border: 3px solid #fff;
  transform: translate(-3px, -15px);
  width: 28px;
  display: block;
  content: '';
  transition: all 0.3s ease-in-out;
}

.hamburger-icon::after {
  border: 3px solid #fff;
  transform: translate(-3px, 3px);
  width: 28px;
  display: block;
  content: '';
  transition: all 0.3s ease-in-out;
}

nav.main-nav #nav-toggle {
  display: none;
}

nav.main-nav.open label .hamburger-icon {
  border: 3px solid transparent;
}

nav.main-nav.open label .hamburger-icon:before {
  transform: translate(-6px, -3px) rotate(45deg);
  width: 34px;
}

nav.main-nav.open label .hamburger-icon:after {
  transform: translate(-6px, -9px) rotate(-45deg);
  width: 34px;
}

nav.main-nav #nav-header {
  display: flex;
  flex-direction: row;
  width: max-content;
  z-index: 100;
  cursor: pointer;
}

nav.main-nav #nav-header h1 {
  font-size: 1.65em;
  margin: 0;
  margin-top: 4px;
  margin-left: 8px;
}

#site-nav {
  margin: 0;
  box-sizing: border-box;
  padding: 2em 2em;
  margin-top: 64px;
  height: 100vh;
  width: max-content;
  max-width: 100vw;
  background-color: var(--nav-bg-color);
  filter: drop-shadow(0 10px 4px #00000066);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in-out;
  overflow-y: auto;
  scrollbar-width: thin;
  list-style: none;
}

nav.main-nav.open #site-nav {
  transform: translateX(0%);
}

/* TODO: nav seems to overflow the body on mobile??? */

#site-nav>li {
  margin: 1em 0;
  padding-top: 0.1em;
  padding-left: 1.7em;
  font-size: 1.6em;
  cursor: pointer;
}

#site-nav li a {
  color: var(--main-color);
  text-decoration: none;
  word-break: break-word;
  margin-top: -20px;
  transition: all 0.1s ease-in-out;
}

#site-nav li:hover a,
#site-nav li a:hover,
#site-nav li a:focus {
  color: var(--link-hover-color);
  text-decoration: underline;
}

#site-nav li a.active {
  color: var(--link-hover-color);
}

#site-nav>li:first-of-type {
  margin-top: 0em;
}

#site-nav>li:last-of-type {
  margin-bottom: 2.5em;
}

#site-nav>li:before {
  content: '\2022';
  position: absolute;
  display: block;
  left: 0.8em;
  text-indent: -99em;
  height: 46px;
  width: 46px;
  background-image: none;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 10px;
}

#site-nav>li:nth-of-type(1):before {
  background-image: url('./img/02-East.png');
}

#site-nav>li:nth-of-type(2):before {
  background-image: url('./img/03-South.png');
}

#site-nav>li:nth-of-type(3):before {
  background-image: url('./img/04-West.png');
}

#site-nav>li:nth-of-type(4):before {
  background-image: url('./img/05-North.png');
}

#site-nav>li:nth-of-type(5):before {
  background-image: url('./img/06-Chish.png');
}

#site-nav>li:nth-of-type(6):before {
  background-image: url('./img/01-North.png');
}

#site-nav>li ul {
  display: none;
}

#site-nav>li:hover ul {
  display: block;
}

#site-nav>li ul li {
  margin-top: 6px;
}