@font-face {
  font-family: Atkinson;
  src: url('Atkinson Hyperlegible Next/AtkinsonHyperlegibleNext-Regular.otf');
}

@font-face {
  font-family: Atkinson-Mono;
  src: url('Atkinson Hyperlegible Mono/AtkinsonHyperlegibleMono-Regular.otf');
}

html {
  --color-primary: #386EA6;
  --color-primary-dark: #1C3F63;
  --color-primary-light: #5AD5FF;
  --color-accent: #FFD35A;
  --color-accent-dark: #A87B4F;
  --text-color-light: #edf1f4;
  --text-color-dark: #000000;
  --font: Atkinson;
  --font-mono: Atkinson-Mono;
  --size-xxsmall: 0.75rem; /* 12px */
  --size-xsmall: 1rem; /* 16px */
  --size-small: 1.25rem; /* 20px */
  --size-medium: 1.5rem; /* 24px */
  --size-large: 2.25rem; /* 36px */
  --size-xlarge: 3rem; /* 48px */
}

h1, h2, h3, h4, h5, h6, p {
  font-family: var(--font);
}

.text-xxsmall {
  font-family: var(--font);
  font-size: var(--size-xxsmall);
  color: var(--text-color-dark);
}

.text-xsmall {
  font-family: var(--font);
  font-size: var(--size-xsmall);
  color: var(--text-color-dark);
}

.text-small {
  font-family: var(--font);
  font-size: var(--size-small);
  color: var(--text-color-dark);
}

.text-medium {
  font-family: var(--font);
  font-size: var(--size-medium);
  color: var(--text-color-dark);
}

.text-large {
  font-family: var(--font);
  font-size: var(--size-large);
  color: var(--text-color-dark);
}

.text-xlarge {
  font-family: var(--font);
  font-size: var(--size-xlarge);
  color: var(--text-color-dark);
}

.text-light {
  font-family: var(--font);
  color: var(--text-color-light);
}

.bg-primary {
  background-color: var(--color-primary)
}

.bg-primary-dark {
  background-color: var(--color-primary-dark)
}

.bg-primary-light {
  background-color: var(--color-primary-light)
}

.bg-accent {
  background-color: var(--color-accent)
}

.bg-accent-dark {
  background-color: var(--color-accent-dark)
}

.font-normal {
  font-weight: normal;
}

.flex {
  display: flex;
}

.flex-v {
  display: flex;
  flex-direction: column;
}

.flex-center-parent {
  justify-content: center;
}

.flex-center-child {
  align-items: center;
}

.flex-spacing {
  justify-content: space-evenly;
}

.center {
  text-align: center;
}

.no-space {
  margin: 0px;
  padding: 0px;
}

.bg {
  background-color: var(--color-primary-dark);
}

.padding-v {
  padding-top: 16px;
  padding-bottom: 16px;
}

.padding-h {
  padding-left: 16px;
  padding-right: 16px;
}

.margin-v {
  margin-top: 16px;
  margin-bottom: 16px;
}

.margin-h {
  margin-left: 16px;
  margin-right: 16px;
}

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

a:visited {
  color: var(--color-accent-dark);
}

a.button {
  color: var(--text-color-dark);
}

.button {
  font-family: var(--font);
  background: var(--color-accent);
  color: var(--text-color-dark);
  border: 8px;
  border-radius: 8px;
  text-align: center;
  appearance: button;
  text-decoration: none;
  cursor: pointer;
  padding-left: 16px;
  padding-right: 16px;
}

.one-part {
  flex: 1 0 0;
}

.two-part {
  flex: 2 0 0;
}

.three-part {
  flex: 3 0 0;
}

/* keep at bottom of css! */
.mono {
  font-family: var(--font-mono);
}

[v-cloak] {
  display: none !important;
}