/* Aldrich Font */
@font-face {
    font-family: 'Aldrich';
    src: url('../fonts/Aldrich/Aldrich-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.aldrich {
    font-family: 'Aldrich', sans-serif;
}

/* Lobster Font */
@font-face {
    font-family: 'Lobster';
    src: url('../fonts/Lobster/Lobster-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.lobster {
    font-family: 'Lobster', cursive;
}

/* VT323 Font */
@font-face {
    font-family: 'VT323';
    src: url('../fonts/VT323/VT323-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.vt323 {
    font-family: 'VT323', monospace;
}

/* Jacquard 12 Font */
@font-face {
    font-family: 'Jacquard12';
    src: url('../fonts/Jacquard_12/Jacquard12-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.jacquard12 {
    font-family: 'Jacquard12', display;
}

/* font size */
:root {
  --font-base: 22px;
  /* no need to change ratio, except if you don't like it :) */
  --r-h3: calc(28 / 22);
  --r-h2: calc(36 / 22);
  --r-h1: calc(45 / 22);
}

body {
  font-size: var(--font-base);
}

p, a {
  font-size: 1em;
}

h3 {
  font-size: calc(1em * var(--r-h3));
}

h2 {
  font-size: calc(1em * var(--r-h2));
}

h1 {
  font-size: calc(1em * var(--r-h1));
}

@media (max-width: 640px) {
  :root {
    --font-base: 14px;
  }
}

@media (max-width: 960px) {
  :root {
    --font-base: 15px;
  }
}