/* Imported fonts */
/* Alata */
@font-face {
  font-family: 'Alata';
  src: url('../fonts/Alata-Regular.woff2') format('woff2'),
       url('../fonts/Alata-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bree Serif */
@font-face {
  font-family: 'Bree Serif';
  src: url('../fonts/BreeSerif-Regular.woff2') format('woff2'),
       url('../fonts/BreeSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-ExtraLight.woff2') format('woff2'),
       url('../fonts/Oswald-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Light.woff2') format('woff2'),
       url('../fonts/Oswald-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Regular.woff2') format('woff2'),
       url('../fonts/Oswald-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Medium.woff2') format('woff2'),
       url('../fonts/Oswald-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-SemiBold.woff2') format('woff2'),
       url('../fonts/Oswald-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Bold.woff2') format('woff2'),
       url('../fonts/Oswald-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Andika';
  src: url('../fonts/Andika-Regular.woff2') format('woff2'),
       url('../fonts/Andika-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Andika';
  src: url('../fonts/Andika-Bold.woff2') format('woff2'),
       url('../fonts/Andika-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Andika';
  src: url('../fonts/Andika-Italic.woff2') format('woff2'),
       url('../fonts/Andika-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Globals */
:root {
  /* Fonts Globals */
  --font-narrow: "Oswald", sans-serif;
  --font-titles: "Bree Serif", sans-serif;
  --font-general: "Alata", sans-serif;
  /*--font-general: "Andika", sans-serif;*/
  --font-tiny: "Poppins", sans-serif;

  /* Margin Globals */
  --margin-xxs: 0.125rem; /* 2px */
  --margin-xs: 0.313rem; /* 5px */
  --margin-s: 0.625rem; /* 10px */
  --margin: 0.938rem; /* 15px */
  --margin-l: 1.25rem; /* 20px */
  --margin-xl: 1.563rem; /* 25px */
  --margin-xxl: 1.75rem; /* 28px */

  /* Padding Globals*/
  --padding-xxs: 0.125rem; /* 2px */
  --padding-xs: 0.313rem; /* 5px */
  --padding-s: 0.625rem; /* 10px */
  --padding: 0.938rem; /* 15px */
  --padding-l: 1.25rem; /* 20px */
  --padding-xl: 1.563rem; /* 25px */
  --padding-xxl: 1.75rem; /* 28px */

  /* Radius Globals */
  --border-radius-xxs: 0.125rem; /* 2px */
  --border-radius-xs: 0.313rem; /* 5px */
  --border-radius: 0.625rem; /* 10px */
  --border-radius-l: 0.938rem; /* 15px */

  /* Border sizes */

  --border-size-1: 1px;
  --border-size-2: 2px;

  /* Fonts */
  --font-size-xxs: 0.125rem; /* 2px */
  --font-size-xs2: 0.55rem; 
  --font-size-xs: 0.68rem; /* 5px-ish */
  --font-size-s: 0.75rem; /* 12px */
  --font-size: 0.938rem; /* 15px */
  --font-size-m: 1.1rem; /* 15px */
  --font-size-l: 1.25rem; /* 20px */
  --font-size-xl: 1.563rem; /* 25px */
  --font-size-xxl: 1.75rem; /* 28px */
  --font-size-huge: 2.5rem;
  --font-size-very-huge: 4rem;

  /* Picton Blue: #40a7e7 */
  --theme-color-50: #f1f8fe;
  --theme-color-100: #e2f0fc;
  --theme-color-200: #c0e0f7;
  --theme-color-200c: #586772;
  --theme-color-300: #88c7f1;
  --theme-color-400: #40a7e7;
  --theme-color-500: #2090d7;
  --theme-color-600: #1272b7;
  --theme-color-700: #105b94;
  --theme-color-800: #114e7b;
  --theme-color-900: #144266;
  --theme-color-950: #0d2a44;
  --theme-color-950c: #23303c;
  --white: #fff;
  --black: #000;

  /* General Spacing Globals */
  --spacing-xl: 1rem;
  --spacing-l: 0.75rem;
  --spacing: 0.5rem;
  --spacing-s: 0.25rem;
  --spacing-xs: 0.1rem;
}