body{
    background-color:#E0c088;
}

h1{
    text-align: center;
    font-family: 'Nabla', cursive;
    font-size: 50px;
}

div {
    width: 100px;
    height: 100px;
    background-color: #fa7820;
    border-radius: 100px;
    position: relative;

    display: flex;
    -ms-flex-align: center;
    margin: auto;
  }

li{
    font-family: 'Rajdhani', sans-serif;
    text-align: center;
    font-size: 30px;
    color:#e8732e;

    background-color: #603830;
    width: 30%;
    display: block; 
    margin-left: auto; 
    margin-right: auto;

    animation-name: shape-title;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    animation-timing-function: ease; 

    margin-bottom: 5px;
}

.right {
    animation-name: move-right, color, shape, rotate;
    animation-iteration-count: 1, 6, 7, infinite;
    animation-duration: 3s, 3s, 3s, 3s;
    animation-timing-function: ease, ease, ease, linear; 
}

.left {
    animation-name: move-left, color, shape, rotate;
    animation-iteration-count: 2, 5, 8, infinite;
    animation-duration: 3s, 3s, 3s, 3s;
    animation-timing-function: ease, ease, ease, linear; 
}
.middle{
    animation-name: scale, color, shape, rotate;
    animation-iteration-count: 3, 4, 9, infinite;
    animation-duration: 3s, 3s, 3s, 3s;
    animation-timing-function: ease, ease, ease, linear; 
}
  
  @keyframes move-right {
    0%   { left: 0px; }
    50%  { left: 200px; }
    100% { left: 0px; }
  }
  @keyframes move-left {
    0%   { right: 0px; }
    50%  { right: 200px; }
    100% { right: 0px; }
  }
  @keyframes scale {
    0%   { scale: 1; }
    25%  { scale: 2;  }
    50%  { scale: 3; }
    75%  { scale: 2; }
    100% { scale: 1; }
  }
  
  @keyframes color {
    0%   { background: color #e8732e; }
    25%  { background-color:#207880;  }
    75% { background-color: #603830; }
    100%   { background: color #e8732e; }
  }

  @keyframes shape {
    from { border-radius: 0px; }
    to { border-radius: 100px; }
  }

  @keyframes shape-title {
    0% { width:0% }
    50% { width:50% }
    100% { width:0% }
  }
  
  @keyframes rotate {
      from { transform:rotate(0deg); }
      to { transform:rotate(360deg); }
  }
  
  body { margin: 30px; }
  p {margin-bottom: 50px; }