@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");

/* ----------------- GILROY ----------------- */
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Semibold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

/* ----------------- GRIFTER ----------------- */
@font-face {
  font-family: "Grifter";
  src: url("/fonts/grifterbold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

/* ----------------- GILROY BLACK ----------------- */
@font-face {
  font-family: "GilroyBlack";
  src: url("/fonts/Gilroy-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

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

html,
body {
  height: 100%;
  font-family: Gilroy;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0px;
}

:root {
  --heading-large: 64px;
  --heading-small: 48px;
  --subheading-large: 16px;
  --subheading-small: 14px;
  --primaryBg-gradient: linear-gradient(to bottom, #10528b, #001f39);
  --primary-color: #10528b;
  --black: #1f1e1e;
  --white: white;
  --light-gray: #ececec;
  --dark-gray: #595959;
  --padding-x: 5%;
  --padding-y: 48px;
  --shadow: 14px 14px 42px rgba(255, 255, 255, 0.03);
}

@media (min-width: 1441px) {
  :root {
    --heading-large: 72px;
    --heading-small: 56px;
    --subheading-large: 18px;
    --subheading-small: 16px;
  }
}

@media (max-width: 1024px) {
  :root {
    --heading-large: 48px;
    --heading-small: 36px;
    --subheading-large: 15px;
    --subheading-small: 13px;
  }
}

@media (max-width: 768px) {
  :root {
    --heading-large: 40px;
    --heading-small: 30px;
    --subheading-large: 14px;
    --subheading-small: 12px;
  }
}
@media (max-width: 480px) {
  :root {
    --heading-large: 32px;
    --heading-small: 32px;
    --subheading-large: 13px;
    --subheading-small: 11px;
  }
}