1 files changed, 151 insertions, 0 deletions
diff --git a/dna.css b/dna.css
new file mode 100644
index 0000000..2f67abb
--- /dev/null
+++ b/dna.css
@@ -0,0 +1,151 @@
+.wrapper{
+    position: relative;
+    margin-top: 10%;
+    margin-left: 5%;
+    margin-bottom: 5%;
+}
+
+.line{
+    position: absolute;
+    top: 0px;
+    width: 4px;
+    height: 5px;
+    background: var(--dark-blue-trans);
+    z-index: -2;
+}
+
+.circle{
+    position: absolute;
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--light-blue-trans);
+    z-index: -2;
+}
+
+.circle-top{
+    top: 0px;
+    left: -3.5px;
+}
+
+.circle-bottom{
+    bottom: 0px;
+    left: -3.5px;
+}
+
+.dot{
+    position: absolute;
+    display: block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    left: -1.5px;
+}
+
+.line1{
+    margin-left: 0%;
+    animation: twist 5s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+
+.line2{
+    margin-left: 5%;
+    animation: twist 5s .05s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line3{
+    margin-left: 10%;
+    animation: twist 5s .1s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line4{
+    margin-left: 15%;
+    animation: twist 5s .15s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line5{
+    margin-left: 20%;
+    animation: twist 5s .2s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line6{
+    margin-left: 25%;
+    animation: twist 5s .25s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line7{
+    margin-left: 30%;
+    animation: twist 5s .3s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line8{
+    margin-left: 35%;
+    animation: twist 5s .35s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line9{
+    margin-left: 40%;
+    animation: twist 5s .4s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line10{
+    margin-left: 45%;
+    animation: twist 5s .45s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line11{
+    margin-left: 50%;
+    animation: twist 5s .5s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line12{
+    margin-left: 55%;
+    animation: twist 5s .55s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line13{
+    margin-left: 60%;
+    animation: twist 5s .6s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line14{
+    margin-left: 65%;
+    animation: twist 5s .65s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line15{
+    margin-left: 70%;
+    animation: twist 5s .7s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line16{
+    margin-left: 75%;
+    animation: twist 5s .75s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line17{
+    margin-left: 80%;
+    animation: twist 5s .8s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line18{
+    margin-left: 85%;
+    animation: twist 5s .85s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line19{
+    margin-left: 90%;
+    animation: twist 5s .9s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+.line20{
+    margin-left: 95%;
+    animation: twist 5s .95s cubic-bezier(0.150, 0, 0.205, 1) infinite;
+}
+
+@keyframes twist{
+    0%{height: 4px; top: 0px; left: 0px; transform: rotate(-720deg)}
+    50%{height: 200px; top: -100px; left: 5px;}
+    100%{height: 4px; top: 0px; left: 0px; transform: rotate(0deg);}
+}