#buton {
    background-color: bisque;
    border: 2px groove blueviolet;
    border-radius: 20px;
    border-style: ridge;
    position: relative;
    margin: 0 auto;
    left: 0;
    height: 100px;
    width: 100px;
    
}
#buton:hover{

    background-color: rgb(115, 115, 161);
    border-radius:45px;

    cursor: pointer;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.dis {
    background-color: aqua;
    background-attachment: fixed;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    width: 300px;
    margin-top: 200px;
    margin-left: 600px;
    padding: auto;
    animation: dis 10s infinite;
    border-radius: 45px;
    border-style: hidden;
  


}


.bul{
    top: 450px;
    text-align: center;  
    margin: auto;
    animation: sali 10s  infinite ;
position: relative;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: xx-large;
color: darkgoldenrod;




}


@keyframes dis    {
    0% {
        top: 0;
        left: 0;
    }


      25% {
        top: 0;
        left: 400px;
        transform: rotate(90deg);background-color: yellow;
        box-shadow: 20px 20px 400px 30px  red;
    }


      50% {
        top: 300px;
        left: 300px;
        transform: rotate(90deg);background-color: red;
        box-shadow: 20px 200px 400px 30px  yellow;
     }

      75% {
        top: 400px;
        left: 0;
        transform: rotate(-90deg); background-color: yellow;
        box-shadow: 200px 20px 400px 30px red ;
      }


      100% {
        top: 0;
        left: 0;
      }
}



@keyframes sali   {
    0% {
        top: 0;
        left: 0;
      }
      25% {
        top: 0;
        left: 400px;
       
      }
      50% {
        top: 300px;
        left: 300px;
        
      }
      75% {
        top: 400px;
        left: 0;
      
      }
      100% {
        top: 0;
        left: 0;
      }
}


.links{

  background-color: aqua;
  background-attachment: fixed;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 300px;
  margin-top: -450px;
  margin-left: 120px;
  padding: auto;
  animation: links 5s linear infinite;
  border-radius: 45px;
  border-style: hidden;
  display: flex;
 
  justify-content: center;
  

}






.rechtboven{

  background-color:aqua;
  background-attachment: fixed;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 300px;
  margin-top: -300px;
  margin-left: 1330px;
  padding: auto;
  animation: links 5s linear infinite;
  border-radius: 45px;
  border-style: hidden;


}




.rechtben{

  background-color: aqua;
  background-attachment: fixed;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 300px;
  margin-top: 360px;
  margin-left: 1330px;
  padding: auto;
  animation: links 5s linear infinite;
  border-radius: 45px;
  border-style: hidden;


}

.linksben{

  background-color: aqua;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  width: 300px;
  margin-top: 700px;
  margin-left:80px;
 
  animation: links 5s linear infinite;
  border-radius: 45px;
  border-style: hidden;
z-index: 1;

}














@keyframes links   {
  0% {
      top: 0;
      left: 0;
      transform: rotate(0deg) rgb(84, 84, 161);
      
  }


   


    100% {
      top: 0;
      left: 0;
      box-shadow: 0px 0px 0px 0px;
      transform: rotate(360deg)  ;
    }
}