.cls-1 {
  fill: #fff;
}

.cls-2 {
  opacity: 0;
  fill: none;
  stroke: #f7e900;
  stroke-miterlimit: 10;
  stroke-width: 2px;
  animation: backgroundrect 1.5s ease forwards;
  animation-delay: calc(1.5s + var(--order) * 300ms);
}

#Layer_1 {
  width: 80%;
}

g rect {
  opacity: 0;
  animation: backgroundrect 2s ease forwards;
  animation-delay: 1s;
}

@keyframes backgroundrect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.wording {
  opacity: 0;
  animation: wording 2s ease forwards;
  animation-delay: calc(2s + var(--order) * 400ms);
}

@keyframes wording {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width:850px) {
  .cls-2 {
    stroke-width: 4px;
  }
}