* {
  margin: 0;
  padding: 0;
}
.title h1{
  font-size: 36px;
  font-family: 'Lato', sans-serif;
  margin-top:2em;
  margin-left: auto;
  margin-right:auto;
  text-align: center;

  /* Stryling the text and giving it gradiant */
  color:#ffffff;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

  /* Make sure text is infront of background images */
  display:block;
  position: relative;
  z-index: 3;
}

@keyframes move-twink-back {
  from {background-position:0 0;}
  to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
  from {background-position:0 0;}
  to {background-position:10000px 0;}
}

.stars, .twinkling, .clouds {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
display:block;
}

.stars {
background:#000 url(stars.png) repeat top center;
z-index:  -1;

}

.twinkling{
background:transparent url(twinkling.png) repeat top center;
z-index:-1;
animation:move-twink-back 200s linear infinite;
}

.clouds{
  background:transparent url(clouds.png) repeat top center;
  z-index:-1;
  opacity: .4;
  animation:move-clouds-back 200s linear infinite;
}

/* #frame {
  display:block;
  position: relative;
  z-index: 3;
  margin-top:20em;
} */

.frameontop {
   z-index: 5;
 }

.centerbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.home{
  position:absolute;
   left:20px; 
   top:0px;
   z-index: 5;


}