:root {

  /* default primary color */
  --cool-color: #ff1405;
  --success-color: #089a38;

  --text-color: #000;
  --body-bg-color: #fff;
  --box-bg-color: #fff;
  --border-color: #000;
  --border-width: 6px;

  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;

  --wrapper-max-width: 1500px;
  --box-padding: 3rem;

  --arrow-start-position: 45%;
  --arrow-border-width: 30px;

}

@media (prefers-color-scheme: dark) {

  :root {
    --text-color: #f9f9f9;
    --body-bg-color: #1e1d1d;
    --box-bg-color: #1e1d1d;
    --border-color: #454545;
    /* --border-color: var(--text-color); */
  }

  .icon img {
    filter: invert(1);
  }

}

@media screen and (max-width: 1024px) {

  :root {
    --box-padding: 1.6rem;
  }

}

@media screen and (max-width: 700px) {

  :root {
    --box-padding: 1.2rem;
  }

}