body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.body-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*HEADER*/
.header-container {
  gap: 1rem;
  display: flex;
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.title-container {
  gap: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
  align-items: center;
}

.search-container {
  gap: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

nav {
  gap: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
ul {
  gap: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/*MAIN*/
.hero-img {
  display: block;
}

#app {
  text-align: center;
}

.card-container {
  gap: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  gap: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/*Overlay*/
#popup {
  display: flex;
  align-items: center;
  justify-content: center;
}


/*FOOTER*/
.footer-container {
  gap: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-info {
  gap: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.footer-container p {
  text-align: center;
}

/* TABLET horizontal */
@media (max-width: 1080px) {
  #nav-type.open {
    display: flex;
  }

  #nav-type {
    gap: 1rem;
    flex-direction: column;
  }

  #nav-type ul {
    gap: 0.75rem;
    display: flex;
    flex-direction: column;
  }
}

/* TABLET vertical */
@media (max-width: 768px) {
  .header-container {
    gap: 0.5rem;
  }
}

/* MOBILE 1 */
@media (max-width: 480px) {
  .hero-txt {
    top: 65%;
    left: 10%;
  }
}

/* MOBILE 2 */
@media (max-width: 375px) {
  .title-container {
    gap: 0.25rem;
    display: flex;
    flex-direction: row;
  }
}