.box-breath-container{--fresh-green:#8ebf42;--dark-blue:#3a506b;--active-text-color:#ffffff;--dot-color:#ffffff;--total-duration:16s;width:350px;height:350px;min-width:350px;flex-shrink:0;position:relative;margin:1rem auto;display:flex;justify-content:center;align-items:center;background-color:var(--fresh-green);border-radius:12px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;user-select:none}.box-counter{color:var(--active-text-color)!important;font-size:80px;font-weight:700;z-index:20;line-height:1}.box-label{position:absolute;color:var(--dark-blue)!important;font-size:22px;font-weight:600;transition:color .5s ease;z-index:10}.box-label.active{color:var(--active-text-color)!important}.box-label.top{top:6%;left:50%;transform:translateX(-50%)}.box-label.right{top:50%;right:6%;transform:translateY(-50%) rotate(90deg)}.box-label.bottom{bottom:6%;left:50%;transform:translateX(-50%)}.box-label.left{top:50%;left:6%;transform:translateY(-50%) rotate(-90deg)}.box-animation-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}#box-path{stroke:var(--dark-blue);stroke-width:4;fill:none}#moving-dot{fill:var(--dot-color);animation:move-around-box var(--total-duration) linear infinite}@keyframes move-around-box{0%{cx:20%;cy:20%}25%{cx:80%;cy:20%}50%{cx:80%;cy:80%}75%{cx:20%;cy:80%}to{cx:20%;cy:20%}}