@font-face
{
  font-family: teleb;
  src: url(/static/fonts/telebold.ttf);

}


@font-face
{
  font-family: tele;
  src: url(/static/fonts/tele.ttf);

}

@font-face
{
  font-family: telelight;
  src: url(/static/fonts/telelight.ttf);

}

body{
background-image:url('/static/img/kiddo.jpg');
  background-size: 10%;
  background-repeat: no-repeat;
  padding:0px;
  margin:0px;
  background-position:center ;

  background-color: beige;


}



.right {
  animation: 20s linear infinite;
  animation-name: goRight;

}

.left {
  animation: 20s linear infinite;
  animation-name: goLeft;


}

a {
      font-family: teleb;
    font-size: 9.09vw;
    color: #ff9595;


}

/* Declare the animation. In this case, we indicate the property
   values we want at certain percentage points within the animation. */
@keyframes goRight {
  
  0% {
    position: absolute;
    top: 0%;
    left: 0%;

    width: 10px;
    height: 10px;
  }

  25% {
    position: absolute;
    top: 0%;
    left: 80%;

    width: 10px;
    height: 10px;
}

  50% {
  position: absolute;
  top: 80%;
  left: 80%;

  width: 10px;
  height: 10px;
}
  75% {
  position: absolute;
  top: 80%;
  left: 0%;

  width: 10px;
  height: 10px;
}

  100% {
    position: absolute;
    top: 0%;
    left: 0%;

    width: 10px;
    height: 10px;
  }  
}

@keyframes goLeft {
  
  0% {
  position: absolute;
  top: 80%;
  left: 70%;

  width: 10px;
  height: 10px;
  }

  25% {
  position: absolute;
  top: 80%;
  left: 0%;

  width: 10px;
  height: 10px;

}

  50% {
    position: absolute;
    top: 0%;
    left: 0%;

    width: 10px;
    height: 10px;
}
  75% {
    position: absolute;
    top: 0%;
    left: 70%;

    width: 10px;
    height: 10px;
}

  100% {
  position: absolute;
  top: 80%;
  left: 70%;

  width: 10px;
  height: 10px;
  }