.canvas,.overlay{width:100%;height:100%;position:fixed;inset:0;overflow:hidden}.canvas{background:var(--color-background)}.circles{backface-visibility:hidden;perspective:1000px;justify-content:center;align-items:center;width:100%;height:100%;animation-name:rotate;animation-duration:25s;animation-iteration-count:infinite;animation-direction:alternate;display:flex;position:relative}.circle{width:600px;height:600px;margin:calc(var(--radius) / 2);backface-visibility:hidden;perspective:1000px;opacity:.9;filter:blur(100px);border-radius:600px;position:relative}.circle.design{background:var(--color-design);box-shadow:0 0 var(--radius) var(--radius) var(--color-design);animation-name:float;animation-duration:6s;animation-iteration-count:infinite;animation-direction:alternate}.circle.research{background:var(--color-research);box-shadow:0 0 var(--radius) var(--radius) var(--color-research);animation-name:float;animation-duration:14s;animation-iteration-count:infinite;animation-direction:alternate-reverse}@keyframes float{0%{transform:translateX(calc(var(--radius) * 0)) translateZ(0)}20%{transform:translateX(calc(var(--radius) * .5)) translateZ(0)}40%{transform:translateX(calc(var(--radius) * 1)) translateZ(0)}60%{transform:translateX(calc(var(--radius) * 1.5)) translateZ(0)}80%{transform:translateX(calc(var(--radius) * .5)) translateZ(0)}to{transform:translateX(calc(var(--radius) * 0)) translateZ(0)}}@keyframes rotate{0%{transform:rotate(0)translateZ(0)}to{transform:rotate(360deg)translateZ(0)}}@media (max-width:640px){:root{--radius:125px}.overlay{background-size:50%}}.overlay{opacity:.2;mix-blend-mode:overlay;background-image:url(/img/noise-1.png)}