* {
  font-family: Roboto;
}

:root {
  --indent: 30px;
  --main-width: 120ch;
  
  --theme: #296c7a;
  --theme-90: color-mix(in oklab, var(--theme) 90%, white 10%);
  --theme-80: color-mix(in oklab, var(--theme) 80%, white 20%);
  --theme-70: color-mix(in oklab, var(--theme) 70%, white 30%);
  --theme-60: color-mix(in oklab, var(--theme) 60%, white 40%);
  --theme-50: color-mix(in oklab, var(--theme) 50%, white 50%);
  --theme-40: color-mix(in oklab, var(--theme) 40%, white 60%);
  --theme-30: color-mix(in oklab, var(--theme) 30%, white 70%);
  --theme-20: color-mix(in oklab, var(--theme) 20%, white 80%);
  --theme-10: color-mix(in oklab, var(--theme) 10%, white 90%);
  
  --accent: #e03513;
  --accent-90: color-mix(in oklab, var(--accent) 90%, white 10%);
  --accent-80: color-mix(in oklab, var(--accent) 80%, white 20%);
  --accent-70: color-mix(in oklab, var(--accent) 70%, white 30%);
  --accent-60: color-mix(in oklab, var(--accent) 60%, white 40%);
  --accent-50: color-mix(in oklab, var(--accent) 50%, white 50%);
  --accent-40: color-mix(in oklab, var(--accent) 40%, white 60%);
  --accent-30: color-mix(in oklab, var(--accent) 30%, white 70%);
  --accent-20: color-mix(in oklab, var(--accent) 20%, white 80%);
  --accent-10: color-mix(in oklab, var(--accent) 10%, white 90%);
}

html {
  --side-nav-width: 400px;
  --side-nav-btn-diameter: 50px;
  transition: filter 0.3s ease-in-out;
  &.no-transition,
  &.no-transition * {
    transition: none !important;
  }
}

body {
  margin: 0;
  padding: 0;
  margin-left: var(--side-nav-width);
  background-color: white;
  transition: margin 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

@media (pointer: fine) and (hover: hover) {
  .side-nav-btn:hover,
  .accordion-btn:hover {
    filter: brightness(0.8);
  }
}

.side-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--side-nav-width);
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.side-nav-links {
  background-color: var(--theme-10);
  overflow-x: hidden;
  overflow-y: scroll;
  flex: 1;
  &::-webkit-scrollbar {
    width: 7px;
    background: var(--theme-30);
  }
  &::-webkit-scrollbar-thumb {
    background: var(--theme-60);
    border-radius: 5px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: var(--theme-80);
  }
  & > div {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px;
    padding: 10px;
    padding-top: 30px;
    box-sizing: border-box;
    width: calc(var(--side-nav-width) - 7px);
  }
  width: var(--side-nav-width);
  box-shadow: 0 calc(max(100lvh,100vh) - 100dvh) var(--theme-10);
  transition: width 0.3s ease-in-out;
}

html.side-nav-closed {
  --side-nav-width: calc(var(--side-nav-btn-diameter) / 2);

  & .side-nav {
    & .side-nav-header {
      .side-nav-btn {
        & .shrink {
          display: none;
        }
        & .expand {
          display: inline;
        }
        border-radius: 0 100% 100% 0;
      }
      & .side-nav-logo {
        display: none;
      }
    }
    & .side-nav-links > * {
      display: none;
    }
    & .side-nav-links::-webkit-scrollbar {
      width: 5px;
      background: var(--theme-80);
    }
  }
}

.side-nav-header {
  background-color: var(--theme-80);
  height: var(--side-nav-btn-diameter);
  position: relative;
  width: var(--side-nav-width);
  transition: width 0.3s ease-in-out;
}

.side-nav-logo {
  overflow: hidden;
  padding: 5px;
  & img {
    height: calc(var(--side-nav-btn-diameter) - 10px);
  }
}

.side-nav-divider {
  width: 100%;
  border: 3px solid var(--theme-80);
  box-sizing: border-box;
  border-radius: 3px;
  margin-block: 10px;
}

.side-nav-back-img {
  min-height: 0;
  flex-shrink: 1;
  opacity: 0.15;
  padding-inline: 30px;
  padding-bottom: 20px;
  margin-block: auto;
}

.side-nav-btn {
  position: absolute;
  top: 0;
  right: calc(0px - var(--side-nav-btn-diameter)/2);
  background-color: var(--theme-80);
  border: none;
  width: var(--side-nav-btn-diameter);
  aspect-ratio: 1;
  border-radius: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  &:active {
    filter: brightness(0.65);
  }
  & img {
    height: 55%;
    opacity: 80%;
  }
  & .shrink {
    display: inline;
  }
  & .expand {
    display: none;
    translate: -2px
  }
  transition: border-radius 0.3s ease-in-out, filter 0.1s linear;
}

.side-nav-tab {
  &:last-child {
    padding-bottom: 10px;
  }
  & .accordion-header {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr auto;
    gap: 20px;
  }
  & .accordion-btn {
    background-color: var(--theme-10);
    border: none;
    border-radius: 50%;
    aspect-ratio: 1;
    margin-block: 2px;
    rotate: -90deg;
    transition: rotate 0.5s ease-in-out, filter 0.1s linear;
    cursor: pointer;
    &:active {
      filter: brightness(0.65);
    }
    & > div {
      -webkit-mask-image: url("/icons/accordion.svg");
      mask-image: url("/icons/accordion.svg");
      -webkit-mask-size: contain;
      mask-size: contain;
      background-color: black;
      width: 100%;
      height: 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
    }
  }
  & .accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows ease-in-out;
    & > div {
      overflow: hidden;
    }
  }
  &.open .accordion-btn {
    rotate: 0deg;
  }
  &.open .accordion-content {
    grid-template-rows: 1fr;
  }
  & h2 {
    margin: 0;
  }
  & hr {
    margin: 0;
    margin-bottom: 10px;
    margin-top: 0;
    border: 1px solid black;
  }
  & ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 5px;
    & .item a {
      padding-left: calc(10px + var(--indent));
      text-indent: calc(0px - var(--indent));
      font-size: 20px;
      font-weight: bold;
    }
    & .sub-item a {
      padding-left: calc(30px + var(--indent));
      text-indent: calc(0px - var(--indent));
    }
    & .item + .item {
      margin-top: 5px;
    }
    & .sub-item + .sub-item {
      margin-top: 1px;
    }
    & .sub-item + .item {
      margin-top: 5px;
    }
    & .item + .sub-item {
      margin-top: -1px;
    }
  }
  a {
    color: black;
    display: block;
  }
  & .side-nav-current a {
    text-decoration: underline;
    color: var(--theme);
  }
}

.side-nav-links:hover .side-nav-current a:hover {
  color: var(--accent);
}

.side-nav-background {
  display: none;
  position: absolute;
  top: 0;
  height: max(100vh, 100lvh);
  width: 100vw;
  background-color: transparent;
  z-index: -1;
  transition: background-color 0.3s ease-in-out;
}


main {
  padding: 30px calc(max(calc(50% - var(--main-width)/2), 0px) + 20px) 20px calc(max(calc(50% - var(--main-width)/2), 0px) + 40px);
  height: 100dvh;
  overflow-y: auto;
  box-sizing: border-box;
  grid-column-start: 2;
  transition: padding 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: white;
  & .content-block > :first-child {
    margin-top: 0;
  }
  & .content-block > :last-child {
    margin-bottom: 0;
  }
  & .content-block {
    background-color: var(--theme-10);
    padding: 20px;
    border-radius: calc(var(--side-nav-btn-diameter)/2);
    border: 5px solid var(--theme-80);
    overflow-wrap: break-word;
    word-break: break-word;
  }
  & .content-block.intro-block {
    background-color: var(--accent-10);
    border-color: var(--accent-90);
  }
  & h1, & h2 {
    margin: 0;
    font-family: Kalam;
    line-height: 1;
  }
  & h1 {
    font-size: 2.5em;
  }
  & h2 {
    font-size: 1.75em;
  }
  & p {
    line-height: 1.25;
  }
}

.breadcrumbs {
  & ol {
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    & li + li::before {
      content: ">";
      padding: 0 8px;
    }
  }
}

a {
  color: var(--theme);
  text-decoration: none;
}
a:hover {
  color: var(--accent);
  text-decoration: underline;
}

main > footer {
  padding-top: 5px;
  margin-top: auto;
  display: grid;
  grid-auto-flow: column;
  & a {
    justify-self: center;
  }
}

.split-header,
main > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  & * {
    margin: 0;
  }
}

main > header .nav-buttons {
  min-width: max-content;
  display: flex;
  gap: 5px;
  & a {
    border-radius: 50%;
  }
  & button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: none;
    border-radius: 50%;
    background-color: var(--theme-10);
    width: 2rem;
    height: 2rem;
    font-size: 20px;
    color: var(--theme);
    cursor: pointer;
    &:hover {
      color: var(--accent);
    }
  }
  & .dark-mode-btn {
    display: flex;
    padding: 3px;
    & > div {
      height: 100%;
      width: 100%;
      -webkit-mask-image: url("/icons/light.svg");
      mask-image: url("/icons/light.svg");
      -webkit-mask-size: cover;
      mask-size: cover;
      background-color: var(--theme);
      &:hover {
        background-color: var(--accent);
      }
    }
    & .light {
      display: block;
    }
    & .dark {
      display: none;
    }
  }
}

.vocab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--row-count), auto);
  row-gap: 0.5rem;
  padding: 0;
  & li {
    margin-left: 30px;
  }
}

.double-content-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 20px;
}

.video-container {
  padding: 1rem;
  transition: padding 0.3s ease-in-out, margin 0.3s ease-in-out;
}
.video-container:nth-child(2) {
  padding-top: 0.5rem;
}

.video-header {
  display: grid;
  grid-template-columns: auto 20px;
  gap: 1rem;
  margin-inline: 5px;
  align-items: center;
  & a {
    aspect-ratio: 1;
    -webkit-mask-image: url("/icons/external_link.svg");
    mask-image: url("/icons/external_link.svg");
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: var(--theme);
    &:hover {
      background-color: var(--accent);
    }
  }
  & h3 {
    margin-block: 0.5rem;
  }
}

.video-embed {
  width: 100%;
  aspect-ratio: 16/9;
  transition: filter 0.3s ease-in-out;
}

.resources-list,
.games-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 25px;
}


.more-container {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-in-out;
  & > div {
    overflow: hidden;
  }
}
.more-btn {
  margin-inline: auto;
  display: block;
  border: none;
  background: none;
  font-size: 16px;
  color: var(--theme);
  cursor: pointer;
  &:hover {
    color: var(--accent);
    text-decoration: underline;
  }
  & > .more {
    display: block;
  }
  & > .less {
    display: none;
  }
}

.content-block.expanded {
  & > .more-container {
  grid-template-rows: 1fr;
  }
  & > .more-btn {
    & > .more {
      display: none;
    }
    & > .less {
      display: block;
    }
  }
}


sup {
  line-height: 0;
  display: inline-block;
  translate: 0 1px;
}


@media (max-width: 1200px) {
  html {
    --side-nav-width: min(calc(95vw - var(--side-nav-btn-diameter)/2), 400px);
  }
  body {
    margin-left: 0;
  }
  html.side-nav-closed {
    --side-nav-width: 0;
    & .side-nav-header {
      width: calc(var(--side-nav-btn-diameter)/2);
    }
    & .side-nav-links {
      width: 0px;
    }
    & .side-nav-background {
      background-color: transparent;
      pointer-events: none;
    }
  }
  .side-nav-background {
    background-color: #0007;
    display: block;
  }
  main {
    padding: 55px calc(max(calc(50% - var(--main-width)/2), 0px) + 20px) 20px calc(max(calc(50% - var(--main-width)/2), 0px) + 20px);
  }
  .double-content-block {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
}

@media (min-width: 900px) and (max-width: 1200px) {
  .vocab-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(var(--row-count-3), auto);
  }
}

@media (max-width: 900px) {
  .video-container {
    padding: 0;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 700px) {
  main {
    padding: 55px 15px 20px 15px;
  }
}

html.dark-mode {
  filter: invert(1);
  & .video-embed {
    filter: invert(1);
  }
  & .dark-mode-btn > div {
    -webkit-mask-image: url("/icons/dark.svg") !important;
    mask-image: url("/icons/dark.svg") !important;
  }
  & body {  
    background-color: black;
  }
}