:root {--rotate-time: 1.5s;--rotate-delay: 0.15s;--lines-color: rgb(58,62,111,0.5);--dots-color: #11101d;--dna-height: 100px;--dna-width: calc(var(--dna-height) * 4.33);--line-height: calc(var(--dna-height) - 60px);--dot-size: 8px;}#dna {position: absolute;z-index: 100;top: 50%;height: var(--dna-height);left: 52%;width: var(--dna-width);margin-top: calc(var(--dna-height) / -2);margin-left: calc(var(--dna-width) / -2);perspective: 1000px;}#dna div {position: relative;top: 50%;left: 60px;width: 2px;height: var(--line-height);margin-top: calc(var(--line-height) / -2);background-color: var(--lines-color);float: left;transform-style: preserve-3d;margin-left: 20px;animation: rotation var(--rotate-time) linear infinite;}#dna div::before,#dna div::after {content: "";position: absolute;height: var(--dot-size);width: var(--dot-size);background-color: var(--dots-color);border-radius: 50%;animation: rotation var(--rotate-time) linear infinite reverse;z-index: 1;}#dna div::before {top: calc(var(--dot-size) / -2);left: calc(var(--dot-size) / -2);}#dna div::after {bottom: calc(var(--dot-size) / -2);left: calc(var(--dot-size) / -2);}@keyframes rotation {from {transform: rotateX(0deg);}to {transform: rotateX(359deg);}}