/* ! -----------------------------RESET----------------------------- */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  border: 0;
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

img {
  width: inherit;
}

/* ! -----------------------------FONTS----------------------------- */

@font-face {
  font-family: 'Gotham';
  src:
    local('gotham_rounded_light'),
    url(../fonts/Gotham-Rounded-Light.otf) format('opentype');
}

.gotham-1 {
  font-family: 'Gotham', Arial, Helvetica, sans-serif;
}

@font-face {
  font-family: 'Gotham Bold';
  src:
    local('gotham_bold'),
    url(../fonts/Gotham-Bold.otf) format('opentype');
}

.gotham-2 {
  font-family: 'Gotham Bold', Arial, Helvetica, sans-serif;
}

@font-face {
  font-family: 'hel-1';
  src: local('hel-1'), url(../fonts/hel-1.ttf) format('truetype');
}

.hel-1 {
  font-family: 'hel-1', Arial, Helvetica, sans-serif;
}

@font-face {
  font-family: 'hel-2';
  src: local('hel-2'), url(../fonts/hel-2.ttf) format('opentype');
}

.hel-2 {
  font-family: 'hel-2', Arial, Helvetica, sans-serif;
}

@font-face {
  font-family: 'hel-3';
  src: local('hel-3'), url(../fonts/hel-3.ttf) format('opentype');
}

.hel-3 {
  font-family: 'hel-3', Arial, Helvetica, sans-serif;
}

@font-face {
  /* ! NOT BEAUTIFULL */
  font-family: 'hel-4';
  src: local('hel-4'), url(../fonts/hel-4.ttf) format('opentype');
}

.hel-4 {
  font-family: 'hel-4', Arial, Helvetica, sans-serif;
}

@font-face {
  font-family: 'hel-5';
  src: local('hel-5'), url(../fonts/hel-5.ttf) format('opentype');
}

.hel-5 {
  font-family: 'hel-5', Arial, Helvetica, sans-serif;
}

/* ! -----------------------------COLORS----------------------------- */

/* that red */
.text-red {
  color: #d35266;
}

.bg-red {
  background-color: #d35266;
}

/* that grey */
.text-gray {
  color: #888;
}

.bg-gray {
  background-color: #888;
}

/* that black */
.text-black {
  color: #383838;
}

.bg-black {
  background-color: #383838;
}

/* that white */
.text-white {
  color: white;
}

.bg-white-transparent {
  background-color: rgba(255, 255, 255, 0.8);
}

/* ! -----------------------------BASIC Commands----------------------------- */

.border {
  border: 1px solid;
}

.border-b {
  border-bottom: 1px solid;
}

.border-t {
  border-top: 1px solid;
}

.border-l {
  border-left: 1px solid;
}

.border-r {
  border-right: 1px solid;
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-inline {
  display: inline;
}

.d-flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.direct-row {
  flex-direction: row;
}

.direct-col {
  flex-direction: column;
}

.jcc {
  justify-content: center;
}

.jcfs {
  justify-content: flex-start;
}

.jcsb {
  justify-content: space-between;
}

.jcsa {
  justify-content: space-around;
}

.jcse {
  justify-content: space-evenly;
}

.aic {
  align-items: center;
}

.aifs {
  align-items: flex-start;
}

.d-grid {
  display: grid;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-100 {
  width: 100%;
}

.h-40 {
  height: 40%;
}

.h-60 {
  height: 60%;
}

.h-100 {
  height: 100%;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 1rem;
}

.p-4 {
  padding: 2rem;
}

.p-5 {
  padding: 3rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-3 {
  padding-right: 1rem;
}

.pr-4 {
  padding-right: 2rem;
}

.pr-5 {
  padding-right: 3rem;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-3 {
  padding-left: 1rem;
}

.pl-4 {
  padding-left: 2rem;
}

.pl-5 {
  padding-left: 3rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 1rem;
}

.pt-4 {
  padding-top: 2rem;
}

.pt-5 {
  padding-top: 3rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 1rem;
}

.pb-4 {
  padding-bottom: 2rem;
}

.pb-5 {
  padding-bottom: 3rem;
}

.m-1 {
  margin: 0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-3 {
  margin: 1rem;
}

.m-4 {
  margin: 2rem;
}

.m-5 {
  margin: 3rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 1rem;
}

.mr-4 {
  margin-right: 2rem;
}

.mr-5 {
  margin-right: 3rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 1rem;
}

.ml-4 {
  margin-left: 2rem;
}

.ml-5 {
  margin-left: 3rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 2rem;
}

.mt-5 {
  margin-top: 3rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

.mb-5 {
  margin-bottom: 3rem;
}

.text-center {
  text-align: center;
}

.a-match {
  height: 100%;
  display: block;
}

.img-match {
  width: 100%;
  height: inherit;
}