.centre-div
{
     margin: 0 auto;
     width: 800px; 
     padding: 10px;
}


@keyframes flash {
  0%   {background-color:red;}
  25% {background-color: white; color: red;}
  50% {background-color:green; color:white; border:2px solid green;}
  75% {background-color: white; color: red;}
  100% {background-color: red; color: white;}

}

@keyframes borderflash {
  0%   {border: 2px solid red;}
  25% {border: 8px solid red;}
  50%  {border: 2px  solid red;}
  75% {border: 8px solid red;}
  100%  {border: 2px solid red;}
}

/* Button */
.song-button {
    background-color: red;
    font-size:56px;
    border-radius: 8px;
    width:800px;
    height:300px;
    border: 2px solid red;
    color:white;
    font-family: 'Mountains of Christmas', cursive;
    display: none;
    animation-name: flash;
    animation-duration: 8s;
    animation-iteration-count: infinite;

}

.hello-button {

    background-color: red;
    border: 2px solid red;
    font-size:56px;
    border-radius: 8px;
    width:800px;
    height:300px;
    color:white;
    font-family: 'Mountains of Christmas', cursive;
    animation-name: flash;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}


.details-button {
    background-color: white;
    font-size:48px;
    border-radius: 8px;
    width:800px;
    height:600px;
    color:red;
    border: 2px solid red;
    font-family: 'Mountains of Christmas', cursive;
    display: none;
    animation-name: borderflash;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

/* The element to apply the animation to */