:root {
  --font-family: "Helvetica Neue", sans-serif;
  --second-family: "Gilroy", sans-serif;
  --font-main: var(--font-family);
  --font-accent: var(--second-family);
  --text-color: #fff;
  --page-bg: #010101;
  --main-yellow: #fed500;
  --input-bg: #121212;
  --caret-color: var(--main-yellow);

  --container-width: 100%;
  --container-padding: 20px;
}

@media (max-width: 767px) {
  :root {
    --container-width: 100%;
    --container-padding: 20px;
    --big-container-padding: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --container-width: 100%;
    --container-padding: 20px;
    --big-container-padding: 20px;
  }
}

@media (min-width: 1280px) and (max-width: 1919px) {
  :root {
    --container-width: 1036px;
    --big-container-width: 1242px;
    --container-padding: 20px;
    --big-container-padding: 135px;
    /* --container-padding: 238px; */
  }
}

@media (min-width: 1920px) {
  :root {
    --container-width: 1512px;
    --big-container-width: 1512px;
    --container-padding: 238px;
    --big-container-padding: 192px;
  }
}