:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{height:100%;width:100%}body{--color-bg1: rgb(108, 0, 162);--color-bg2: rgb(0, 17, 82);position:relative;margin:0;width:100%;height:100%;overflow:hidden}#root{position:relative;width:100%;height:100%}.card{position:relative;z-index:999;mix-blend-mode:difference;filter:invert(70%) sepia(100%) saturate(1000%) hue-rotate(145deg)}.card>div{padding:4em}.interactive{width:12px;height:12px;background:white;z-index:0;position:absolute}@keyframes changeScale{0%{scale:1}50%{scale:1.5}to{scale:1}}@keyframes moveInCircle{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes moveVertical{0%{transform:translateY(-50%)}50%{transform:translateY(50%)}to{transform:translateY(-50%)}}@keyframes moveHorizontal{0%{transform:translate(-50%) translateY(-10%)}50%{transform:translate(50%) translateY(10%)}to{transform:translate(-50%) translateY(-10%)}}.backgroundContainer{position:absolute;height:140%;width:140%;transform:translate(-20%,-20%);font-size:3vw;filter:invert(55%) sepia(100%) saturate(500%) hue-rotate(195deg)}.background{position:relative;height:200%;width:200%;filter:blur(100px) contrast(50);background-color:#fff}.g1{--circle-size: 15em;transform-origin:center right;animation:moveVertical 110s ease infinite,changeScale 55s ease infinite;top:20vh;left:30vw}.g2{--circle-size: 10em;transform-origin:center left;animation:moveInCircle 85s ease infinite,changeScale 35s ease infinite;top:40vh;left:75vw;z-index:0}.g3{--circle-size: 12em;top:60vh;left:75vw;transform-origin:65% 65%;animation:moveInCircle 95s ease infinite,changeScale 15s ease infinite}.dot{position:absolute;width:var(--circle-size);height:var(--circle-size);border-radius:50%;background-color:#000}