@font-face {
  font-family: 'Circular';
  src: url('/fonts/Circular fontpakke/CircularStd-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('/fonts/Circular fontpakke/CircularStd-BookItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('/fonts/Circular fontpakke/CircularStd-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('/fonts/Circular fontpakke/CircularStd-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('/fonts/Circular fontpakke/CircularStd-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('/fonts/Circular fontpakke/CircularStd-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('/fonts/Circular fontpakke/CircularStd-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('/fonts/Circular fontpakke/CircularStd-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Surveyor Display';
  src: url('/fonts/Surveyor Display fontpakke/SurveyorDisplay-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Surveyor Display';
  src: url('/fonts/Surveyor Display fontpakke/SurveyorDisplay-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Surveyor Display';
  src: url('/fonts/Surveyor Display fontpakke/SurveyorDisplay-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Surveyor Display';
  src: url('/fonts/Surveyor Display fontpakke/SurveyorDisplay-BookItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Surveyor Display';
  src: url('/fonts/Surveyor Display fontpakke/SurveyorDisplay-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Surveyor Display';
  src: url('/fonts/Surveyor Display fontpakke/SurveyorDisplay-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Surveyor Display';
  src: url('/fonts/Surveyor Display fontpakke/SurveyorDisplay-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Surveyor Display';
  src: url('/fonts/Surveyor Display fontpakke/SurveyorDisplay-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Surveyor Display';
  src: url('/fonts/Surveyor Display fontpakke/SurveyorDisplay-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Surveyor Display';
  src: url('/fonts/Surveyor Display fontpakke/SurveyorDisplay-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --af-black: #424143;
  --af-dark-blue: #43708d;
  --af-light-blue: #c3e7e7;
  --af-light-blue-border: #9fd4d4;
  --af-red: #ec695f;
  --af-pink: #ff9c9c;
  --af-orange: #f8af92;
  --af-yellow: #ecf2cf;

  --af-heading-font: 'Surveyor Display', Georgia, serif;
  --af-body-font: 'Circular', system-ui, sans-serif;
}

body {
  font-family: var(--af-body-font);
  max-width: 40rem;
  margin: 3rem auto;
  padding: 0 1rem;
  color: var(--af-black);
  background-color: var(--af-yellow);
}

h1, h2, h3 {
  font-family: var(--af-heading-font);
  font-weight: 700;
}

h1 {
  color: var(--af-black);
  font-size: 2.20rem;
}

h2, h3 {
  color: var(--af-dark-blue);
}

h2 {
  font-size: 1.50rem;
}

h3 {
  font-size: 1.00rem;
}

h4 {
  font-family: var(--af-body-font);
  font-weight: 500;
  font-size: 0.75rem;
  color: #888;
  margin: 2rem 0 0;
}

h4 a {
  color: inherit;
}

a {
  color: var(--af-dark-blue);
}

input[type='checkbox'],
input[type='date'],
input[type='time'] {
  accent-color: var(--af-black);
}

button {
  background: var(--af-light-blue);
  color: var(--af-black);
  border: 1px solid var(--af-light-blue-border);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-family: var(--af-body-font);
  cursor: pointer;
}

input[type='text'],
input[type='email'],
input[type='number'],
input[type='date'],
input[type='time'],
select {
  border: 1px solid var(--af-light-blue-border);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-family: var(--af-body-font);
  background: #fff;
  color: var(--af-black);
}

.af-logo {
  display: block;
  height: 2rem;
  width: auto;
  margin: 2.5rem 0 1rem auto;
  opacity: 0.9;
}