:root{color-scheme:light dark}body{margin:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}img{max-width:100%}.hexagons{text-align:center;display:flex;justify-content:space-around;flex-wrap:wrap;position:absolute;top:0;right:0;left:0;bottom:0}.hexagon:nth-child(odd){background-image:url(/images/hexagon-pink.svg)}.hexagon:nth-child(even){background-image:url(/images/hexagon-green.svg)}.hexagon{background-size:contain;width:60px;height:60px;opacity:0;-webkit-animation:hex-animation 10s infinite linear;-moz-animation:hex-animation 10s infinite linear;animation:hex-animation 10s infinite linear}.hexagon:nth-child(5n+5){-webkit-animation-delay:1.3s;-moz-animation-delay:1.3s;animation-delay:1.3s}.hexagon:nth-child(3n+2){-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s}.hexagon:nth-child(2n+5){-webkit-animation-delay:1.7s;-moz-animation-delay:1.7s;animation-delay:1.7s}.hexagon:nth-child(3n+10){-webkit-animation-delay:2.7s;-moz-animation-delay:2.7s;animation-delay:2.7s}.hexagon:nth-child(7n+2){-webkit-animation-delay:3.5s;-moz-animation-delay:3.5s;animation-delay:3.5s}.hexagon:nth-child(4n+5){-webkit-animation-delay:5.5s;-moz-animation-delay:5.5s;animation-delay:5.5s}.hexagon:nth-child(3n+7){-webkit-animation-delay:8s;-moz-animation-delay:8s;animation-delay:8s}@keyframes hex-animation{0%{width:60px;height:60px;opacity:0;-webkit-transform:translate(0,0vh) rotateZ(0deg)}25%{width:60px;height:60px;opacity:1;-webkit-transform:translate(0,25vh) rotateZ(90deg)}75%{width:60px;height:60px;opacity:1;-webkit-transform:translate(5vw,75vh) rotateZ(270deg)}to{width:60px;height:60px;opacity:0;-webkit-transform:translate(10vw,100vh) rotateZ(360deg)}}@-webkit-keyframes hex-animation{0%{width:60px;height:60px;opacity:0;-webkit-transform:translate(0,0vh) rotateZ(0deg)}25%{width:60px;height:60px;opacity:1;-webkit-transform:translate(0,25vh) rotateZ(90deg)}75%{width:60px;height:60px;opacity:1;-webkit-transform:translate(5vw,75vh) rotateZ(270deg)}to{width:60px;height:60px;opacity:0;-webkit-transform:translate(10vw,100vh) rotateZ(360deg)}}@-moz-keyframes hex-animation{0%{width:60px;height:60px;opacity:0;-webkit-transform:translate(0,0vh) rotateZ(0deg)}25%{width:60px;height:60px;opacity:1;-webkit-transform:translate(0,25vh) rotateZ(90deg)}75%{width:60px;height:60px;opacity:1;-webkit-transform:translate(5vw,75vh) rotateZ(270deg)}to{width:60px;height:60px;opacity:0;-webkit-transform:translate(10vw,100vh) rotateZ(360deg)}}