@font-face {
  font-family: Asap;
  src: url(./Asap.ttf);
}

:root {
  --c-darkest: #1e192c;
  --c-dark: #333456;
  --c-light: #4a549c;
  --c-highlight: #499cef;
}

body {
  background-color: var(--c-darkest);
  color: white;
  font-family: Asap;
}

a {
  color: var(--c-highlight);
}

i.arrow-right {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("./icon/arrow-right-short.svg");
  vertical-align: -10%;
  filter: invert();
}

main {
  display: grid;
  grid-template-areas:
    'h h'
    's b';
  grid-template-rows: max-content max-content;
  grid-template-columns: 40ch auto;
  margin-bottom: 1em;
}

img:not([data-nozoom]) {
  cursor: zoom-in;
}

img[data-full]:not([data-zoom]),
img[data-video] {
  cursor: pointer;
}

.intro {
  grid-area: h;
  margin: 1em;
  padding: 1em;
  padding-bottom: 2.5em;
  --rot: -0.78deg;

  & .rect,
  & .rect2 {
    width: 100vw;
    height: clamp(50px, calc(50px + 24vw), 220px);
    position: absolute;
    right: 0;
    top: 0;
    transform-origin: bottom left;
    filter: drop-shadow(0 4px 4px #08080b55);
  }

  & .rect {
    background-color: var(--c-darkest);
    /* background-image: linear-gradient(to right, #1f1f2a, #281123); */
    translate: 0 -15px;
    transform: skewY(calc(var(--rot) * 1.5));
    z-index: -1;
  }

  & .rect2 {
    background-image: linear-gradient(to right, #393a65, #672066);
    transform: skewY(calc(var(--rot)));
    z-index: -2;
  }

  & button {
    background-color: var(--c-highlight);
    border: none;
    padding: 1em 1.5em;
    border-radius: 1em;
    cursor: pointer;
    font-weight: bold;
    font-size: unset;
    outline: 3px solid transparent;
    transition: background-color .2s, outline-color .2s;

    &::before {
      content: "";
      display: inline-block;
      width: 1.25em;
      height: 1.25em;
      background-image: url(./icon/envelope-fill.svg);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      vertical-align: -17%;
      margin-right: .66ch;
    }

    &:hover {
      background-color: transparent;
      outline: 3px solid var(--c-highlight);
      color: var(--c-highlight);
      filter: none;

      &::before {
        filter: invert(53%) sepia(63%) saturate(521%) hue-rotate(171deg) brightness(95%) contrast(97%);
      }
    }
  }

  & .hero {
    & p:first-child {
      margin: .25em 0;
    }

    & h1 {
      margin: .25em 0 .5em;
    }
  }
}

table {
  border-collapse: collapse;
  margin-bottom: .5em;

  & td {
    border: 1px solid white;
    padding: .25em 1ch;
    text-align: right;
  }

  & tr:first-child,
  td:first-child {
    font-weight: bold;
    background-color: #ffffff09;
  }

  & caption {
    padding-bottom: .25em;
    font-weight: bold;
  }
}

aside {
  grid-area: s;

  & .parts {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin: 1em;

    & .practice {
      background-color: var(--c-dark);
      padding: 1em 1.25em;
      border-radius: 1em;
      margin: 0 .5em;
      transition: all .2s;
      cursor: pointer;

      &::before {
        content: "";
        display: inline-block;
        height: 1.25em;
        width: 1.25em;
        vertical-align: -20%;
        margin-right: .625em;
        background-image: var(--icon);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        filter: invert();
        transition: filter .2s;
      }

      &:hover {
        background-color: var(--c-light);
      }

      &.selected {
        background-color: var(--c-highlight);
        color: black;
        padding: 1em 1.75em;
        margin: 0;

        &::before {
          filter: none;
        }
      }
    }
  }

  & p {
    padding: 0 1.25em;
    margin-top: auto;
    color: var(--c-highlight);
    text-align: center;
  }
}

.content {
  grid-area: b;
  overflow-y: scroll;
  height: 90vh;
  padding: 1em;
  border-left: 1px solid var(--c-light);

  & > div {
    &.visible {
      animation: .5s ease-out movein;
    }

    &:not(.visible) {
      display: none;
    }

    & > :first-child {
      margin-top: 0;
    }
  }
}

.carousel {
  display: flex;
  gap: 1em;
  overflow-x: scroll;
}

.example {
  width: 50ch;
  height: max-content;
  max-height: 40ch;
  padding: 1em;
  border: 1px solid var(--c-light);
  border-radius: 2em;
  flex: 0 0 25em;
  transition: border .2s;

  &:hover {
    border-color: var(--c-highlight);
  }

  & > span {
    font-weight: bold;
    translate: 0 2px;
  }

  & > img {
    border-radius: 1em;
    width: 100%;
    margin-bottom: 1em;

    &.crop {
      max-height: 30ch;
    }
  }

  & a.go {
    --icon: url(./icon/box-arrow-up-right.svg);
  }

  & a:is(.go, .about) {
    float: right;
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin-left: 1em;
    cursor: pointer;
    background-image: var(--icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: invert();
    transition: filter .2s, scale .2s;

    &:hover {
      filter: invert(53%) sepia(63%) saturate(521%) hue-rotate(171deg) brightness(95%) contrast(97%);
      scale: 1.1;
    }
  }
}

dialog:not(.zoom) {
  font-family: inherit;
  background-color: var(--c-dark);
  color: white;
  border: 2px solid var(--c-highlight);
  border-radius: 1em;
  animation: movein 0.25s reverse ease-out;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  max-width: 33vw;
  max-height: 33vh;
  z-index: 99;

  &[open] {
    animation: movein 0.25s ease-out;
    box-shadow: 0 0 2em #0004;
  }

  & :first-child {
    margin-top: 0;
  }

  & :last-child {
    margin-bottom: 0;
  }
}

dialog.zoom {
  background-color: transparent;
  border: none;
  outline: none;
  color: white;
  animation: movein 0.25s reverse ease-out;
  max-width: min-content;
  max-height: min-content;

  & :is(img, video) {
    max-width: 90vw;
    max-height: 90vh;
    cursor: auto;
  }

  &::backdrop {
    background: #0004;
    backdrop-filter: blur(5px);
    cursor: zoom-out;
  }

  &[open] {
    animation: movein 0.25s ease-out;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: .5em;
  }
}

@keyframes movein {
  from {
    opacity: 0;
    translate: 0 2lh;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}