:root {
  color-scheme: light;

  --color-bg: #F5F5F5;
  --color-text: #000000;
  --color-accent: darkorange;

  --link-normal: darkorange;
  --link-visited: darkorange;
  --link-hover: rgb(218, 132, 28);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-bg: #282828;
    --color-text: #FFFFFF;
  }
}

body {
  font-family: Helvetica;
  background-color: var(--color-bg);
  color: var(--color-text);
  width: 75%;
  max-width: 900px;
  margin: 4em auto;
}

a:link {
  color: var(--link-normal);
}

a:visited {
  color: var(--link-visited);
}

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

/* a:active {
  
} */

.name {
  color: var(--color-accent);
}

.heading {
  font-weight: 500;
}

header h1 {
  padding-left: .5rem;
  border-left: solid 4px var(--color-accent);
}

address {
  font-family: monospace;
  font-style: normal;
}

table {
  font-family: monospace;
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 0.75rem 1rem;
  border-bottom: 2px solid lightgray;
}

th {
  text-align: left;
  font-weight: 600;
}