.dna-loader{min-width:fit-content;min-height:fit-content;height:10rem;width:30rem;margin:auto;display:flex;justify-content:space-evenly;align-items:center;transform:rotate(45deg)}.dna-loader .spike{height:80%;width:0;position:relative}.dna-loader .spike::after,.dna-loader .spike::before{content:"";position:absolute;height:1rem;width:1rem;left:0;right:0;transform:translateX(-50%);border-radius:75vw;margin:auto}.dna-loader .spike::before{top:0;background-color:#607B63;animation:beforeAnimation 3s ease-in-out infinite}.dna-loader .spike::after{bottom:0;background-color:#5E9748;animation:afterAnimation 3s ease-in-out infinite}.dna-loader .spike.hidden{transition:3s;visibility:hidden}.spike:nth-child(1)::after,.spike:nth-child(1)::before{animation-delay:.15s}.spike:nth-child(2)::after,.spike:nth-child(2)::before{animation-delay:.3s}.spike:nth-child(3)::after,.spike:nth-child(3)::before{animation-delay:.45s}.spike:nth-child(4)::after,.spike:nth-child(4)::before{animation-delay:.6s}.spike:nth-child(5)::after,.spike:nth-child(5)::before{animation-delay:.75s}.spike:nth-child(6)::after,.spike:nth-child(6)::before{animation-delay:.9s}.spike:nth-child(7)::after,.spike:nth-child(7)::before{animation-delay:1.05s}.spike:nth-child(8)::after,.spike:nth-child(8)::before{animation-delay:1.2s}.spike:nth-child(9)::after,.spike:nth-child(9)::before{animation-delay:1.35s}.spike:nth-child(10)::after,.spike:nth-child(10)::before{animation-delay:1.5s}.spike:nth-child(11)::after,.spike:nth-child(11)::before{animation-delay:1.65s}.spike:nth-child(12)::after,.spike:nth-child(12)::before{animation-delay:1.8s}.spike:nth-child(13)::after,.spike:nth-child(13)::before{animation-delay:1.95s}.spike:nth-child(14)::after,.spike:nth-child(14)::before{animation-delay:2.1s}.spike:nth-child(15)::after,.spike:nth-child(15)::before{animation-delay:2.25s}.spike:nth-child(16)::after,.spike:nth-child(16)::before{animation-delay:2.4s}.spike:nth-child(17)::after,.spike:nth-child(17)::before{animation-delay:2.55s}.spike:nth-child(18)::after,.spike:nth-child(18)::before{animation-delay:2.7s}.spike:nth-child(19)::after,.spike:nth-child(19)::before{animation-delay:2.85s}.spike:nth-child(20)::after,.spike:nth-child(20)::before{animation-delay:3s}@keyframes beforeAnimation{0%{top:0;transform:translateX(-50%) translateY(0) scale(.5);opacity:.25}25%{transform:translateX(-50%) translateY(-100%) scale(.5);opacity:.5;z-index:-1}50%{top:100%;transform:translateX(-50%) translateY(-100%) scale(.5);opacity:.75}75%{transform:translateX(-50%) translateY(-100%) scale(1.5);opacity:1;z-index:1}100%{top:0;transform:translateX(-50%) translateY(0) scale(.5);opacity:.25;color:#436b33}}@keyframes afterAnimation{0%{bottom:0;transform:translateX(-50%) translateY(0) scale(.5);opacity:.25}25%{transform:translateX(-50%) translateY(100%) scale(1.5);z-index:1;opacity:1}50%{bottom:100%;transform:translateX(-50%) translateY(100%) scale(.5);opacity:.75}75%{transform:translateX(-50%) translateY(100%) scale(.5);z-index:-1;opacity:.5}100%{bottom:0;transform:translateX(-50%) translateY(0) scale(.5);opacity:.25;color:#a0c492}}@keyframes rotateDNA{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}