@keyframes fadeInDescending {
  from {
    transform: translateY(0);
    opacity: 0;
  }
  to {
    transform: translateY(var(--fade-distance));
    opacity: 1;
  }
}
/*****************************************/
/*****************************************/
.blocksWrapper {
  height: 58rem;
  width: 20rem;
  margin-left: auto;
  /* border: 1px solid black; */
}
/* *********************************** */
/* 16 lowcode */
.block16 {
  height: 4rem;
  width: 4rem;
  background-color: #212974;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 8rem;
  --fade-distance: 30rem;
  animation: fadeInDescending 0.25s ease forwards;
}
/* 15 */
.block15 {
  height: 2rem;
  width: 2rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 10rem;
  --fade-distance: 34rem;
  animation: fadeInDescending 0.3s ease forwards;
}
/* 145 */
.block145 {
  height: 2rem;
  width: 2rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 10rem;
  --fade-distance: 38rem;
  animation: fadeInDescending 0.4s ease forwards;
}
/* 14 */
.block14 {
  height: 2rem;
  width: 2rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 12rem;
  --fade-distance: 36rem;
  animation: fadeInDescending 0.4s ease forwards;
}
/* 13 outsystems */
.block13 {
  height: 4rem;
  width: 8rem;
  border: 3px solid #333;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 8rem;
  --fade-distance: 40rem;
  animation: fadeInDescending 0.5s ease forwards;
}
/* 12 javascript */
.block12 {
  height: 4rem;
  width: 8rem;
  border: 2px solid #212974;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 8rem;
  --fade-distance: 44rem;
  animation: fadeInDescending 0.65s ease forwards;
}
/* 11 invisible */
.block11 {
  height: 4rem;
  width: 4rem;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 4rem;
  --fade-distance: 48rem;
  animation: fadeInDescending 0.7s ease forwards;
}
/* 10 react */
.block10 {
  height: 8rem;
  width: 4rem;
  border: 4px solid #666;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 12rem;
  --fade-distance: 52rem;
  animation: fadeInDescending 0.75s ease forwards;
}
/* 09 html */
.block09 {
  height: 4rem;
  width: 8rem;
  border: 4px solid #333;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 12rem;
  --fade-distance: 60rem;
  animation: fadeInDescending 1s ease forwards;
}
/* 08 */
.block08 {
  height: 2rem;
  width: 2rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 12rem;
  --fade-distance: 64rem;
  animation: fadeInDescending 1.1s ease forwards;
}
/* 07 */
.block07 {
  height: 2rem;
  width: 2rem;
  border: 3px solid #999;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 13rem;
  --fade-distance: 66rem;
  animation: fadeInDescending 1.15s ease forwards;
}
/* 06 */
.block06 {
  height: 2rem;
  width: 2rem;
  border: 2px solid #333;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 12rem;
  --fade-distance: 68rem;
  animation: fadeInDescending 1.2s ease forwards;
}
/* 05 */
.block05 {
  height: 2rem;
  width: 2rem;
  border: 2px solid #333;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 10rem;
  --fade-distance: 70rem;
  animation: fadeInDescending 1.25s ease forwards;
}
/* 04 sql */
.block04 {
  height: 4rem;
  width: 4rem;
  border: 2px solid #222;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 8rem;
  --fade-distance: 72rem;
  animation: fadeInDescending 1.5s ease forwards;
}
/* 03 figma | css */
.block03 {
  height: 4rem;
  width: 8rem;
  border: 4px solid #999;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 8rem;
  --fade-distance: 76rem;
  animation: fadeInDescending 1.75s ease forwards;
}
/* 02 ux/ ui */
.block02 {
  height: 4rem;
  width: 4rem;
  border: 3px solid #666;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  margin-left: 8rem;
  --fade-distance: 80rem;
  animation: fadeInDescending 2s ease forwards;
}
/* 01 design thinking */
.block01 {
  height: 4rem;
  width: 12rem;
  border: 4px solid #333;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  --fade-distance: 84rem;
  animation: fadeInDescending 2.25s ease forwards;
}
.blockLetters {
  font-size: 1.2rem;
  margin-left: 2px;
  margin-top: 2px;
}
/* ***************** */

/*****************************************/
/*****************************************/