:root {
      --bgColor: #2a2a2a;
      --lightGreen: #b8f203;
      --textColor: #fcfcfc;
      --buttonBackground: #3a3a3a;
      --pictoBackground: #272727;
      --inputBackground: #232323;
}

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

.green {
      color: var(--lightGreen);
}

/* ----------------------------- FLEXBOX CLASSES ---------------------------- */

.flex {
      display: flex;
}
.flex-col {
      display: flex;
      flex-direction: column;
}
.space-between {
      justify-content: space-between;
}
.space-evenly {
      justify-content: space-evenly;
}
.aic {
      align-items: center;
}
.jcc {
      justify-content: center;
}
.ais {
      align-items: stretch;
}
.wrap {
      flex-wrap: wrap;
}
.g10 {
      gap: 10px;
}

/* --------------------------------- BUTTON --------------------------------- */

.buttonContainer {
      display: flex;
      align-items: center;
      background-color: var(--buttonBackground);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
}
.buttonContainer::after {
      content: '';
      width: 100%;
      height: 100%;
      background-color: var(--lightGreen);
      border-radius: 6px;
      transition: all 0.3s ease-out;
      position: absolute;
      z-index: 1;
      width: 0;
}
.plusSymbolContainer {
      background-color: var(--lightGreen);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      width: 100%;
      aspect-ratio: 1/1;
      z-index: 2;
}
.plusSymbolContainer img {
      width: 40%;
      transition: all 0.3s ease;
}
.buttonTextContainer {
      z-index: 2;
      padding: 0 10px;
      width: 100%;
}
.buttonTextContainer p {
      font-size: 15px;
}
.buttonContainer:hover {
      img {
            transform: rotate(180deg);
      }
      p {
            color: var(--buttonBackground);
      }
}
.buttonContainer:hover::after {
      width: 100%;
}

/* -------------------------------- SPACINGS -------------------------------- */

.mt10 {
      margin-top: 10px;
}
.mt25 {
      margin-top: 25px;
}
.mt50 {
      margin-top: 50px;
}
.mt100 {
      margin-top: 100px;
}
.mt200 {
      margin-top: 200px;
}
.h100 {
      height: 100%;
}
.w100 {
      width: 100%;
}
.mr10 {
      margin-right: 10px;
}

/* ------------------------------- TEXT STYLE ------------------------------- */

.text-center {
      text-align: center;
}
.text-justify {
      text-align: justify;
}
.fakeTitle {
      font-size: 25px;
      font-family: 'arizona';
      font-weight: 400;
}

/* ---------------------------- PICTOS CONTAINER ---------------------------- */
.pictoContainerMain {
      background-color: var(--pictoBackground);
      padding: 10px;
      border-radius: 7px;
}