@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(Comfortaa.woff2) format('woff2');
}

body {
  background: #222222;  
}

.f {
  font-family: 'Comfortaa';
  font-size: 4.5em;
  position: absolute;  
}

#hydrogen {
  position: absolute;
  transform: scale(0);
  animation: 1s ease-out 0s 1 forwards move-elem;
}

@keyframes move-elem {
  0%, 10% {
    left: 250px;
    top: 130px;
    transform: scale(0);
  }
  40%, 50% {
    left: 150px;
    top: 0px;
    transform: scale(1);
  }
  60% {
    left: 150px;
    top: 0px;
    transform: scale(1);
  }
  100% {
    left: 0px;
    top: 0px;
    transform: scale(1);
  }
}

#shell {
  position: absolute;
  width: 250px;
  height:250px;
  top: 0px;
  left: 0px;
}

#elec {
  position: absolute;
  width: 203px;
  height: 203px;
  /*border: 1px solid black;*/
  top: 22px;
  left: 23px;
  transform: rotate(25deg);
  animation: 3.2s ease-out 0s 1 forwards elec-run;
}

@keyframes elec-run {
  0%, 10% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(77deg);
  }
  50%, 55% {
    transform: rotate(134deg);
  }
  65%, 70% {
    transform: rotate(187deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#elec > svg {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 20px;
  left: 20px;
}

#elec > svg > circle {
  fill: #56c700;
}
#nuc > circle {
  fill: #3a8700;
}
#shell > circle {
  stroke: #3a8700;
}

#nuc {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 113px;
  left: 113px;
}

#container {
  position: absolute;
  /*border: 1px solid black;*/
  width: 560px;
  height: 410px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#elm {
  top: 0px;
  left: 147px;
  opacity: 0;
  animation: 0.9s ease-out 1.2s 1 forwards elm-intro;
  color: #ffa500;
}

@keyframes elm-intro {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}


#con {
  top: 80px;
  left: 56px;
  opacity: 0;
  animation: 0.7s ease-out 1.7s 1 forwards elm-intro;
  color: #56c700;
}

#des {
  top: 165px;
  left: 165px;
  opacity: 0;
  animation: 0.9s ease-out 2.2s 1 forwards elm-intro;
  color: #ffa500;
}

.blot {
  position: absolute;
  /*display: none;*/
  width: 100px;
  height: 100px;
  opacity: 0;
}

.blot > circle {
  fill: #222222;
}

#blot-0 {
  top: 13px;
  left: 130px;
  animation: 0.3s ease-in 0.9s 1 forwards elm-intro;
}

#blot-1 {
  top: 70px;
  left: 190px;
  animation: 0.3s ease-in 1.3s 1 forwards elm-intro;
}

#blot-2 {
  top: 130px;
  left: 140px;
  animation: 0.3s ease-in 1.8s 1 forwards elm-intro;
}

#slogan {
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
}

#slogan > div {
  font-family: 'Comfortaa';
  opacity: 0;
}

#slogan > div:first-child {
  font-size: 1.4em;
  margin-bottom: 30px;
  color: #e1e1e1;
  animation: 0.5s ease-out 2.5s 1 forwards elm-intro;
}

#slogan > div:last-child {
  font-size: 2.5em;
  margin: 10px;
  color: #3a8700;
  animation: 0.8s ease-out 2.8s 1 forwards elm-intro;
}

#slogan > div:last-child > span {
  display: inline-block;
  overflow: hidden;
}

#slogan > div:last-child > span:nth-child(2) {
  color: #56c700;
}

#slogan > div:last-child > span:nth-child(3) {
  color: #56c700;
  width: 0px;
  animation: 0.3s linear 3.2s 1 forwards slogan-intro;
}

@keyframes slogan-intro {
  0% {
    width: 0px;
  }
  100% {
    width: 95px;
    margin-right: 10px;
  }
}