@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

/* GLOBAL */
*{
  padding: 0;
  margin: 0;
}

html{
  scroll-behavior: smooth;
}

body{
  font-family: 'Bangers', cursive;
  background: white;
}

button{
  color: black;
  background-color: lightgray;
  width: 140px;
  cursor: pointer;
  padding: 8px;
  outline: none;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border: none;
  transition: 1s;
  font-family: inherit;
}

button:hover{
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

input{
  font-family: inherit;
  padding: 8px;
  width: 250px;
  outline: none;
  border: none;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.main-container{
  width: 1366px;
  margin: auto;
}

.sub-container{
  width: 85%;
  margin: auto;
}

.image{
  width: 450px;
  height: auto;
  background-position: 50% 50%;
  background-size: cover;
}

.image img{
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.9);
}

.instructions{
  color: whitesmoke;
  width: 450px;
  min-height: 180px;
  background-position: 50% 50%;
  background-size: cover;
  text-shadow: 2px 2px black;
}

/* NAV BAR */

#header{
  background-color: black;
  min-height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.branding h1{
  color: red;
  font-family: 'marvelregular';
  font-size: 4rem;
}

.nav-menu{
  color: white;
  display: flex;
  gap: 60px;
}

.nav-menu a{
  color: white;
  text-decoration: none;
}

.nav-menu li{
  list-style: none;
}

/* COMIC DETAILS */

.details{
  width: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  color: white;
  text-shadow: 2px 2px black;
}

/* SHOWCASE */

.showcase{
  width: 100%;
  min-height: 500px;
  background-position: 50% 40%;
  background-size: cover;
  transition: 0.3s ease-out;
}

.showcase h1{
  font-size: 3rem;
}

.overlay{
  width: 100%;
  min-height: 500px;
  background-image: linear-gradient(0.50turn, transparent, black, transparent);
}

.title{
  text-shadow: 2px 2px black;
  font-size: 1.4rem;
  width: 70%;
  min-height: 500px;
  margin: auto;
  text-align: center;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.title h1{
  font-size: 5rem;
}

#search-characters,
#search-comics,
#search-description{
  min-height: 300px;
  background-position: 50% 50%;
  background-size: cover;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6),black), url('img6.jpg');
  display: flex;
  justify-content: center;
  align-items: center;
}

#search-comics{
  background-image: linear-gradient(rgba(0, 0, 0, 0.6),black), url('img8.png');
}

#search-description{
  background-image: linear-gradient(rgba(0, 0, 0, 0.6),black), url('img9.jpg');
}

.search-characters,
.search-comics,
.search-description{
  width: 100%;
  margin: auto;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  background-image: linear-gradient(0.25turn, transparent, rgb(187, 176, 25), transparent);
}

.search-comics{
  background-image: linear-gradient(0.25turn, transparent, rgb(187, 25, 25), transparent);
}

.search-description{
  background-image: linear-gradient(0.25turn, transparent, rgb(25, 149, 187), transparent);
}

#characters,
#comics,
#description{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  background-position: center;
  background-size: cover;
  background-repeat: repeat;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6),black), url('comicss.jpg');
}

#comics{
  background-image: linear-gradient(rgba(0, 0, 0, 0.6),black), url('img7.jpg');
}

#description{
  background-image: linear-gradient(rgba(0, 0, 0, 0.6),black), url('img10.jpg');
}

.characters,
.comics,
.description {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-position: center;
  background-size: cover;
  background-repeat: repeat;
}

.description{
  justify-content: space-evenly;
}

.description-details{
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 500px;
  color: white;
}

/* ZOOM OUT EFFECT  */

.character, .comic{
  overflow: hidden;
  position: relative;
  cursor: pointer;
  width: 300px;
  height: 450px;
  margin: 5px 0;
  transition: 0.3s ease-out;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.9);
}

/* DYNAMIC POSITIONING OF IMAGES */
.img-0{
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: all 1s;
}

.img-1,
.img-2,
.img-3,
.img-4,
.img-5,
.img-6{
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: all 1s;
  background-image: linear-gradient(to bottom, transparent 55%, black), url('http://i.annihil.us/u/prod/marvel/i/mg/6/60/5261a80a67e7d/portrait_uncanny.jpg');
}

.img-2{
  background-image: linear-gradient(to bottom, transparent 55%, black), url('http://i.annihil.us/u/prod/marvel/i/mg/6/40/5274137e3e2cd/portrait_uncanny.jpg');
}

.img-3{
  background-image: linear-gradient(to bottom, transparent 55%, black), url('http://i.annihil.us/u/prod/marvel/i/mg/3/60/53176bb096d17/portrait_uncanny.jpg');
}

.img-4{
  background-image: linear-gradient(to bottom, transparent 55%, black), url('http://i.annihil.us/u/prod/marvel/i/mg/6/80/60a572439d4ee/portrait_uncanny.jpg');
}

.img-5{
  background-image: linear-gradient(to bottom, transparent 55%, black), url('http://i.annihil.us/u/prod/marvel/i/mg/3/f0/5d2c926187c93/portrait_uncanny.jpg');
}

.img-6{
  background-image: linear-gradient(to bottom, transparent 55%, black), url('http://i.annihil.us/u/prod/marvel/i/mg/f/a0/5f2d6cceb2e77/portrait_uncanny.jpg');
}

.img-1:hover, .img-2:hover, .img-3:hover, .img-4:hover, .img-5:hover, .img-6:hover{
  transform: scale(1.1);
}

.footer{
  color: white;
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

@media(max-width:1366px){
  .main-container{
    width: 100%;
  }
}

@media(max-width:1100px){
  .characters,
  .comics{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
  }

  .search-characters,
  .search-comics,
  .search-description {
    padding: 20px 0;
    justify-content: center;
  }

  .search-comics{
    flex-wrap: wrap-reverse;
  }
}

@media(max-width:768px){
  .title h1 {
    font-size: 3.5rem;
  }
  .nav {
    padding: 20px 0;
    flex-direction: column;
  }

  .sub-container{
    width: 95%;
  }

  .branding{
    padding-left: 0px;
    margin: auto;
    text-align: center;
  }

  .title{
    width: 95%;
  }

  .image{
    width: 100%;
  }

  .instructions{
    width: 95%;
    text-align: center;
  }

  .character{
    width: 75%;
  }

  .comic{
    width: 75%;
  }

  .isbn{
    width: 75%;
  }

  button{
    width: 30%;
  }

  input{
    width: 65%;
  }

  .description-details{
    margin-top: 10px;
    text-align: center;
  }
}


@media(max-width:480px){
  .showcase h1{
    font-size: 2rem;
  }
  
  .title{
    font-size: 1rem;
  }
  input{
    width: 60%;
  }

  .character{
    width: 100%;
  }

  .comic{
    width: 100%;
  }

  .isbn{
    width: 100%;
  }
}