:root {
  --_theme---background: white;
  --_theme---text: #2400cc;
  --font--size: clamp(1.5rem, 6vw, 4rem);
  --font--height: 1.2;
  --font--margin: calc(var(--font--size) * var(--font--height));
  --padding: clamp(1rem, 7vw, 5rem);
}

body {
  background-color: var(--_theme---background);
  color: var(--_theme---text);
  font-family: IBM Plex Serif, sans-serif;
  font-size: var(--font--size);
  line-height: var(--font--height);
  font-weight: 400;
}

h1 {
  margin-top: 0;
  margin-bottom: var(--font--margin);
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

p {
  margin-bottom: var(--font--margin);
}

a {
  -webkit-text-decoration-skip-ink: auto;
  text-decoration-skip-ink: auto;
  text-underline-position: under;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: .017em;
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease;
}

a:hover {
  text-decoration: none;
}

.main {
  padding: var(--padding);
  flex-flow: column;
  justify-content: space-between;
  min-height: 100svh;
  display: flex;
}

.hero {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 30ch;
  margin-top: -.35cap;
  display: flex;
}

.dark {
  --_theme---background: #120066;
  --_theme---text: white;
}

.light {
  font-weight: 100;
}

.hyphen {
  margin-left: -.25%;
  margin-right: -.25%;
  font-weight: 100;
}

.footer {
  grid-column-gap: var(--padding);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: -.15cap;
  display: flex;
}

.footer__portfolio--arrow {
  vertical-align: middle;
  font-size: calc(clamp(1.5rem, 6vw, 4rem) / 1.53846);
}

::selection {
  background-color: var(--_theme---text);
  color: var(--_theme---background);
}