/* Fonts Import */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@400;500&display=swap");

:root {
  /* Base colors */
  --c12: #000000;
  --c11: #121212;
  --c10: #2e2e2e;
  --c09: #404040;
  --c08: #595959;
  --c07: #707070;
  --c06: #9c9c9c;
  --c05: #b3b3b3;
  --c04: #cccccc;
  --c03: #dedede;
  --c02: #ededed;
  --c01: #f7f7f7;
  --w: #ffffff;

  /* Primary Colors */
  --p05: #002147;
  --p04: #0b3f5e;
  --p03: #185375;
  --p02: #2f7197;
  --p01: #4892bc;

  /* Functional Colors */
  --v05: #841111;
  --v04: #a62f2f;
  --v03: #c65454;
  --v02: #e08080;
  --v01: #ffc9c9;

  --d05: #11841c;
  --d04: #2fa63b;
  --d03: #54c65f;
  --d02: #80e08a;
  --d01: #c9ffce;

  /* Gradients */
  --gdr01: linear-gradient(180deg, #4892bc 0%, #1f668d 100%);

  /* Shadows */

  --shadow01: 0px 1px 2px rgba(0, 0, 0, 0.1);

  /* Font styles */
  --poppins-xxl: 600 4rem/4.5rem "Poppins", sans-serif; /* 64/76 */
  --poppins-xl: 600 2rem/2.5rem "Poppins", sans-serif; /* 32/40 */
  --poppins-l: 400 1.5rem/2.25rem "Poppins", sans-serif; /* 24/36 */
  --poppins-m: 500 1.125rem/1.5rem "Poppins", sans-serif; /* 18/24 */
  --poppins-m-b: 600 1.125rem/1.5rem "Poppins", sans-serif; /* 18/24 */
  --poppins-s: 400 1rem/1.5rem "Poppins", sans-serif; /* 16/24 */
  --poppins-xs: 600 0.75rem/1rem "Poppins", sans-serif; /* 12/16 */

  --roboto-l: 400 1.5rem/2.25rem "Roboto", sans-serif; /* 24/36 */
  --roboto-l-b: 500 1.5rem/2.25rem "Roboto", sans-serif; /* 24/36 Use this font in ALL CAPS and with letter-spacing in 1.5% */
  --roboto-m: 500 1.125rem/1.5rem "Roboto", sans-serif; /* 18/24 */
  --roboto-s: 400 1rem/1.5rem "Roboto", sans-serif; /* 16/24 */
  --roboto-xs: 400 0.875rem/1.25rem "Roboto", sans-serif; /* 14/20 */
}

/* Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

.anime-left {
  opacity: 0;
  transform: translateX(-20px);
  animation: animeLeft 0.3s forwards;
}

.anime-down {
  opacity: 0;
  transform: translateY(-20px);
  animation: animeDown 0.3s forwards;
}

.anime-spin {
  animation: spin 1.8s infinite linear;
}

/* Keyframes */

@keyframes scale {
  from {
    transform: scale(0.7);
  }
  to {
    transform: scale(1);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate-reverse {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes animeLeft {
  to {
    opacity: 1;
    transform: initial;
  }
}

@keyframes animeDown {
  to {
    opacity: 1;
    transform: initial;
  }
}