:root {
  --accent-color: #e14fed;
  --accent--text-color: #fff;
  --border-radius: 6px;
}

@page {
  size: A4;
  margin: 2.8cm 2cm;
}
@page:first {
  margin-top: 1.8cm;
}

.logo {
  img.dark {
    display: none;
  }
  img {
    max-width: 100px;
  }
}

section[data-href]:hover {
  cursor: pointer;
}

#navbar + main {
  padding-top: 0;
}

body:has(main > .centered) {
  justify-content: space-between;
}

@media (hover) {
  table {
    --text-align: left;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  gap: var(--space);
  padding: var(--space);

  main {
    clear: both;
  }

  > footer {
    padding: var(--space) 0;
    text-align: center;
    font-size: 0.8em;
    opacity: 0.8;
    .grid {
      display: flex;
      padding: 0;
      justify-content: center;
      align-items: center;
      li {
        list-style: none;
        padding: 0 0.75rem;
        &:not(:last-child) {
          border-right: 1px solid currentColor;
        }
      }
    }
  }

  > nav,
  > main,
  > footer {
    width: 100%;
    padding: 0;
    max-width: var(--max-readable-width);
  }
}

figure > a {
  color: currentColor;
  text-decoration: none;
  figcaption {
    /*font-style: normal;*/
    text-align: center;
  }
}

.slides-and-folders {
  padding: 0;

  li {
    list-style: none;
  }

  display: grid;
  gap: var(--space-small);

  > li:not(.folder) {
    @media screen and (min-width: 900px) {
      display: flex;
      justify-content: space-between;
    }

    .last-modified {
      color: var(--color-gray);
      font-family: var(--font-monospace);
      font-size: 0.8rem;
    }
  }

  .folder {
    a {
      color: currentColor;
      text-decoration: none;
      background-color: var(--color-gray-light);
      padding: var(--space-small);
      display: inline-block;
      border-radius: var(--border-radius);
      transition: background-color 0.5s;
      @media (hover) {
        &:hover {
          background-color: var(--color-gray-lighter);
        }
      }
    }
  }
}

.breadcrumbs {
  ul {
    display: flex;
    font-size: 0.7rem;
    overflow-x: auto;
    padding-left: 0;
    text-transform: lowercase;
    margin-bottom: 0;

    li {
      list-style: none;
      margin-right: 0.5rem;
      flex: 0 0 auto;
      max-width: 7rem;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color: var(--color-gray);

      &:before {
        content: "› ";
        margin-right: 0.2rem;
      }

      a {
        text-decoration: none;
        color: currentColor;
      }
    }
  }
}

.youtube-video {
  width: 560px;
  aspect-ratio: 16/9;
  margin-top: var(--space);

  @media (max-width: 560px) {
    width: 100%;
    height: auto;
  }

  .qr-code {
    display: none;
  }

  iframe {
    width: 100%;
    height: 100%;

    &:after {
      content: attr(src);
      display: block;
      padding-bottom: 56.25%;
    }
  }

  a {
    display: block;
    color: var(--color-gray);
    font-size: 0.8rem;
    text-align: right;
  }
}

article.content {
  section {
    p {
      @media print {
        img[alt="(aside)"] {
          max-width: 20rem;
          float: right;
          margin-left: var(--space);
          margin-bottom: var(--space);
        }
      }
      @media screen and (min-width: 600px) {
        img[alt="(aside)"] {
          max-width: 50%;
          float: right;
          margin-left: var(--space);
          margin-bottom: var(--space);
        }
      }
    }
  }
}

pre:has(> code[class*="language-"]) {
  position: relative;
  code {
    font-family: var(--font-monospace);
    font-size: var(--font-size-monospace);
    font-weight: 600;
  }
  .copy-code button {
    position: absolute;
    right: var(--space);
    top: var(--space);
    padding: 4px 6px;
    font: var(--font);
    font-size: 0.7rem;
  }
}

.centered {
  display: grid;
  place-content: center;
  text-align: center;
}

a.call-to-action {
  padding: var(--space);
}

section.link-list {
  a {
    text-decoration: none;
    font-weight: 600;
  }
}

@media print {
  p,
  li,
  td {
    a[href^="http"]:not(.text-is-same-as-href):after {
      content: "(→ " attr(href) ")";
      display: inline-block;
      color: var(--color-gray);
      padding-left: 0.5em;
      font-size: 80%;
    }
  }
  pre:has(> code[class*="language-"]) {
    code {
      background: none;
      box-shadow: none;
      color: #000;
      font-weight: normal;
      span {
        color: #000 !important;
      }
    }
  }
}

@media screen {
  pre:has(> code[class*="language-"]) {
    background-color: #22272e;
    code {
      font-family: var(--font-monospace);
      font-size: var(--font-size-monospace);
      font-weight: 600;
    }
  }
}

.content .fmd-root.fmd-root-inline .fmd-body {
  min-height: var(--fmd-min-height, calc(100vh - 20rem));
  .fmd-footer-inner a[href="https://forms.md"] {
    display: none;
  }
  .fmd-grid {
    h3.yeah,
    h3.doh {
      font-weight: normal;
      font-size: 1.5rem;
      text-align: center;
      padding-bottom: 4rem;
    }
  }
}

iframe {
  border: 0px;
  border-radius: var(--border-radius);
  width: 100%;
  &.youtube {
    aspect-ratio: 16/9;
  }
}

body:has(.content.no-header-no-footer) {
  nav#navbar,
  > footer {
    display: none;
  }
}