html {
  --color-accent: plum;
  accent-color: var(--color-accent);
  color-scheme: light dark;
}

body {
    /* Set line height to 1.5 times the font size
         and use the OS’s UI font as the website font
       */
    font: 100%/1.5 system-ui;
    max-width: 100ch;
    margin-inline: auto;
    padding: 5ch;
  }

h1 {
  font-size: 400%;
  line-height: 1.1;
  text-wrap: balance;
}

h2 {
  line-height: 1.1;
  text-wrap: balance;
}

h3 {
  line-height: 1.1;
  text-wrap: balance;
}

h4 {
  line-height: 1.1;
  text-wrap: balance;
}

h5 {
  line-height: 1.1;
  text-wrap: balance;
}

h6 {
  line-height: 1.1;
  text-wrap: balance;
}

nav {
  --border-color: oklch(50% 10% 200 / 40%);
  display: flex;
  margin-bottom: 1ch;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--border-color);
  ul {
    display: contents;
  }
  li {
    display: contents;
  }
  a {
    flex: 1;
    text-decoration: none;
    color: inherit;
    text-align: center;
    padding: 0.5em;
  }
  a:hover {
    border-bottom-width: 0.4em;
    border-bottom-style: solid;
    border-bottom-color: var(--color-accent);
    padding-bottom: 0.1em;
    background-color: color-mix(in oklch, var(--color-accent), canvas 85%);
  }
}

.current {
  border-bottom-width: 0.4em;
  border-bottom-style: solid;
  border-bottom-color: var(--border-color);
  padding-bottom: 0.1em;
}

form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1em;
}

label {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

input {
  font: inherit;
}

textarea {
  font: inherit;
}

button {
  font: inherit;
  grid-column: 1 / -1;
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  gap: 1em;
  article {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 1em;
    h2 {
      margin: 0;
    }
  }
}

.resume {
  display: grid;
  grid-template-columns: 50% 50%;
  h2 {
    display: grid;
    grid-column: 1 / -1;
  }
  article {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
  h3 {
    display: inline-block;
    img {
      margin-left: 4px;
      position: relative;
      top: 10px
  }
  }
}

.links {
  a {
    color: inherit;
  }
}

.color-scheme {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: inherit;
  font-size: 80%;
}

select {
  font-family: inherit;
  font-size: 80%;
}

#profile-stats{
  dl {
    display: grid;
    grid-template-columns: max-content auto;
    gap: 4px;
  }
  dt {
    display: subgrid;
    grid-column-start: 1;
  }
  dd {
    display: subgrid;
    grid-column-start: 2;
  }
}

#projects-pie-plot {
  max-width: 20em;
  margin-block: 2em;

  /* Do not clip shapes outside the viewBox */
  overflow: visible;
}

.swatch {
  display: inline-block;
  width: 1em;
  aspect-ratio: 1 / 1;
  background-color: var(--color);
  border-radius: 20%;
}

.legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
  border: solid oklch(82.87% 0.0057 270.62);
  gap: 0.5em;
  flex: 1;
  padding: 1em;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.container {
  display: flex;
  gap: 2em;
  align-items: center;
}

.searchBar {
  margin-bottom: 1em;
  width: 100%;
}

&:has(path:hover) {
  path:not(:hover) {
    opacity: 0.5;
  }
}

path {
  transition: 300ms;
  cursor: pointer;
}

.selected {
  --color: oklch(87.22% 0.1927 112.12) !important;

  &:is(path) {
    fill: var(--color);
  }
}

#stats {
  dl {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: left;
    column-gap: 1em;
  }
  dt {
    text-transform: uppercase;
    font-size: 14px;
    color: oklch(47.73% 0.0239 274.59);
    grid-row: 1;
  }
  dd {
    grid-row: 2;
    font-size: 25px;
    margin: 0px;
  }
}

.gridlines {
  color: oklch(77.75% 0.014 273.53 / 63.27%);
}

dl.info {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 0;
  column-gap: 0.5em;
  transition-duration: 500ms;
  transition-property: opacity, visibility;
  dt {
    margin: 0;
    color: oklch(47.73% 0.0239 274.59);
  }
  dd {
    margin: 0;
    font-weight: bold;
    color: inherit;
  }
}

dl.info[hidden]:not(:hover, :focus-within) {
  opacity: 0;
  visibility: hidden;
}

.tooltip {
  position: fixed;
  top: 1em;
  left: 1em;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
  padding: 0.7em;
}

circle {
  transition: 200ms;
  transform-origin: center;
  transform-box: fill-box;
}

circle:hover {
  transform: scale(1.5);
}

@keyframes marching-ants {
  to {
    stroke-dashoffset: -8; /* 5 + 3 */
  }
}

.selection {
  fill-opacity: 0.1;
  stroke: black;
  stroke-opacity: 0.7;
  stroke-dasharray: 5 3;
  animation: marching-ants 2s linear infinite;
}

circle.selected {
  fill: #ff6b6b;
}

#language-breakdown{
  dl {
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }
  dt {
    float: left;
    width: 8%;
    /* adjust the width; make sure the total of both is 100% */
    padding: 0;
    margin: 0;
    font-weight: bold;
  }
  dd {
    float: left;
    width: 92%;
    padding: 0;
    margin: 0;
  }
}