svg.atom {
  max-height: 100vh;
  max-width: 100vw;
  overflow: visible;
}
svg circle.kern {
  fill: #FFEA00;
  stroke: none;
  filter: drop-shadow(0px 0px 4px #AEEA00);
}
.atom path {
  fill: none;
  stroke: #fff;
  stroke-width: 0.06;
}
/* 129 = ellipse.getTotalLength() */
path.tail {
  stroke: #bda800;
  fill: none;
  animation: atom 1.5s infinite linear;
  stroke-dashoffset: 0;
  stroke-dasharray: 20, 44.5;
  stroke-width: 0.6;
}
path.electron {
  stroke: #FFEA00;
  fill: none;
  animation: atom 1.5s infinite linear;
  stroke-dashoffset: 0;
  stroke-dasharray: 0.1, 64.4;
  stroke-width: 2;
  stroke-linecap: round;
}
path.tail1,
path.electron1 {
  animation-delay: -1s;
}
path.tail2,
path.electron2 {
  animation-delay: -1.4s;
}
/* 129 = ellipse.getTotalLength() */
@keyframes atom {
  to {
    stroke-dashoffset: 129;
  }
}
/* 

Template boilerplate CSS

*/
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzc.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');
}
html {
  height: 100%;
  background: #1A2A3A;
  color: #FFF;
}
body {
  font-family: Roboto, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}
*,
*:before,
*:after {
  position: relative;
  box-sizing: border-box;
}
.dwf,
.share {
  position: fixed;
  bottom: 4px;
  right: 10px;
  background-color: #0003;
  padding: 3px;
  border-radius: 3px;
}
.dwf .btn,
.share .btn {
  color: #fff;
  text-decoration: none;
}
.share {
  right: auto;
  left: 10px;
  border-radius: 50%;
  padding: 5px;
}
.share .twitter {
  width: 20px;
  fill: #fff;
  stroke: none;
  overflow: visible;
}
.share .ani {
  animation: share 7s ease-in infinite;
  transform-origin: 0% 100%;
}
@keyframes share {
  85% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(5);
    opacity: 0;
  }
}