:root {
  --color-bg: #fff;
  --color-fg: #000;
  --color-link: #500;
  --color-link-hover: #933;
  --color-shadow: #000c;

  --color-banner-bg: #000;
  --color-banner-fg: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111;
    --color-fg: #fff;
    --color-shadow: #fffc;
    --color-link: #f77;
    --color-link-hover: #faa;

    --color-banner-bg: #000;
    --color-banner-fg: #fff;
  }
}

html,
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--color-bg);
  color: var(--color-fg);
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  margin: 0;
  padding: 0;
}

ul,
ol,
li,
dl,
dt,
dd {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav {
  background-color: var(--color-banner-bg);
  color: var(--color-banner-fg);

  box-shadow: 0 0 0.25rem var(--color-shadow);

  padding: 0.5rem 2rem;

  a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;

    text-decoration: none;
    color: inherit;

    h1 {
      font-weight: normal;
      font-size: 1.5rem;
    }

    del {
      display: none;
      text-decoration: strike-through;
      opacity: 0.5;
    }

    &:hover {
      color: inherit;

      del {
        display: inline;
      }
    }
  }
}

body>section {
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

header {
  display: grid;
  grid-template-areas: "a";
  align-items: flex-end;
  background-color: var(--color-banner-bg);
  color: var(--color-banner-fg);
  box-shadow: 0 0.0625rem 0.125rem var(--color-shadow);
  overflow: hidden;

  &>* {
    grid-area: a;
  }

  h1 {
    font-size: 1.25rem;
    padding: .75rem 1.25rem;
    text-shadow: 0.125rem 0.125rem 0.25rem var(--color-banner-bg);

    &:first-line {
      font-size: 1.75rem
    }
  }

}

section a {
  color: var(--color-link);
  text-decoration: underline;

  &:hover {
    color: var(--color-link-hover);
  }


  &::before,
  &::after {
    font-family: "Material Symbols Outlined";
    display: inline-block;
    font-size: 0.75rem;
    padding-inline: 0.125rem;
    opacity: 0.75;
    vertical-align: middle;
  }

  &[target="_blank"]::after {
    content: 'open_in_new';
  }

  &[href^="mailto:"] {
    &::before {
      content: 'mail';
    }

    &::after {
      content: '';
    }
  }
}

.cat-icon::before {
  font-family: "Material Symbols Outlined";
  content: 'pets';
  font-style: normal;
  display: inline-block;
  font-size: 0.75rem;
  padding-inline: 0.125rem;
  opacity: 0.75;
  vertical-align: middle;
}

.people {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 32rem;
  justify-content: center;

  li a {
    display: grid;
    grid-template-areas: "a";
    align-items: flex-end;
    justify-items: center;
    border-radius: 0.25rem;
    overflow: hidden;
    box-shadow: 0 0.0625rem 0.125rem var(--color-shadow);
    width: 15.5rem;
    aspect-ratio: 1/1;
    background-color: var(--color-banner-bg);
    color: var(--color-banner-fg);
    text-decoration: none;

    &:hover {
      box-shadow: 0 0.125rem 0.25rem var(--color-shadow);
    }

    img {
      width: 100%;
      height: auto;
    }

    &>* {
      grid-area: a;
    }

    &>div {
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
      align-items: center;
      background-color: var(--color-banner-bg);
      border: 0.0625rem solid var(--color-banner-fg);
      border-radius: 0.5rem 0.5rem 1rem 1rem;
      padding: 0.25rem 0.75rem;
      width: max-content;
      margin-bottom: 1rem;

      h2 {
        font-size: 1.1875rem;
      }

      div {
        font-size: 0.875rem;
        opacity: 0.75;
      }
    }

  }
}

.pronunciation {
  max-width: 32rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  display: flex;
  gap: 0.25rem;
  flex-direction: column;
  align-items: center;

  code {
    font-size: inherit;
  }
}

.two-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
  gap: 1rem;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0;

  &>div {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.0625rem 0.125rem var(--color-shadow);
    padding: 0.75rem 1rem;

    h2 {
      font-size: 1.25rem;
      margin-bottom: 0.75rem;
    }

    dt {
      font-weight: bold;
      font-size: 1rem;
    }

    dd {
      font-size: 1rem;
      margin-top: 0.125rem;

      ul,
      ol {
        padding-left: 1.5rem;

        li {
          list-style: circle;
        }
      }
    }

    dd+dt {
      margin-top: 1rem;
    }
  }
}

.stateMap {
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-miterlimit: 1;
  fill: none;
  text-anchor: middle;
  box-shadow: 0 0 2px #666;
  font-size: 11px;
  font-weight: 700;
  margin-block: 10px;
  max-width: 100%;

  &.secondary {
    opacity: 0.5;
  }

  & .dividers {
    stroke: #666;
  }

  & .key .label {
    fill: var(--color-fg);
  }

  &.primary .p0,
  &.primary .s,
  &.secondary .p,
  &.secondary .p0,
  &.singular .p,
  &.singular .s {
    visibility: hidden
  }

  & .bg,
  & .state {
    fill: var(--color-bg);
  }

  & .state {
    stroke: var(--color-fg);
  }


  &.joe {
    & .passedThru {
      fill: lch(90% 100 285);
    }

    & .visited {
      fill: lch(70% 100 285);
    }

    & .lived {
      fill: lch(40% 100 285);
    }
  }

  &.crystal {
    & .passedThru {
      fill: lch(90% 100 0);
    }

    & .visited {
      fill: lch(70% 100 0);
    }

    & .lived {
      fill: lch(40% 100 0);
    }
  }
}

.legend {
  display: flex;
  gap: 1rem;
  justify-content: center;

  & ::before {
    width: 1rem;
    aspect-ratio: 1/1;
    margin-right: 0.25rem;
    border-radius: 0.5rem;
  }

  & :first-child::before {
    content: ' ';
    background-color: lch(40% 100 285);
  }

  & :last-child::before {
    content: ' ';
    width: 1rem;
    aspect-ratio: 1/1;
    background-color: lch(40% 100 0);
  }
}

.combinedTravel {
  display: grid;
  grid-template-areas: "a";

  &>* {
    grid-area: a;

    &:not(:first-child) {
      mix-blend-mode: hard-light;
    }
  }
}