:root {
  /* FONT */
  --font-primary: "Alpina Sans", sans-serif;
  --lh-default: 1.9;
  --lh-headers: 1.5;
  --clamp-index: 4vw;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 500;
  --fw-bold: 700;
  --fw-black: 900;
  /* H1 */
  --h1-max-size: 55px;
  --h1-min-size: 44px;
  --h1-size: clamp(var(--h1-min-size), var(--clamp-index), var(--h1-max-size))/1;
  --h1: var(--fw-black) var(--h1-size) var(--font-primary);
  /* H2 */
  --h2-max-size: 44px;
  --h2-min-size: 24px;
  --h2-size: clamp(var(--h2-min-size), var(--clamp-index), var(--h2-max-size))/var(--lh-headers);
  --h2: var(--fw-bold) var(--h2-size) var(--font-primary);
  /* H3 */
  --h3-max-size: 34px;
  --h3-min-size: 24px;
  --h3-size: clamp(var(--h3-min-size), var(--clamp-index), var(--h3-max-size))/var(--lh-headers);
  --h3: var(--fw-bold) var(--h3-size) var(--font-primary);
  /* H4 */
  --h4-size: 24px/var(--lh-headers);
  --h4: var(--fw-bold) var(--h4-size) var(--font-primary);
  /* Subtitle */
  --subtitle-2-size: 14px/var(--lh-headers);
  --subtitle-2: var(--fw-bold) var(--p-default-size) var(--font-primary);
  /* Paragraph */
  --p-default-size: 14px/var(--lh-headers);
  --p-default: var(--fw-regular) var(--p-default-size) var(--font-primary);
  /* Paragraph spaced */
  --p-large-size: 14px/var(--lh-default);
  --p-large: var(--fw-regular) var(--p-large-size) var(--font-primary);

  /* COLORS */
  --color-darkBlue: #241f48;
  --color-blue: #1450C9;
  --color-midBlue: #65C5E9;
  --color-lightBlue: #99DCF1;
  --color-lightPaleBlue: #C6E6F4;
  --color-paleBlue: #D9EEF9;
  --color-darkPurple: #300249;
  --color-purple: #5D1989;
  --color-midPurple: #C6A3DC;
  --color-lightPurple: #D9C1EA;
  --color-palePurple: #EFDCED;
  --color-darkGreen: #1C3D1A;
  --color-midGreen: #98C610;
  --color-lightGreen: #DAE23D;
  --color-darkYellow: #F28816;
  --color-midYellow: #FDA529;
  --color-yellow: #FFCE00;
  --color-paleYellow: #F4E6BD;
  --color-paleGreen: #EFF4DF;
  --color-darkGrey: #404040;
  --color-midGrey: #757575;
  --color-lightGrey: #BFBFBF;
  --color-paleGrey: #DCDDDE;
  --color-darkRed: #96002B;
  --color-red: #E5102F;
  --color-midRed: #FF8080;
  --color-lightRed: #FFB2B1;
  --color-paleRed: #FFE1DD;
  /* LAYOUT */
  --max-width: min(90%, 1440px);
  --max-width--mobile: 90%;
  --wrapper-margin: 16%;
  --border-radius--default: 20px;
}

/* RESETS */
* {
  box-sizing: border-box;
}

/* COMPONENTS */

.page .button.button,
.footer .button.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  padding: 1rem 4rem;
  font-family: var(--font-primary);
  font-size: .875rem;
  font-weight: bold;
  border-radius: var(--border-radius--default);
  transition: .3s ease-in-out;
}

.page .button.button:hover,
.footer .button.button:hover {
  transform: scale(1.05);
}

.page .button.button--primary,
.footer .button.button--primary {
  --text-color: white;
  --background-color: var(--color-darkBlue);
  color: var(--text-color);
  background-color: var(--background-color);
  border: 2px solid var(--background-color);
}

.page .button.button--primary:hover,
.footer .button.button--primary:hover {
  --background-color: var(--color-blue);
}

.page .button.button--secondary,
.footer .button.button--secondary {
  --text-color: var(--color-darkBlue);
  --background-color: transparent;
  color: var(--text-color);
  background-color: var(--background-color);
  border: 2px solid var(--text-color);
}

.page .button.button--secondary:hover,
.footer .button.button--secondary:hover {
  color: var(--text-color);
}


/* LOADER SCREEN */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 15;
}

.loading div {
  width: inherit;
  height: 20vh;
}

.loading div:nth-child(1) {
  animation: 2s div1 infinite;
}

.loading div:nth-child(2) {
  animation: 2s div2 infinite;
}

.loading div:nth-child(3) {
  animation: 2s div3 infinite;
}

.loading div:nth-child(4) {
  animation: 2s div4 infinite;
}

.loading div:nth-child(5) {
  animation: 2s div5 infinite;
}


@keyframes div1 {
  0% {
    background-color: #49196B;
  }

  24% {
    background-color: #49196B;
  }

  25% {
    background-color: #1450C9;
  }

  49% {
    background-color: #1450C9;
  }

  50% {
    background-color: #98C610;
  }

  74% {
    background-color: #98C610;
  }

  75% {
    background-color: #E5102F;
  }

  100% {
    background-color: #E5102F;
  }
}


@keyframes div2 {
  0% {
    background-color: #C6A3DC;
  }

  24% {
    background-color: #C6A3DC;
  }

  25% {
    background-color: #65C5E9;
  }

  49% {
    background-color: #65C5E9;
  }

  50% {
    background-color: #DAE23D;
  }

  74% {
    background-color: #DAE23D;
  }

  75% {
    background-color: #49196B;
  }

  100% {
    background-color: #49196B;
  }
}


@keyframes div3 {
  0% {
    background-color: #FF8080;
  }

  24% {
    background-color: #FF8080;
  }

  25% {
    background-color: #009490;
  }

  49% {
    background-color: #009490;
  }

  50% {
    background-color: #F4E6BD;
  }

  74% {
    background-color: #F4E6BD;
  }

  75% {
    background-color: #65C5E9;
  }

  100% {
    background-color: #65C5E9;
  }
}


@keyframes div4 {
  0% {
    background-color: #FFE1DD;
  }

  24% {
    background-color: #FFE1DD;
  }

  25% {
    background-color: #EFF4DF;
  }

  49% {
    background-color: #EFF4DF;
  }

  50% {
    background-color: #FDA529;
  }

  74% {
    background-color: #FDA529;
  }

  75% {
    background-color: #F28816;
  }

  100% {
    background-color: #F28816;
  }
}


@keyframes div5 {
  0% {
    background-color: #96002B;
  }

  24% {
    background-color: #96002B;
  }

  25% {
    background-color: #241F48;
  }

  49% {
    background-color: #241F48;
  }

  50% {
    background-color: #65C5E9;
  }

  74% {
    background-color: #65C5E9;
  }

  75% {
    background-color: #F4E6BD;
  }

  100% {
    background-color: #F4E6BD;
  }
}