@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;500;700&display=swap");

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

body {
  --color: rgba(30, 30, 30);
  --bgColor: rgba(245, 245, 245);
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: 2rem;
  padding: 2rem;
  font-family: "Exo 2", sans-serif;
  color: var(--color);

  /* background-color: #f851192f; */
  /* background-image: conic-gradient( ,  ); */
  background-image: radial-gradient(#f851193a, rgba(35, 170, 166, 0.39));

}

h1 { text-align: center }

ol {
  width: min(60rem, 90%);
  margin-inline: auto;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  text-align: center;
  list-style: none;
  /* counter-reset: stepnr; */
}

a:nth-child(6n + 1) { --accent-color: rgb(240,94,47) }
a:nth-child(6n + 2) { --accent-color: #1877f2 }
a:nth-child(6n + 3) { --accent-color: #c32aa3 }
a:nth-child(6n + 4) { --accent-color: #0a66c2 }
a:nth-child(6n + 5) { --accent-color: #1da1f2 }
a:nth-child(6n + 6) { --accent-color: #25D366 }
a:nth-child(6n + 7) { --accent-color: #0088cc }
a:nth-child(6n + 8) { --accent-color: #ff0000 }
a:nth-child(6n + 9) { --accent-color: #0088cc }
a:nth-child(6n + 10) { --accent-color: #000 }

ol a {
  all: unset;
  text-align: center;
}
ol li {
  /* counter-increment: stepnr; */
  width: 18rem;
  --borderS: 2rem;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: calc(var(--borderS) + 3rem);
  position: relative;
  cursor: pointer;
  text-align: center;
}
ol li::before,
ol li::after {
  inset: 0;
  position: absolute;
  border-radius: 50%;
  border: var(--borderS) solid var(--bgColor);
  line-height: 1.1;
}
ol li::before {
  /* content: counter(stepnr); */
  color: var(--accent-color);
  padding-left: 10rem;
  font-size: 12rem;
  font-weight: 700;
  overflow: hidden;
}

ol li::after {
  content: "";
  filter: drop-shadow(-0.25rem 0.25rem 0.0675rem rgba(0, 0, 0, 0.75)) ;
}

ol li > * { width: 7.5rem }
ol li .icon { font-size: 2rem; color: var(--accent-color); text-align: center }
ol li .title { font-size: 2rem; font-weight: 500 }
ol li .descr { font-size: 0.8rem; font-weight: 300 }

.credits { margin-top: 2rem; text-align: right }
.credits a { color: var(--color) }

.icon {
  width: 63%;
  height: 2em;
  text-align: center;
  /* vertical-align: -0.125em; */
}