/*
==============================
Variables
==============================
*/

:root {
  --orange: #E39B42;
  --grey: #e7e7e7;
  --black: #171717;
  --white: #fff;
  --lightGrey: #f7f7f7;
  --brown: #222;
  --lightOrange: #f9ece1;
  
}

/*
==============================
Colors
==============================
*/

.color-white {
  color: #fff;
}
.color-black {
  color: #171717;
}
.color-black-50 {
  color: rgba(23,23,23,0.5);
}
.color-black-25 {
  color: rgba(23,23,23,0.25);
}
.color-black-10 {
  color: rgba(23,23,23,0.1);
}
.color-grey {
  color: #e7e7e7;
}
.color-light-grey {
  color: #f7f7f7;
}
.color-orange {
  color: #E39B42;
}
.color-error-red {
  color: #EB5D55;
}
.color-red {
  color: #EB5D55;
}


/*
==============================
Background Colors
==============================
*/

.bg-white {
  background-color: #fff;
}
.bg-black {
  background-color: #171717;
}
.bg-brown {
  background-color: #222;
}
.bg-grey {
  background-color: #e7e7e7;
}
.bg-light-grey {
  background-color: #f7f7f7;
}
.bg-red {
  background-color: #EB5D55;
}
.bg-orange {
  background-color: #E39B42;
}
.bg-light-orange {
  background-color: #f9ece1;
}

/*
==============================
Border Colors
==============================
*/

.border-white {
  border-color: #fff;
}
.border-black {
  border-color: #171717;
}
.border-grey {
  border-color: #e7e7e7;
}
.border-light-grey {
  border-color: #f5f5f5;
}
.border-red {
  border-color: #EB5D55;
}
.border-orange {
  border-color: #E39B42;
}


.main-gradient {
  background-image: linear-gradient(to bottom right, #9EBA5F, #42A9B7);
}