body 
{
  padding: 3em 2em;
  font-size: 20px;
  font-size: 2.2vmin;
  background: #191919;
  color: #bbb;
  font-family: "Trebuchet MS";
}
html {
  text-size-adjust: none;
}
div
{
  margin-bottom: 1em;
}
a
{
  color: #ED005E; 
}
.typing
{
  font-size: 2em;
  font-family: "Courier New";
  margin-bottom: 1.4em;
  color: #777;
}
.note
{
  font-size: 2.3em;
  line-height: 1.4em;
  padding-top: 1em;
}

.note-plus
{
  padding-top: 2.4em;
}

h1
{
  font-size: 2em;
  line-height: 1.5em;
}


@media screen and (max-height: 768px)
{
  html,body 
  {
    padding: 1.5em 1.5em;
  }
}



.highlight-container, .highlight {
  position: relative;
  color: #000;
  margin-right:5px;
}

.highlight-container {
  display: inline-block;
}
.highlight-container:before {
  content: " ";
  display: block;
  height: 90%;
  width: 100%;
  margin-left: -3px;
  margin-right: -3px;
  position: absolute;
  background: #ffd500;
  transform: rotate(2deg);
  top: -1px;
  left: -1px;
  border-radius: 20% 25% 20% 24%;
  padding: 10px 3px 3px 10px;
}

#bar
{
  position: relative;
  padding: 0 5px;
}

#bar > span {animation: 8s autoplay4 infinite linear;
  position: absolute; top: 0; left: 0; opacity: 0.0}

#bar > span:nth-child(1) {animation-delay: 0s}
#bar > span:nth-child(2) {animation-delay: 2s}
#bar > span:nth-child(3) {animation-delay: 4s}
#bar > span:nth-child(4) {animation-delay: 6s}


@keyframes autoplay4 {
  0% {opacity: 0.0}
  4% {opacity: 1.0}
  18% {opacity: 1.0}
  28% {opacity: 0.0}
  75% {opacity: 0.0}
}