/* IMPORT FONTES */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* REFERÊNCIAS PARA MEDIA QUERIES */
/*
Mobile maior -- max-width: 600px
Tablet retrato -- min-width: 601px
Tablet paisagem e Desktop -- min-width: 900px
*/

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

/* ESTILIZAÇÃO GLOBAL */
html {
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
}

body {
  background-color: #f4f4f4;
}

button, input {
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 1.2rem;
  outline: none;
  cursor: pointer;
}

a {
  text-decoration: none;
}

.hidden {
  display: none;
}

.page-main {
  max-width: 100vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0.5rem;
  padding-bottom: 3rem;
  overflow: auto;
}

@media (min-width: 601px) {
  .page-main {
    margin: 0 auto;
  }
}

@media (min-width: 900px) {
  .page-main {
    max-width: 75vw;
  }
}

/* PÁGINA HOME */
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem 0;
}

.logo {
  max-width: 45vw;
  height: auto;
  margin-bottom: 1rem;
}

.search-input {
  width: 65vw;
  background: url(./img/search-icon.png) no-repeat 0.5rem 0.3rem #fff;
  border-radius: 3rem;
  border: solid 0.15rem #393859;
  padding: 0.3rem 0.5rem;
  padding-left: 2rem;
  font-size: 1rem;
}

.navbar {
  margin: 1.5rem 0;
  cursor: pointer;
}

.nav-item {
  background-size: 100% 190%;
  padding: 0.7rem 0;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.3rem;
  color: #fff;
  background-color: #393859;
}

.nav-item-movies {
  background-image: linear-gradient(to top, #393859, #4BBF9E);
}

.nav-item-series {
  background-image: linear-gradient(to top, #393859, #684BBF);
}

.nav-item-selected {
  background-size: 100% 110%;
  background-image: linear-gradient(to bottom, #393859, #1E1D30);
}

.msg-home {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.msg-home-text {
  margin-top: 1rem;
  width: 14rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  color: #393859;
}

.emoji-home {
  width: auto;
  height: 4rem;
}

@media(min-width: 601px) {
  .logo {
    margin-top: 1rem;
    max-width: 13rem;
  }

  .search-input {
    max-width: 20rem;
  }

  .navbar {
    display: flex;
    justify-content: center;
  }

  .nav-item {
    width: 16rem;
    padding: 1rem 0;
  }

  .nav-item-movies {
    border-radius: 3rem 0 0 3rem;
  }

  .nav-item-series {
    border-radius: 0 3rem 3rem 0;
  }

  .msg-home {
    margin-top: 5rem;
  }
}

/* GÊNEROS */
.section-genres {
  margin: 0 auto;
}

.genre-btn {
  display: flex;
  justify-content: center;
  width: 15rem;
  margin-bottom: 2rem;
  padding: 0.4rem;
  border: none;
  border-radius: 3rem;
  font-size: 1.2rem;
  box-shadow: 3px 3px 8px -3px rgba(0,0,0,0.42);
}

.genre-btn-light {
  color: #393859;
}

.genre-btn-dark {
  font-weight: 400;
  color: #fff;
}

.genre-action-movie { background-color: hsl(163, 48%, 76%) }
.genre-adventure-movie { background-color: hsl(163, 48%, 70%) }
.genre-animation-movie { background-color: hsl(163, 48%, 64%) }
.genre-romance-movie { background-color: hsl(163, 48%, 58%) }
.genre-comedy-movie { background-color: hsl(163, 48%, 52%) }
.genre-drama-movie { background-color: hsl(163, 48%, 46%) }
.genre-doc-movie { background-color: hsl(163, 48%, 40%) }
.genre-kids-movie { background-color: hsl(163, 48%, 32%) }
.genre-sci-fi-movie { background-color: hsl(163, 48%, 26%) }
.genre-horror-movie { background-color: hsl(163, 48%, 20%) }

.genre-action-series { background-color: hsl(255, 48%, 84%) }
.genre-adventure-series { background-color: hsl(255, 48%, 74%) }
.genre-animation-series { background-color: hsl(255, 48%, 70%) }
.genre-romance-series { background-color: hsl(255, 48%, 66%) }
.genre-comedy-series { background-color: hsl(255, 48%, 60%) }
.genre-drama-series { background-color: hsl(255, 48%, 54%) }
.genre-doc-series { background-color: hsl(255, 48%, 48%) }
.genre-kids-series { background-color: hsl(255, 48%, 40%) }
.genre-sci-fi-series { background-color: hsl(255, 48%, 34%) }
.genre-horror-series { background-color: hsl(255, 48%, 28%) }

.genre-emoji {
  width: 1.4rem;
  height: auto;
}

.no-titles-msg {
  width: 14rem;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  color: #393859;
}

@media(min-width: 601px) {
  .section-genres {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .genre-btn {
    margin: 1.2rem 0.8rem;
    margin-bottom: 0;
  }
}

/* CARD DOS TÍTULOS */
.card-title {
  max-width: 14rem;
  height: auto;
  margin: 1rem;
  display: flex;
  flex-direction: column;
}

.card-poster {
  width: 14rem;
  height: 21.12rem;
  object-fit: cover;
  border-radius: 0.5rem 0.5rem 0 0;
  border: solid 1px #c4c4c4;
  border-bottom: none;
}

.availability-wrap {
  height: 3.2rem;
  display: flex;
  justify-content: space-evenly;
  padding: 0.3rem;
  background-color: #393859;
  border-radius: 0 0 0.5rem 0.5rem;
  border: solid 1px #c4c4c4;
  border-top: none;
}

.provider-img {
  height: 2.5rem;
  width: auto;
  border-radius: 0.3rem;
}

.unavailable-title {
  align-self: center;
  margin: auto 0;
  font-size: 0.8rem;
  color: #F2B705;
}

/*MODAL DOS TÍTULOS */
.modal-cards {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-poster {
  width: 6.2rem;
  height: auto;
  border-radius: 0.5rem;
  border: solid 1px #c4c4c4;
}

.modal-title {
  margin: 0.5rem 0;
  font-size: 1.3rem;
  font-weight: bold;
}

.modal-overview {
  font-size: 0.9rem;
  text-align: left;
  line-height: 1.2rem;
}

/* ABOUT US  */
.modal {
  width: 90vw;
  height: fit-content;
  border: solid 0.2rem #F2B705;
  margin: 2rem auto;
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  box-shadow: 0 0 2em #3C3B37;
  background-color: #f4f4f4;
  text-align: center;
  color: #393859;
}

.about-text {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.text-important {
  font-weight: bold;
}

.devs-profile-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.link-dev {
  margin: 0.5rem;
}

.photo-dev { 
  width: 3.8rem;
  border-radius: 50%;
  border: 3px solid #393859;
  margin-bottom: 0.1rem
}

.name-dev {
  font-size: 0.7rem;
  font-weight: bold;
  color: #393859;
  text-transform: uppercase;
}

body .itemActive {
  display: flex;
  overflow: scroll;
}

.modal-about{
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-tmdb-text {
  font-size: 0.6rem;
  font-weight: bold;
  color: #393859a3;
  text-transform: uppercase;
  margin: 1rem 0;

}

.modal-tmdb-logo {
  width: 85px;
}

.btn-close {
  margin-top: 1rem;
  padding: 0.4rem 1.3rem;
  background-color: #F2B705;
  text-align: center;
  color: #393859;
  cursor: pointer;
  border: none;
  border-radius: 3rem;
  font-size: 1.2rem;
  box-shadow: 3px 3px 8px -3px rgba(0,0,0,0.42);
}

@media (min-width: 601px) {
  .modal {
    max-width: 30rem;
    padding: 2rem;
  }

  body .itemActive {
    overflow: auto;
  }

  .about-text {
    margin-bottom: 1rem;
  }
}

/* RODAPÉ */
.footer-about {
  position: fixed;
  width: 100%;
  bottom: 0;
  cursor: pointer;
}

.footer-text {
  background-color: #1E1D30;
  padding: 0.3rem;
  font-size: 0.7rem;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}

@media (min-width: 601px) {
  .footer-text {
    padding: 0.6rem 0;
  }
}