#comicSelectionField {
  margin: auto;
  float: left;

  background-image: linear-gradient(311deg, #1800d7, #7f65bf);

  border-radius: 5px;

  height: 50vh;
  min-height: 450px;

  display: flex;
  justify-content: center;

  font-size: 20px;

  padding: 30px;
}

div.comix {
  font-size: 20px;
  margin: 10px;

  cursor: pointer;

  border: 5px solid #ccc;
  float: left;
  width: 180px;
  padding: 10px;
  border-radius: 5px;

  color: aliceblue;

  background: linear-gradient(to bottom, rgb(8, 0, 82), rgb(68, 0, 255));
}
div.comix img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}

div.comix:hover {
  animation: comicSelectionFade 0.1s ease;
  border: 5px solid rgb(154, 53, 255);
}

div.tba img {
  filter: grayscale(1)
}

@keyframes comicSelectionFade {
  0% {
    background: linear-gradient(to bottom, rgba(18, 73, 255, 0.945), rgb(69, 20, 202));
  }
  50% {
    border: 5px solid rgb(53, 51, 153);
  }
  100% {
    border: 5px solid rebeccapurple;
  }
}