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

body {
  background-color: black;
}

nav {
  /* border: 3px solid red; */
  width: 100%;
  height: 20%;
  padding: 0.5% 1%;
  background-color: #1f1e1e;
  text-align: right;
  color: whitesmoke;
}

nav img {
  scale: 1.25;
}

#hero {
  /* border: 3px solid yellow; */
  width: 100%;
  height: 50svh;
  background-color: black;
  background-image: url(./imgs/invincible-vs-3840x2160-23219.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  animation: changebgimg 15s infinite;
}

#hero p {
  text-align: center;
  color: antiquewhite;
  text-decoration: underline overline beige;
  text-shadow: grey;
}

#hero button {
  width: 7%;
  margin: 1% 0;
  border-style: none;
  border-radius: 5%;
  font-weight: bold;
  animation: glow 1s ease-in-out infinite alternate;
  transition: all 1s ease-in-out;
}

#hero button:hover {
  scale: 1.25;
}

main {
  /* border: 3px solid brown; */
  height: 285px;
}

#card-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: center;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.item-card {
  /* border: 3px solid green; */
  width: 50%;
  height: 80%;
  border-radius: 100%;
}

.item-card img {
  width: 100%;
  height: 100%;
}

footer {
  /* border: 3px solid blue; */
  text-align: center;
  color: whitesmoke;
  font-size: 0.75rem;
  display: flex;
  justify-content: center;
}

.transition {
  transition: all 1s ease-in-out;
}

.img-transition {
  transition: all 1s ease-in-out;
}

.img-transition:hover {
  border-radius: 100%;
}

.transition:hover {
  transform: rotate(360deg);
  scale: 1.5;
  box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080,
    2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080,
    inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080,
    inset 2px 2px 10px #00000080;
  animation: animate 3s linear infinite;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60000,
      0 0 40px #e60000, 0 0 50px #e60000, 0 0 60px #e60000, 0 0 70px #e60000;
  }

  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #e60000, 0 0 40px #e60000,
      0 0 50px #e60000, 0 0 60px #e60000, 0 0 70px #e60000, 0 0 80px #e60000;
  }
}

@keyframes animate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

@keyframes changebgimg {
  20% {
    background-image: url(./imgs/ghostface-black-3840x2160-23043.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  30% {
    background-image: url(./imgs/tron-ares-ai-3840x2160-23246.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
}