:root {
  /* ===== Colors ===== */
  --first-color: #BBD2C5;
  --second-color: #536976;
  --third-color: #292E49;
  --dark-text-color: #181F25;
  --light-text-color: #F2F3F8;
  --main-linear-color: linear-gradient(to bottom right, rgba(187, 210, 190, 0.95) 0%, rgba(83, 105, 118, 0.95) 50%, rgba(41, 46, 73, 0.95) 100%), url("../img/pattern_hexagon.png");
  --alt-linear-color: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), linear-gradient(to bottom right, #292E49 0%, #536976 50.52%, #BBD2BE 100%);
  --white-linear-color: linear-gradient(to right, #ECECEC 0%, #FFFFFF 100%);
  --input-color: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), linear-gradient(to right, #292E49 0%, #536976 50%, #BBD2BE 100%);;

  /* ===== Font and typography ===== */
  --body-font: 'Open Sans', sans-serif;

  /* 0.5rem = 5px, 1rem = 10px ... */
  --h1-font-size: 6rem;
  --h2-font-size: 4rem;
  --h3-font-size: 2.8rem;
  --h2-subtitle-font-size: 2rem;
  --bigger-font-size: 2.2rem;
  --normal-font-size: 1.8rem;

  /* ===== Font Weight ===== */
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;
  --font-black: 800;

  /* ===== Z Index ===== */
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-fixed-plus: 500;
  --z-modal: 1000;
}

/* Responsive font size */
@media screen and (max-width: 1399px) {
  :root {
    --h1-font-size: 4rem;
    --h2-font-size: 3rem;
    --h3-font-size: 2.2rem;
  }
}

@media screen and (max-width: 1199px) {
  :root {
    --h1-font-size: 3rem;
    --h2-font-size: 2.6rem;
    --h3-font-size: 2rem;
    --h2-subtitle-font-size: 1.8rem;
    --bigger-font-size: 2rem;
    --normal-font-size: 1.6rem;
  }
}