*{border:0;box-sizing:border-box;margin:0;padding:0}:root{--bg:#000000;--fg:#ffffff;--dur:8s}.body-m{background:var(--bg);color:var(--fg);font:700 1em/1.5 Comfortaa,sans-serif;display:grid;place-items:center;align-content:center;height:100dvh;width:100%;letter-spacing:.1em;text-transform:uppercase;font-size:calc(14px + (30 - 20) * (100vw - 320px) / (1280 - 320))}.hexagon{margin-bottom:1.5em;overflow:hidden;position:relative;width:12em;height:12em}.hexagon__group,.hexagon__sector,.hexagon__sector:after,.hexagon__sector:before{position:absolute}.hexagon__group{width:100%;height:100%}.hexagon__group:nth-child(2) .hexagon__sector,.hexagon__group:nth-child(2) .hexagon__sector:after,.hexagon__group:nth-child(2) .hexagon__sector:before{animation-delay:calc(var(--dur) * -1 / 6)}.hexagon__group:nth-child(3) .hexagon__sector,.hexagon__group:nth-child(3) .hexagon__sector:after,.hexagon__group:nth-child(3) .hexagon__sector:before{animation-delay:calc(var(--dur) * -2 / 6)}.hexagon__group:nth-child(4) .hexagon__sector,.hexagon__group:nth-child(4) .hexagon__sector:after,.hexagon__group:nth-child(4) .hexagon__sector:before{animation-delay:calc(var(--dur) * -3 / 6)}.hexagon__group:nth-child(5) .hexagon__sector,.hexagon__group:nth-child(5) .hexagon__sector:after,.hexagon__group:nth-child(5) .hexagon__sector:before{animation-delay:calc(var(--dur) * -4 / 6)}.hexagon__group:nth-child(6) .hexagon__sector,.hexagon__group:nth-child(6) .hexagon__sector:after,.hexagon__group:nth-child(6) .hexagon__sector:before{animation-delay:calc(var(--dur) * -5 / 6)}.hexagon__group:nth-child(odd){transform:rotate(30deg)}.hexagon__sector,.hexagon__sector:after,.hexagon__sector:before{animation-duration:var(--dur);animation-iteration-count:infinite;animation-timing-function:linear;width:.2em;height:.2em}.hexagon__sector{animation-name:moveOut1;top:calc(50% - .1em);left:calc(50% - .1em)}.hexagon__sector:nth-child(2){animation-name:moveOut2}.hexagon__sector:nth-child(3){animation-name:moveOut3}.hexagon__sector:nth-child(4){animation-name:moveOut4}.hexagon__sector:nth-child(5){animation-name:moveOut5}.hexagon__sector:nth-child(6){animation-name:moveOut6}.hexagon__sector:after,.hexagon__sector:before{animation-name:ripple;background-color:#ef4444;border-radius:.1em;content:"";display:block;top:0;left:0;transform-origin:.1em .1em}.hexagon__sector:before{transform:rotate(-30deg)}.hexagon__sector:after{transform:rotate(-150deg)}@keyframes moveOut1{0%{transform:translateY(0) scale(0)}3%{transform:translateY(.2em) scale(1)}97%{transform:translateY(7.3em) scale(1)}to{transform:translateY(7.5em) scale(0)}}@keyframes moveOut2{0%{transform:rotate(60deg) translateY(0) scale(0)}3%{transform:rotate(60deg) translateY(.2em) scale(1)}97%{transform:rotate(60deg) translateY(7.3em) scale(1)}to{transform:rotate(60deg) translateY(7.5em) scale(0)}}@keyframes moveOut3{0%{transform:rotate(120deg) translateY(0) scale(0)}3%{transform:rotate(120deg) translateY(.2em) scale(1)}97%{transform:rotate(120deg) translateY(7.3em) scale(1)}to{transform:rotate(120deg) translateY(7.5em) scale(0)}}@keyframes moveOut4{0%{transform:rotate(180deg) translateY(0) scale(0)}3%{transform:rotate(180deg) translateY(.2em) scale(1)}97%{transform:rotate(180deg) translateY(7.3em) scale(1)}to{transform:rotate(180deg) translateY(7.5em) scale(0)}}@keyframes moveOut5{0%{transform:rotate(240deg) translateY(0) scale(0)}3%{transform:rotate(240deg) translateY(.2em) scale(1)}97%{transform:rotate(240deg) translateY(7.3em) scale(1)}to{transform:rotate(240deg) translateY(7.5em) scale(0)}}@keyframes moveOut6{0%{transform:rotate(300deg) translateY(0) scale(0)}3%{transform:rotate(300deg) translateY(.2em) scale(1)}97%{transform:rotate(300deg) translateY(7.3em) scale(1)}to{transform:rotate(300deg) translateY(7.5em) scale(0)}}@keyframes ripple{0%,to{width:.2em}33%{width:2.4em}}