@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700;900&family=Raleway:wght@100;300;400;500;600;700;900&display=swap");

:root {
  /* --primary-solid: #ff3333; */
  --primary-solid: rgba(255, 51, 51, 1);
  --primary-900: rgba(255, 51, 51, 0.9);
  --primary-500: rgba(255, 51, 51, 0.5);
  --primary-300: rgba(255, 51, 51, 0.3);
  /* --secondary-solid: #1d84b5; */
  --secondary-solid: rgba(29, 132, 181, 1);
  --secondary-900: rgba(29, 132, 181, 0.9);
  --secondary-500: rgba(29, 132, 181, 0.5);
  --secondary-300: rgba(29, 132, 181, 0.3);
  /* --dark-solid: #1f1f1f; */
  --dark-solid: rgba(31, 31, 31, 1);
  --dark-900: rgba(31, 31, 31, 0.9);
  --dark-500: rgba(31, 31, 31, 0.5);
  --dark-300: rgba(255, 51, 51, 0.3);
  --dark-bg-solid: #30343f;
  --light-bg-solid: #fafaff;
  --light-font-solid: #ffffff;
  --dark-item-text: #333333;
  --gray0: #857b7b;
  --gray1: #4f4f4f;

  /* Typography */
  --base-font: "Inter", sans-serif;
  --alternative-font: "Raleway", sans-serif;

  /* Font Weight:  */
  --thin: 100;
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semibold: 600;
  --bold: 700;
  --black: 900;

  /* Font Sizes */
  --font-display: 4.6em;
  --font-jumbo: 3.8em;
  --font-xlarge: 3em;
  --font-large: 2.4em;
  --font-medium: 1.8em;
  --font-small: 1.6em;
  --font-xsmall: 1.2em;
  --font-xxsmall: 1em;

  /* Spacings */
  --spacing-128: 12.8rem;
  --spacing-68: 6.8rem;
  --spacing-36: 3.6rem;
  --spacing-28: 2.8rem;
  --spacing-16: 1.6rem;
  --spacing-12: 1.2rem;
  --spacing-8: 0.8rem;

  /* Max-Width */
  --mw: 90rem;
  --mw-800: 80rem;
  --mw-1000: 100rem;
  --mw-1200: 120rem;

  /* Varius */
  --nav-height-mobile: 7rem;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  user-select: none;
  font-size: 62.5%;
  font-family: var(--base-font);
}

body {
  font-family: var(--alternative-font);
  line-height: normal;
}

section {
  max-width: 100vw;
  overflow: hidden;
}

.text--upper {
  text-transform: uppercase;
}