<!-- start Simple Custom CSS and JS -->
<style type="text/css">
.material {
position: relative;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
transform: rotateZ(-20deg);
}

@keyframes rotate {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}

.dna {/*line*/
    position: relative;
    width: 1px;
    height: 100px;
    border: 1px dotted #e3e3e3;
    box-shadow: 0 0 15px #e3e3e3;
    background: transparent;
    margin: 0px 10px;
    animation: rotate 6s linear infinite;
}

.dna::before {/*top dot*/
    content: "";
    position: absolute;
    top: -2px;
    left: -5px;
    width: 10px;
    height: 10px;
    background: #1292D9;
    border-radius: 50%;
    box-shadow: 0 0 15px #1292D9;
}


.dna::after {/*bottom dot*/
content: '';
position: absolute;
bottom: -2px;
left: -5px;
width: 10px;
height: 10px;
background: #50E3C2;
border-radius: 50%;
box-shadow: 0 0 12px #50E3C2;
}

.dna:nth-child(1) {
animation-delay: -0.15s;
}
.dna:nth-child(2) {
animation-delay: -0.3s;
}
.dna:nth-child(3) {
animation-delay: -0.45s;
}
.dna:nth-child(4) {
animation-delay: -0.6s;
}
.dna:nth-child(5) {
animation-delay: -0.75s;
}
.dna:nth-child(6) {
animation-delay: -0.9s;
}
.dna:nth-child(7) {
animation-delay: -1.05s;
}
.dna:nth-child(8) {
    animation-delay: -1.2s;
}
.dna:nth-child(9) {
    animation-delay: -1.35s;
    }
.dna:nth-child(10) {
    animation-delay: -1.5s;
}
.dna:nth-child(11) {
    animation-delay: -1.65s;
}
.dna:nth-child(12) {
    animation-delay: -1.8s;
}
.dna:nth-child(13) {
    animation-delay: -1.95s;
}
.dna:nth-child(14) {
    animation-delay: -2.1s;
}
.dna:nth-child(15) {
    animation-delay: -2.25s;
}
.dna:nth-child(16) {
    animation-delay: -2.4s;
}</style>
<!-- end Simple Custom CSS and JS -->
