/*body {
  background: linear-gradient(-45deg, black, black, white, black,  black);
  background-size: 400% 400%;
  animation: gradient 30s ease infinite;
  height: 100vh;
}*/



@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
body, html {
    position: relative;
    height: 100%; 
    width : 100%;  
    margin: 0;
  background-color: #000000;
}

.circle {
    position: absolute;
    margin: auto;
  background-image: -webkit-radial-gradient(circle, white, black, black);

    width: 60%; 
    height: 60%; 
    transform: translate(-50%, -50%);

   
}



@keyframes gradient {
  0% {
    background-position: 90% 50%;
  }
  50% {
    background-position: 10% 50%;
  }
  100% {
    background-position: 90% 50%;
  }
}

h1{
  text-align: center;
    position:absolute;
  color: black;
margin: auto;
    z-index:10;
    width: 80%;
    left: 10%;

}

p{
  transition: 0.3s;
}

p:hover{
  color: grey;

}

.een{
    position:absolute;
    width: 20%;
  z-index:10;
-moz-animation:een 30s  linear infinite;
-webkit-animation:een 30s  linear infinite;
}
@keyframes een{
    0%   {right:20%; top: 20%;}
    50%  {right: 80%; top: 60%;}
  100% {right:20%; top: 20%;}
}

.negen{
    position:absolute;
  z-index:10;
-moz-animation:negen 30s  linear infinite;
-webkit-animation:negen 30s  linear infinite;
}
@keyframes negen{
    0%   {right:70%; top: 25%;}
    50%  {right: 50%; top: 40%;}
  100% {right:70%; top: 25%;}
}


.twee{
    position:absolute;
   width: 20%;
  z-index:10;
-moz-animation:twee 30s  linear infinite;
-webkit-animation:twee 30s  linear infinite;
}
@keyframes twee{
    0%   {right:30%; top:30%;}
    50%  {right: 20%; top:10%;}
  100% {right:30%; top:30%;}
}

.ten{
    position:absolute;
    width: 20%;
  z-index:10;
-moz-animation:ten 30s  linear infinite;
-webkit-animation:ten 30s  linear infinite;
}
@keyframes ten{
    0%   {right:80%;top:35%;}
    50%  {right: 20%;top:10%;}
  100% {right:80%;top:35%;}
}

.drie{
    position:absolute;
    width: 20%;
  z-index:10;
-moz-animation:drie 30s  linear infinite;
-webkit-animation:drie 30s  linear infinite;
}
@keyframes drie{
    0%   {right:70%;top:40%;}
    50%  {right: 30%;top:80%;}
  100% {right:70%;top:40%;}
}

.vier{
    position:absolute;
    width: 20%;
    
  z-index:10;
-moz-animation:vier 30s  linear infinite;
-webkit-animation:vier 30s  linear infinite;
}
@keyframes vier{
    0%   {right:60%;top:50%;}
    50%  {right: 10%;top:40%;}
  100% {right:60%;top:50%;}
}

.vijf{
    position:absolute;
    width: 20%;
  z-index:10;
-moz-animation:vijf 30s  linear infinite;
-webkit-animation:vijf 30s  linear infinite;
}
@keyframes vijf{
    0%   {right:20%; top: 60%;}
    50%  {right: 60%;top: 30%;}
  100% {right:20%;top: 60%;}
}


.zes{
    position:absolute;
   width: 20%;
  z-index:10;
-moz-animation:zes 30s  linear infinite;
-webkit-animation:zes 30s  linear infinite;
}
@keyframes zes{
    0%   {right:80%; top:70%;}
    50%  {right: 40%; top:80%;}
  100% {right:80%; top:70%;}
}


.zeven{
    position:absolute;
    width: 20%;
  z-index:10;
-moz-animation:zeven 30s  linear infinite;
-webkit-animation:zeven 30s  linear infinite;
}
@keyframes zeven{
    0%   {right:40%;top:80%;}
    50%  {right: 80%;top:20%;}
  100% {right:40%;top:80%;}
}

.acht{
    position:absolute;
    width: 20%;
  z-index:10;
-moz-animation:acht 30s  linear infinite;
-webkit-animation:acht 30s  linear infinite;
}
@keyframes acht{
    0%   {right:20%;top:90%;}
    50%  {right: 40%;top:30%;}
  100% {right:20%;top:90%;}
}