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;
}

body {
    padding: 20px;
}

body {
    max-width: 100ch;
}

body {
    margin-inline: auto;
}

nav {
  --border-color: oklch(80% 3% 200/40%);
  display: flex;
  margin-bottom: auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--border-color);
  margin-bottom: 1rem;

  ul {
  display: contents;
  padding-bottom: auto;
}
  li {
  display: contents;
}

  a {
  flex:1;
  text-decoration: none;
  color: inherit;
  text-align: center;
  padding: 0.5em;
}
  a.current {
   border-bottom: 0.4em solid var(--border-color);
    padding-bottom: auto;
}
}


:root {
  --color-accent:oklch(65% 50% 0);
  accent-color: var(--color-accent);

  
}

a:hover {
  border-bottom: 0.4em solid var(--color-accent);
  background-color: color-mix(in oklch, var(--color-accent), canvas 85%);
}

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

.form-example {
    display: grid;                   
    grid-template-columns: subgrid;  
    grid-column: 1 / -1;             
    align-items: center;
}

button {
    display: grid;                   
    grid-column: 1 / -1; 
    align-items: center; 
    text-align: center;
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
   grid-auto-rows: min-content;
  gap: 1em;

}

article {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0 2em;

}

article h2 {
  margin: 0
}

body.h1 {
  font-size: 400rem;
}

.job-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1em;
  align-items: baseline;
}

section h4 {
  margin: 0;
}

section h3 {
  margin:0;
}

section {
  margin: 1em;
}

.job-desc {
  margin: 1em;
}

html {
  color-scheme: light dark;
}

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

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.stats-grid dt {
  grid-row: 1;
  font-weight: bold;
  text-align: center;
}

.stats-grid dd {
  grid-row: 2;
  text-align: center;
}

.projects img {
  width: 100%;
  height: auto;
  display: block;
}