:root {
  --box-size: 30vw;
  --trail-size: calc(var(--box-size) * 0.05);
  --trail-offset: calc(var(--box-size) * 0.025);
  --trail-position: calc(var(--box-size) * 0.975);
  --trail-max-size: calc(var(--trail-size) * 2);
}

#blog-title {
  text-align: center;
  padding-top: 30px;
  margin-bottom: 5%;
}

#blog-container {
  background-color: #bfb0aa !important;
  border-radius: var(--bs-border-radius-lg);
  margin-top: 30px;
  padding-bottom: 30px;
}

.box-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.breathing-box {
  margin-bottom: 50px;
  width: var(--box-size);
  height: var(--box-size);
  border: 2px solid rgba(255, 255, 255, 0.479);
  position: relative;
  border-radius: var(--bs-border-radius-lg);
}

.trail {
  width: var(--trail-size);
  height: var(--trail-size);
  background: #0aa696;
  border-radius: 50%;
  filter: blur(2px);
  animation: moveTrail 16s linear infinite;
}

@keyframes moveTrail {
  0% {
    transform: translate(
        calc(-1 * var(--trail-offset)),
        calc(-1 * var(--trail-offset))
      )
      scale(1);
  }

  25% {
    transform: translate(var(--trail-position), calc(-1 * var(--trail-offset)))
      scale(5);
  }

  50% {
    transform: translate(var(--trail-position), var(--trail-position)) scale(5);
  }
  75% {
    transform: translate(calc(-1 * var(--trail-offset)), var(--trail-position))
      scale(1);
  }
  100% {
    transform: translate(
        calc(-1 * var(--trail-offset)),
        calc(-1 * var(--trail-offset))
      )
      scale(1);
  }
}