/* css/about.css */
#root {
  background-image: url("../background-ELCPDXJS.svg"), url("../splash-Q6DEZJ7F.svg");
  background-repeat: repeat, repeat-y;
  background-position: center, top right;
  background-size: 128px, cover;
}
#main {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: auto;
  grid-column: 2 / -2;
  grid-row-start: 2;
  --padding: var(--dim-x-large);
  grid-row-gap: var(--dim-xx-large);
  grid-column-gap: var(--padding);
  max-width: var(--max-article-width);
  position: relative;
  > * {
    grid-column: 1 / -1;
  }
}
#main > svg {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  grid-column: 1 / -1;
  width: 100%;
}
#main .timeline-timestamp {
  display: grid;
  position: relative;
  grid-column: 1 / -1;
  grid-row: span 1;
  grid-template-columns: subgrid;
  place-content: center;
  place-items: center;
  overflow: hidden;
  background: var(--surface-translucent);
  border: 1px solid var(--surface-alt);
  padding: var(--dim-medium) var(--padding);
  box-sizing: border-box;
  border-radius: var(--radius-major);
  .timeline-timestamp-year {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
    aspect-ratio: 1/1;
    width: 100%;
    box-sizing: border-box;
    padding: var(--dim-large);
    font-size: smaller;
    text-align: center;
    border-radius: var(--dim-xx-large);
    backdrop-filter: blur(12px);
    .timeline-event {
      font-size: 1.1em;
    }
  }
  .timeline-timestamp-year:first-child {
    grid-column: 1;
  }
  .timeline-timestamp-year:last-child {
    grid-column: -1;
  }
  .timeline-event {
    grid-column: 2;
    width: 100%;
    color: var(--text-primary);
    text-align: left;
    padding: var(--dim-medium) var(--dim-small);
  }
  .img-container {
    grid-column: 1 / 2;
    overflow: visible;
    display: flex;
    align-self: stretch;
    z-index: -1;
    width: 100%;
    img {
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      mask-image:
        linear-gradient(
          -115deg,
          transparent 50%,
          black 100%);
    }
  }
}
@media screen and (max-width: 738px) {
  #root {
    #main {
      grid-template-columns: 1fr min-content 1fr;
    }
    #main .timeline-timestamp {
      grid-template-rows: auto 1fr;
      padding: 0;
      box-sizing: border-box;
      .timeline-event {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: var(--dim-medium);
        box-sizing: border-box;
      }
      .timeline-timestamp-year {
        grid-column: 2;
        grid-row: 1;
        padding: var(--dim-small);
        margin: var(--dim-small);
      }
      img {
        grid-row: 1 / -1;
        width: 100%;
        height: auto;
        mask-image:
          linear-gradient(
            to top,
            transparent 25%,
            black 100%);
      }
    }
  }
}