body {
  height: 100vh;
  width: 100vw;
  cursor: url(./img/iron-man.png), auto;
}

label:hover {
  cursor: url(./img/iron-man.png), auto;
}

button:hover {
  cursor: url(./img/hammer.png), auto;
}

input:hover {
  cursor: url(./img/avengers.png), auto;
}

/* affects the background at the top of the webpage */
.title {
  display: flex;
  justify-content: center;
  background-color: rgb(53, 51, 51);
  font-weight: bolder;
}
/* targets the top name of the webpage */
#top-name {
  font-family: Roboto, Trebuchet MS, Helvetica, Arial, sans-serif;
  font-weight: bolder;
  color: white;
  background-color: red;
  font-size: 40px;
  padding: 0px 5px;
  margin-bottom: 0px;
}
/* puts the items into a column for the search bar */
.movie-search-bar {
  display: flex;
  flex-direction: column;
}
/* targets the plot,actors, and ratings that are generate */
.movie-summaries {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px;
  border: 10px solid rgb(0, 0, 0);
  border-radius: 40px;
  color: white;
}

.movie-details {
  padding-top: 50px;
  text-decoration: none;
  display: none;
}

/* targets the styling for the movie button */
#movie-button {
  border-radius: 40px;
  color: black;
  background: linear-gradient(
    90deg,
    rgb(3, 254, 66) 0%,
    rgb(13, 223, 160) 100%
  );
}

#search-movie-button,
#searched-character-button {
  display: flex;
  justify-content: center;
  color: black;
  border-radius: 20px;
  cursor: url(./img/avengers.png), auto;
}

#bottom-portion {
  background: url(./img/Marvel-Pic.jpg);
}

#movie-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0px !important;
}

/* targets the movie search section container */
#search-bar-color {
  opacity: 0.88;
  width: 265px;
  border-radius: 20px;
  background: url(./img/Marvel-Background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 0px !important;
  text-align: center;
}

.full-card {
  width: 100%;
  color: black;
  font-size: 24px;
}

/* targets the button for the character search section */
#character-search-button {
  color: rgb(0, 0, 0);
  border-radius: 40px;
  background: linear-gradient(
    90deg,
    rgb(248, 255, 32) 0%,
    rgba(196, 167, 5, 0.871) 100%
  );
}

/* this targets the character search bar container */
#character-search-color {
  opacity: 0.88;
  align-items: start;
  border-radius: 20px;
  background: url(./img/OIP4.jpg);
  /* height: 50rem; */
  width: 265px;
}
/* this also targets the top card section */
.cell .custom-cell {
  max-width: 200px !important;
  min-height: 400px !important;
  margin-bottom: 15px;
}

/* targets the movie cards and gives them an outline */
.custom-card {
  width: 100%;
  height: 100%;
  outline: 5px solid white;
}
/* targets the space from the top of the movie section */
.pt15 {
  padding-top: 50px !important;
}
/* targets the movie search card */
.movie-cards {
  background: linear-gradient(
    90deg,
    rgb(217, 81, 81) 0%,
    rgba(28, 51, 201, 0.871) 100%
  );
  border-radius: 30px;
  text-align: center;
  color: white;
}
/* targets the search section card for characters */
.character-cards {
  background: linear-gradient(
    90deg,
    rgb(19, 1, 97) 0%,
    rgba(123, 139, 249, 0.871) 100%
  );
  border-radius: 30px;
  text-align: center;
  color: white;
  border-radius: 15px 50px 30px 5px;
}

#character-poster {
  display: flex;
  justify-content: space-evenly;
  margin-top: 50px;
}

#char-poster {
  height: 400px;
}

#char-poster:hover {
  box-shadow: 20px 20px 20px rgba(255, 0, 0, 0.779);
  transform: scale(1.1);
  cursor: url(./img/infinity-gauntlet.png), auto;
}

/* targets the top card section and is allowing them to be centered */
.movie-searching {
  display: flex;
  justify-content: center;
}
/* targets the bottom cards */
.character-cell {
  max-width: 200px !important;
  min-height: 500px !important;
  margin-bottom: 15px;
}

h4 {
  height: 150px;
}

/* targets each card giving them an outline and a height and width */
.character-card {
  width: 100%;
  height: 100%;
  outline: 5px solid rgb(255, 0, 0);
}

.character-card:hover {
  box-shadow: 20px 20px 20px rgba(255, 0, 0, 0.779);
  transform: scale(1.1);
}
/* affects the padding between the two cards by targeting the bottom card section */
.pt16 {
  padding-top: 15px !important;
}
/* targets the whole container to be used as a background */
.background-image-container {
  background: url(./img/mcu.jpg);
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* targets the bottom cards */
.card-section {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

/* targets the movies and allows them to get a box shadow and grow in size once hovered over */
#movie-poster:hover {
  cursor: pointer;
  box-shadow: 20px 20px 20px rgba(255, 0, 0, 0.779);
  transform: scale(1.06);
  cursor: url(./img/infinity-gauntlet.png), auto;
}
/* this targets the movie section that pops up after being clicked or searched */
#movie-back {
  opacity: 0.9;
  background: linear-gradient(
    90deg,
    rgb(169, 40, 28) 0%,
    rgba(41, 52, 175, 0.871) 100%
  );
  color: white;
  border: 10px solid black;
}

.list-items {
  list-style: none;
}

#searched-movie,
#searched-character {
  margin-top: 10px;
}

.custom-button {
  background: white !important;
  width: 100%;
}

@media screen and (max-width: 1740px) {
  .background-image-container {
    display: grid;
    font-size: 20px;
  }
  .character-container {
    display: flex;
    justify-content: center;
  }
  #movie-back {
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 40rem;
    overflow-x: auto;
  }
  .search-container {
    margin: 1rem 0;
    display: flex;
    justify-content: center;
  }
  .character-search-container {
    display: flex;
    justify-content: center;
  }
  #character-search-color {
    margin-top: 1rem;
    /* height: 13rem; */
    padding: 2rem;
  }
}