html {
  background-color: #131416;

  --region-size: 20vmin;
  --extra-space: 10vmin;
}

body {
  min-height: 100vh;
  place-content: center;
  margin: 0;

  font-family: system-ui, sans-serif;

  padding-inline: 0.5rem;
}

.region {
  --radius: calc(var(--region-size) + var(--extra-space));

  display: block;
  width: var(--region-size);
  height: var(--region-size);

  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  box-shadow: 0px 0px 30px 0px var(--shadow);
  transition: box-shadow 0.3s ease-in-out;

  &:hover {
    box-shadow: 0px 0px 45px 0px var(--shadow);
  }
}

.regiones .region:not(#logo) {
  transform: translateX(calc(cos(var(--angle)) * var(--radius))) translateY(calc(sin(var(--angle) * -1) * var(--radius)));
}

#antioquenos {
  --angle: 0;
  --shadow: #B2A729;

  background-image: url('/antioquenos.jpeg');
}

#cachacos {
  --angle: 51.4deg;
  --shadow: #B1EA36;

  background-image: url('/cachacos.jpeg');
}

#cafeteros {
  --angle: 102.8deg;
  --shadow: #33312d;

  background-image: url('/cafeteros.jpeg');
}

#costenos {
  --angle: 154.2deg;
  --shadow: #578fae;

  background-image: url('/costenos.jpeg');
}

#llaneros {
  --angle: 205.6deg;
  --shadow: #7d715f;

  background-image: url('/llaneros.jpeg');
}

#santandereanos {
  --angle: 257deg;
  --shadow: #692e2c;

  background-image: url('/santandereanos.jpeg');
}

#vallecaucanos {
  --angle: 308.4deg;
  --shadow: #f6804e;

  background-image: url('/vallecaucanos.jpeg');
}

#logo {
  background-image: url('/logo.png');
}

.regiones,
.region {
  display: grid;
  place-content: center;
}

.regiones>*,
.region>* {
  grid-area: 1/1;
}

.regiones {
  padding: 0;
}

.back {
  color: white;
  display: flex;
  align-items: center;

  text-decoration: none;
  margin-block-end: 1rem;

  svg {
    margin-inline-end: 0.5rem;
  }
}