/* style.css */

/* font imports */
@import url(./fonts.css);

/* default (light mode) */
:root {
  --background-color: white;
  --text-color: black;
  --link-color: lightskyblue;
  --link-hover-color: orange;
  --border-color: black;
}

/* (dark mode) */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #0a0a0a;
    --text-color: white;
    --link-color: lightskyblue;
    --link-hover-color: orange;
    --border-color: white;
  }
}

/* elements */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  text-align: center;
  font-family: 'Charter';
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 3em;
  font-weight: bold;
  margin: 40px 0;
}

p {
  margin: 20px 0;
  font-size: 13pt;
}

a {
  color: var(--link-color);
  text-decoration: none;
  white-space: nowrap;
}

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

.mugshot {
  max-width: 200px;
  height: auto;
  border: 1px solid var(--border-color);
}