body#body-index {
  background: #bcffcb;
  background: linear-gradient(0deg, #bcffcb, #FFFFFF);
  /* background: url(../img/skyscraper-header.jpg) top center no-repeat; */
  /* background-size: 100% auto; */
}

.mps-box-bullet {
    height: 200px;
}

.mps-box-definition {
    min-height: 200px;
}


@keyframes fadeIn {
  0% { opacity: 0; margin-left: 2rem; }
  100% { opacity: 1; margin-left: 0rem; }
}


.cabin-sketch-regular {
  font-family: "Cabin Sketch", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: blue;
}

.cabin-sketch-bold {
  font-family: "Cabin Sketch", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: blue;
}

.component-circle {
  text-align: center;
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
  background-color: #0f9ed5;
  background: gba(9, 121, 9, 0.51);
  background: linear-gradient(90deg, rgba(9, 121, 9, 0.51) 0%, rgba(9, 121, 9, 0.51) 35%, rgba(0, 255, 212, 0.5) 100%);
  border-radius: 50%;
  color: #fff;
  text-shadow: 1px 1px 1px #333;
  box-shadow: 0 0 1px #000;
  text-align: center;
  font-weight: bold;
}

.component-circle-label {
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  :root {
    body#body-index {
      background: #06402B;
    }
  }
}

[data-theme=dark],
.theme-dark {
    body#body-index {
      background: #06402B;
    }
}