body {
  background-image: url("../images/evilspiderman\ .jpeg");
  background-size: contain;
  background-color: rgb(10, 10, 10);
  text-align: center;
  background-repeat: no-repeat;
}

img {
  width: 100%;
  height: auto;
}
.images-heros {
  padding: 200px, 200px, 200px, 200px;
  text-align: center;
}

h1::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 6em;
  width: 100%;
  height: calc(var(--heading-height) + 10em);
  z-index: -1;
  transform: skewY(-3.5deg);
}

h1 {
  font-size: calc(2.8em + 2.6vw);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 10rem 0 0 4.5rem;
  text-shadow: 0.1em 0.1em 0.1em rgb(9, 217, 245);
  color: #fff;
}

#hero-name {
  border: 6px double black;
  height: 60px;
  border-radius: 2px, 2px, 2px, 2px;
  font-family: sans-serif;
  font-size: 20px;
  background-color: rgb(187, 0, 0);
}

.flex-container {
  text-align: left;
  color: whitesmoke;
  font-size: 15px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.button {
  width: 300px;
  height: 80px;
  border: none;
  outline: none;
  color: red;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.button:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

.button:active {
  color: #000;
}

.button:active:after {
  background: transparent;
}

.button:hover:before {
  opacity: 1;
}

.button:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.sub-heading {
  color: purple;
  font-size: 22px;
  font-family: Georgia, "Times New Roman", Times, serif;
}
.cards {
  padding: 5px;
  border: 2px solid rgb(47, 231, 255);
  display: flex;
  display: inline-block;
  margin-bottom: 3px;
}

@media only screen and (min-width: 280px) {
  h1 {
    position: relative;
    right: 50px;
    bottom: 30px;
    padding-top: 20px;
  }
  .flex-container {
    font-size: 16px;
  }
  .button {
    width: 200px;
  }
}
@media only screen and (min-width: 360px) {
  h1 {
    position: relative;
    right: 30px;
    bottom: 30px;
    padding-top: 20px;
  }
  .flex-container {
    font-size: 20px;
  }
}

@media only screen and (min-width: 375px) {
  h1 {
    position: relative;
    right: 25px;
    padding-top: 20px;
  }

  .box-description {
    font-size: 18px;
  }
}

@media only screen and (min-width: 320px) {
  h1 {
    position: relative;
    right: 35px;
    padding-top: 30px;
  }
  .flex-container {
    font-size: 18px;
  }
}

@media only screen and (min-width: 768px) {
  body {
    background-image: url("../images/evilspiderman\ .jpeg");
    background-size: contain;
    margin: 40px;
  }

  .box-description {
    display: flex;
    flex-wrap: wrap;
  }

  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 30px;
  }
  .cards {
    width: 45%;
  }
}

@media only screen and (min-width: 1024px) {
  body {
    background-image: url("../images/evilspiderman\ .jpeg");
    background-size: cover;
  }
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .cards {
    width: 24%;
  }
}

@media only screen and (min-width: 1440px) {
  body {
    background-image: url("../images/evilspiderman\ .jpeg");
    background-size: cover;
  }
  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }
  .cards {
    width: 20%;
  }
}