.title-container {
  display: flex;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  gap: 10px;
}
.simplified {
  gap: 0px;
  flex-wrap: nowrap;
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 10;
}

.simplified .block {
  position: absolute;
  margin: 0 !important;
}

.simplified .circle {
  position: absolute;
  left: 40px;
  transform: translateY(-50%);
}

.title-container .block:nth-child(4n) {
  margin-right: 30px;
}

.title-container .block:nth-child(9) {
  margin-right: -10px;
  margin-left: -40px;
}

.simplified .block:nth-child(4n),
.simplified .block:nth-child(9) {
  margin: 0 !important;
}

.block {
  width: 30px;
  height: 30px;
  position: relative;
  opacity: 0;
  animation: rotating 1s forwards;
}

.title-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.title-container:hover {
  opacity: 0.1;
}

.circle {
  width: 10px;
  height: 10px;
  background-color: rgb(255, 95, 69);
  border-radius: 50%;
  margin-top: 20px;
  animation: rotating 1s forwards;
}

@keyframes rotating {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
    transform: translateY(5px) rotate(360deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(360deg);
  }
}
.block:nth-child(1) {
  animation-duration: 2s;
}
.block:nth-child(2) {
  animation-duration: 1s;
}
.block:nth-child(3) {
  animation-duration: 1s;
}
.block:nth-child(4) {
  animation-duration: 1s;
}
.block:nth-child(5) {
  animation-duration: 2s;
}
.block:nth-child(6) {
  animation-duration: 1s;
}
.block:nth-child(7) {
  animation-duration: 1s;
}
.block:nth-child(8) {
  animation-duration: 1s;
}
.block:nth-child(9) {
  animation-duration: 1s;
}
.block:nth-child(10) {
  animation-duration: 1s;
}

.horizontal-line {
  position: absolute;
  width: 30px;
  height: 10px;
  background-color: rgb(0, 0, 0);
}

.vertical-line {
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: rgb(0, 0, 0);
}

.block-1 .horizontal-line:nth-child(1) {
  top: 0;
  left: 0;
}
.block-1 .horizontal-line:nth-child(2) {
  top: 20px;
  left: 0;
}

.block-2 .horizontal-line:nth-child(1) {
  top: 20px;
  left: 0;
}
.block-2 .vertical-line:nth-child(2) {
  top: 0;
  left: 0;
}
.block-2 .vertical-line:nth-child(3) {
  top: 0;
  left: 20px;
}

.block-3 .vertical-line:nth-child(1) {
  top: 0;
  left: 0;
}
.block-3 .horizontal-line:nth-child(2) {
  top: 0;
  left: 0;
}
.block-3 .horizontal-line:nth-child(3) {
  top: 20px;
  left: 0;
}

.block-4 .horizontal-line:nth-child(1) {
  top: 0;
  left: 0;
}
.block-4 .vertical-line:nth-child(2) {
  top: 0;
  left: 0;
}

.block-4 .vertical-line:nth-child(3) {
  top: 0;
  left: 20px;
}

.block-5 .horizontal-line:nth-child(1) {
  top: 0;
  left: 0;
}
.block-5 .horizontal-line:nth-child(2) {
  top: 20px;
  left: 0;
}

.block-6 .horizontal-line:nth-child(1) {
  top: 0;
  left: 0;
}
.block-6 .horizontal-line:nth-child(2) {
  top: 20px;
  left: 0;
}
.block-6 .vertical-line:nth-child(3) {
  top: 0;
  left: 0;
}

.block-7 .vertical-line:nth-child(1) {
  top: 0;
  left: 0;
}
.block-7 .vertical-line:nth-child(2) {
  top: 0;
  left: 20px;
}
.block-7 .horizontal-line:nth-child(3) {
  top: 10px;
  left: 0;
}

.block-8 .vertical-line:nth-child(1) {
  top: 0;
  left: 0;
}
.block-8 .vertical-line:nth-child(2) {
  top: 0;
  left: 20px;
}
.block-8 .horizontal-line:nth-child(3) {
  top: 20px;
  left: 0;
}

.block-9 .vertical-line:nth-child(1) {
  top: 0;
  left: 10px;
}

.block-10 .horizontal-line:nth-child(1) {
  top: 0;
  left: 0;
}
.block-10 .vertical-line:nth-child(2) {
  top: 0;
  left: 10px;
}