.wrapper{--sphere-size:600px;margin-top:calc(var(--sphere-size) * -.75);perspective:800px;perspective-origin:50% calc(var(--sphere-size) * .25)}@media (max-width:768px){.wrapper{--sphere-size:min(300px,80vw);margin:20px;margin-top:calc(20px - var(--sphere-size) * .5)}}@media (max-width:480px){.wrapper{--sphere-size:min(240px,75vw);margin:10px;margin-top:calc(10px - var(--sphere-size) * .5)}}.sphere{position:relative;margin:0 auto;transform-style:preserve-3d;animation:spin 100s linear infinite}.sphere,.sphere>div{width:var(--sphere-size)}.sphere>div{border:3px solid #ebe322;border-radius:100%;height:var(--sphere-size);opacity:.8;position:absolute}div.equator{transform:rotateX(90deg)}div.equator,div.tropic{border:6px solid #ebe322}div.tropic{height:calc(var(--sphere-size) * .86);margin:calc(var(--sphere-size) * .07);width:calc(var(--sphere-size) * .86)}div.cancer{transform:translateY(calc(var(--sphere-size) * -.25)) rotateX(90deg)}div.capricorn{transform:translateY(calc(var(--sphere-size) * .25)) rotateX(90deg)}@keyframes spin{0%{transform:rotateX(-15deg) rotateY(0)}50%{transform:rotateX(-15deg) rotateY(180deg)}to{transform:rotateX(-15deg) rotateY(1turn)}}