body{
    background-color: rgb(2, 2, 9);
    color: white;
    font-family: 'Franklin Gothic Medium';
    
}

.home{
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(122, 4, 177,1);
    box-shadow:  0 0 8px 6px rgba(122, 4, 177,0.3);
    border-style: solid;
    padding: 10px;
    border-radius: 100px;
    animation: light 10s linear;
    
}
.home:hover{
    animation-play-state: paused;
}


.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:0;
}

.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:2;
    opacity: .4;
    animation:move-clouds-back 200s linear infinite;
}
@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;}
}

@keyframes light {
    0% {
       opacity: 0;
    
    }
    100% {
        opacity: 1;
    }
    
}