/**
 * * PRIMARY COLORS 
  */
/**
 * * NEUTRAL COLORS 
  */
/*
!ok, eu sei que a font n ta funcionando, era para ser .tff, mas percebi
!isso no final do projeto e na real a outra font ficou bem mais bonitinha
*/
@font-face {
  font-family: "Fontzinha pika";
  src: url(../assets/fonts/Ubuntu-Regular.ttf);
}
@font-face {
  font-family: "Fontzinha pika Medium";
  src: url(../assets/fonts/Ubuntu-Medium.ttf);
}
@font-face {
  font-family: "Fontzinha pika Bold";
  src: url(../assets/fonts/Ubuntu-Bold.ttf);
}
#body, #html {
  width: 500px;
  font-size: 16px;
  font-family: "Fontzinha pika", "san-serif", "Helvetica Neue";
  background-color: hsl(217, 100%, 97%);
}

@media screen and (min-width: 500px) {
  #body, #html {
    width: 100%;
  }
}
@media screen and (min-width: 1000px) {
  #body, #html {
    width: 100%;
    height: 100%;
    display: grid;
  }
  .App {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: fit-content;
  }
}
header {
  width: 100%;
  height: 140px;
  background-image: url(../assets/images/bg-sidebar-mobile.svg) !important;
  background-size: cover;
}

header .pagination-container {
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: center;
  padding: 20px;
  font-family: "Fontzinha pika Medium", "san-serif", "Helvetica Neue";
}

header .pagination-container-txt {
  display: none;
}

header div div {
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 1px solid hsl(206, 94%, 87%);
  margin: 5px;
  color: hsl(0, 0%, 100%);
}

.active {
  color: #000000;
  background-color: hsl(206, 94%, 87%);
}

@media screen and (min-width: 1000px) {
  header {
    width: 250px;
    height: 500px;
    background-image: url(../assets/images/bg-sidebar-desktop.svg) !important;
    border-radius: 5px 0 0 5px;
    display: flex;
    flex-direction: row;
    text-align: start;
    align-items: flex-start;
  }
  header .pagination-container {
    width: 200px;
    display: flex;
    flex-direction: column;
    text-align: right;
    justify-content: center;
    padding: 20px;
    font-family: "Fontzinha pika Medium", "san-serif", "Helvetica Neue";
    margin-top: 25px;
  }
  header .pagination-container-txt {
    width: 200px;
    display: flex;
    flex-direction: column;
    text-align: right;
    justify-content: center;
    padding: 20px;
    font-family: "Fontzinha pika Medium", "san-serif", "Helvetica Neue";
    margin-top: 25px;
  }
  header div.step-div {
    display: flex;
    flex-direction: column;
    width: 100px;
    font-size: 12px;
    border: 0 solid transparent !important;
    text-align: start;
    margin-left: -60px;
  }
  header div.step-div p {
    margin: 0;
    font-family: "Fontzinha pika Medium", "san-serif", "Helvetica Neue";
  }
  header div.step-div p.step-pagination {
    font-size: 10px;
    color: hsl(229, 24%, 87%);
    font-family: "Fontzinha pika Bold", "san-serif", "Helvetica Neue";
  }
  header div div {
    width: 32px;
    height: 32px;
    align-items: center;
    margin: 15px;
  }
}

/*# sourceMappingURL=Background.css.map */