@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: var(--bgColor);
}

h1 { text-align: center }

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

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;

  list-style: none;
  counter-reset: stepnr;
}

.values li:nth-child(6n + 1) { --accent-color: #93D500 }
.values li:nth-child(6n + 2) { --accent-color: #93D500 }
.values li:nth-child(6n + 3) { --accent-color: #93D500 }
.values li:nth-child(6n + 4) { --accent-color: #93D500 }
.values li:nth-child(6n + 5) { --accent-color: #93D500 }
.values li:nth-child(6n + 6) { --accent-color: #93D500 }

.values ol li {
  counter-increment: stepnr;
  width: 22rem;
  --borderS: 2rem;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: calc(var(--borderS) + 2rem);
  position: relative;
}
.values ol li::before,
.values ol li::after {
  inset: 0;
  position: absolute;
  border-radius: 50%;
  border: var(--borderS) solid var(--bgColor);
  line-height: 1.1;
}
.values ol li::before {
  content: counter(stepnr);
  color: var(--accent-color);
  padding-left: 12rem;
  font-size: 12rem;
  font-weight: 700;
  overflow: hidden;
}

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

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