/*
  New Website CSS design 
  Author: Antoni/Loren
*/
@font-face {
  font-family: Philosopher-Regular;
  src: url(../fonts/Philosopher-Regular.ttf);
}

@font-face {
  font-family: Philosopher-Bold;
  src: url(../fonts/Philosopher-Bold.ttf);
}

@font-face {
  font-family: Mulish-Medium;
  src: url(../fonts/Mulish/Mulish-Medium.ttf);
}

@font-face {
  font-family: Mulish-Bold;
  src: url(../fonts/Mulish/Mulish-Bold.ttf);
}

@font-face {
  font-family: Mulish-ExtraBold;
  src: url(../fonts//Mulish/Mulish-ExtraBold.ttf);
}

:root {
  --primitives-colors-white: rgba(248, 246, 234, 1);
  --primitives-colors-black: rgba(6, 4, 2, 1);
  --primitives-colors-light-tan: rgba(235, 223, 181, 1);
  --website-color-surface-primary: rgba(46, 41, 34, 1);
  --website-color-border-secondary: rgba(63, 58, 44, 1);
  --website-color-text-secondary: rgba(217, 199, 136, 1);

  --body-desktop-font-family: "Mulish-Medium", Helvetica;
  --body-desktop-font-size: 1.125rem; /*18px;*/
  --body-desktop-font-style: normal;
  --body-desktop-font-weight: 500;
  --body-desktop-letter-spacing: 0px;
  --body-desktop-line-height: 179.99999523162842%;

  --body2-desktop-font-family: "Mulish-Medium", Helvetica;
  --body2-desktop-font-size: 1.25rem; /*20px*/
  --body2-desktop-font-style: normal;
  --body2-desktop-font-weight: 000;
  --body2-desktop-letter-spacing: 0px;
  --body2-desktop-line-height: 36px;

  --header1-desktop-font-family: "Mulish-Bold", Helvetica;
  --header1-desktop-font-size: clamp(1.5rem, 3vw, 4rem); /*58px*/
  --header1-desktop-font-style: normal;
  --header1-desktop-font-weight: 600;
  --header1-desktop-letter-spacing: 0px;
  --header1-desktop-line-height: 120.00000476837158%;

  --header2-desktop-font-family: "Philosopher-Regular", Helvetica;
  --header2-desktop-font-size: clamp(1.5rem, 2.5vw, 3.2rem); /*48px default*/
  --header2-desktop-font-style: normal;
  --header2-desktop-font-weight: 400;
  --header2-desktop-letter-spacing: 5.5px;
  --header2-desktop-line-height: 120%;

  --header3-desktop-font-family: "Philosopher-Bold", Helvetica;
  --header3-desktop-font-size: clamp(1.5rem, 3vw, 4rem); /*58px default*/
  --header3-desktop-font-style: normal;
  --header3-desktop-font-weight: 500;
  --header3-desktop-letter-spacing: 0px;
  --header3-desktop-line-height: 70px;

  --smalltext1-desktop-font-family: "Mulish-Bold", Helvetica;
  --smalltext1-desktop-font-size: 1.75rem; /*28px default*/
  --smalltext1-desktop-font-style: normal;
  --smalltext1-desktop-font-weight: 500;
  --smalltext1-desktop-letter-spacing: 2.8px;
  --smalltext1-desktop-line-height: 100%;

  --smalltext2-desktop-font-family: "Mulish-ExtraBold", Helvetica;
  --smalltext2-desktop-font-size: 1rem; /*16px default*/
  --smalltext2-desktop-font-style: normal;
  --smalltext2-desktop-font-weight: 600;
  --smalltext2-desktop-letter-spacing: 1.6px;
  --smalltext2-desktop-line-height: 180%;

  --mainHeader-desktop-font-family: "Mulish-ExtraBold", Helvetica;
  --mainHeader-desktop-font-size: clamp(
    3.25rem,
    3.75vw,
    4.5rem
  ); /*72px default*/
  --mainHeader-desktop-font-style: normal;
  --mainHeader-desktop-font-weight: 600;
  --mainHeader-desktop-letter-spacing: 0px;
  --mainHeader-desktop-line-height: 100%;

  --mainHeader2-desktop-font-family: "Philosopher-Regular", Helvetica;
  --mainHeader2-desktop-font-size: clamp(
    2.75rem,
    3.33vw,
    4rem
  ); /*64px default*/
  --mainHeader2-desktop-font-style: normal;
  --mainHeader2-desktop-font-weight: 300;
  --mainHeader2-desktop-letter-spacing: 9.6px;
  --mainHeader2-desktop-line-height: 150%;

  --links-desktop-font-family: "Mulish-ExtraBold", Helvetica;
  --links-desktop-font-size: 1rem; /*16px default*/
  --links-desktop-font-style: normal;
  --links-desktop-font-weight: 800;
  --links-desktop-letter-spacing: 2.4px;
  --links-desktop-line-height: 100%;

  --website-spacing-md: 48px;
  --website-spacing-lg: 64px;
  --website-side-padding: 15%;
}

@media (max-width: 1200px) {
  :root {
    --header3-desktop-font-size: 1.875rem;
    --body-desktop-font-size: 1rem;
    --body2-desktop-font-size: 1rem;
    --smalltext1-desktop-font-size: 1.4rem;
    --smalltext2-desktop-font-size: 0.9rem;

    --header3-desktop-line-height: 40px;
  }
}

@media (max-width: 780px) {
  :root {
    --body-desktop-font-size: 0.825rem;
    --body2-desktop-font-size: 0.825rem;
    --smalltext1-desktop-font-size: 1.2rem;
    --smalltext2-desktop-font-size: 0.8rem;
    --website-side-padding: 5%;

    --links-desktop-font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  :root {
    --body-desktop-font-size: 0.75rem;
    --body2-desktop-font-size: 0.75rem;
    --smalltext1-desktop-font-size: 1rem;
    --smalltext2-desktop-font-size: 0.75rem;

    --header2-desktop-letter-spacing: 4px;
  }
}