body {
    background-color: cornsilk;
    font-family: Barlow; color:midnightblue; font-size:30px; font-weight:lighter"
}

div {
    /* animation properties */
    animation-name: squash-stretch;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    
    /* other properties */
    width: 200px;
    height: 100px;
    border-radius: 50px;
    position: absolute;
    left: 0; 
    right: 0; 
    margin-left: auto;
    margin-right: auto; 
  }
  
  @keyframes squash-stretch {
    from {
      background-color: #ccccff;
      width: 50px;
      top: 75px;
    }
    to {
      background-color: rgb(18,0,48);
      width: 400px;;
      top: 500px;
    }
  }