:root {
  --night: #111111ff;
  --eerie-black: #1b1b1bff;
  --jet: #343434ff;
  --gray: #7a7a7aff;
  --silver: #c0c0c0ff;
  --platinum: #dcdcdcff;
  --red-ncs: #c40234ff;
  --cardinal: #cf173cff;
  --crimson: #dc143cff;
  --tufts-blue: #3e8edeff;

  background-color: var(--night);
  color: var(--platinum);
  font-size: 1rem;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-optical-sizing: auto;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: "Aileron", sans-serif, "BlexMono Nerd Font";
  font-size: 18pt;
}

h1 {
  font-family: 'Creato Display';
  font-weight: bold;
  font-size: 42pt;
  color: var(--crimson);
}

h2 {
  font-family: 'Creato Display';
  font-weight: regular;
  font-size: 36pt;
  color: var(--cardinal);
}

h3 {
  font-family: 'Creato Display';
  font-weight: 300;
  font-size: 24pt;
  color: var(--red-ncs);
}

div.content {
  padding: 1rem;
  width: 50%;
  align-self: center;
}

div#title {
  text-align: center;
}

h3#subtitle {
  color: var(--gray);
  font-style: italic;
}

a {
  color: var(--tufts-blue);
  text-decoration: none;
}

a.social {
  white-space: nowrap;
  padding: 0 0.5rem;
}

a:before {
  box-sizing: inherit;
  padding-right: 0.75rem;
  font-family: 'BlexMono Nerd Font';
}

a.linkedin::before {
  content: '󰌻';
}

a.pronouns::before {
  content: '󰊟';
}

a.github::before {
  content: '';
}

a.shadertoy::before {
  content: '󰥶';
}

a.itch::before {
  content: '';
}

a.soundcloud::before {
  content: '󰓀';
}

a.kofi::before {
  content: '';
}

div.socials {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-self: center;
  width: 100%;
}

div.end {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 1.5rem;
  gap: 0.5rem;
}

.project-icon {
  padding-right: 0.5rem;
}