body{
  width: 100%;
  height: 100%;
  background-color: red;
  animation-name: bgColorChange;
  animation-duration: 10s;
  animation-iteration-count: infinite;

}

h1{
   
  animation-name: example2;
  animation-duration: 10s;
    text-align: center;
    animation-iteration-count: infinite;
}
.btn{
  width: 150x;
  height: 50x;
  color: aqua;
}

.butt {
  display: inline-flex;
  align-items: center;
  border: none;
  flex-direction: column;
}
.tab {
  display: flex;
  align-items: flex-start;
  border: none;
  flex-direction: column;
  padding: 20px 20px;
}


    
 #btn1 {
    background-color: blue;
    float: middle;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    color: green;
    position: absolute;
    left: 250px;
    top: 300px;
}
#btn2 {
  background-color: black;
  float: middle;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  color: white;
  position: absolute;
  left: 200px;
  top: 200px;

}



@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
  to {background-color: rgb(223, 10, 10);}
  
}
  
  
@keyframes bgColorChange {
  0%   { background-color: red; }
  50%  { background-color: yellow; }
  100% { background-color: red; }
}