@keyframes bell {
  from {color: red;}
  to {color: green;}
}
body {
  background: url(art.jpg) left top repeat;
}
p {
  animation-name: bell;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;
  text-align: center;
  text-shadow: 1px 1px black;
}
h1 {
  animation-name: bell;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  text-align: center;
  text-shadow: 2px 2px black;
}
.container {
  text-align: center; 
}
button {
  text-shadow: 1px 1px white;
  background: url(bck.jpg) repeat;
  padding: 4px;
  transition: padding 0.5s;
}
button:hover {
  padding: 16px;
  transition: padding 0.25s;
}
img {
  display: block;
  margin: auto;
  width: 15%;
}
audio::-webkit-media-controls-panel {
  background-color: green;
  transition: background-color 0.25s;
}
audio::-webkit-media-controls-panel:hover {
  transition: background-color 0.25s;
  background-color: red;
}
audio {
  width: 15%;
  transform: scaleY(0.25);
  transition: transform 0.25s;
  }
audio:hover {
  width: 25%;
  transform: scaleY(1);
  transition: transform 0.25s;
  }