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

body{
  font-family: Arial;
  background: url("https://defacegames.com/wp-content/uploads/2017/07/brawl-stars-pattern.png")
}

.botonera{
  display: flex;
  justify-content: center;
  gap: 20px
}

h1{
  color: red;
  text-align: center;
  padding: 8px
}

img{
  width: 100px
}

.brawlers, .maps{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 40px auto;
  max-width: 1000px
}

.card{
  border: solid black 2px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 400px;
  aspect-ratio: 16/9;
  gap: 8px;
}

.box {
  --clr-shadow__border: #d9a1ff;
  --clr-text: #F6F4EB;
  --clr-space: #120e1e;
  --clr-space-gr: #271950;
  --clr-star: #E9F8F9;
  --size: 3rem;
  position: relative;
  outline: 1px solid var(--clr-shadow__border);
}

.button {
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
  background: transparent;
  padding: calc(var(--size) / 3) var(--size);
  border: none;
  cursor: pointer;
  color: var(--clr-text);
  text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),
  -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);
}

.space {
  width: 100%;
  height: 100%;
  bottom: 0%;
  gap: 1.5rem;
  transition: 0.5s ease-in-out;
  z-index: -1;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  display: flex;
  background: linear-gradient( 160deg, var(--clr-space), var(--clr-space-gr));
}

.box:hover .space {
  opacity: 1;
}

.star {
  height: 4rem;
  width: 0.3rem;
  transition: 0.5s;
  border-radius: 50px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  position: relative;
  background-color: var(--clr-star);
  animation: space-animation calc(0.1s * var(--i)) linear infinite;
}

@keyframes space-animation {
  0% {
    transform: rotate(-30deg) translateY(calc(-52% * var(--i)));
  }

  100% {
    transform: rotate(-30deg) translateY(calc(52% * var(--i)));
  }
}