html, body {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  body {
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
  }
  
  @keyframes gradient {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }

  .heading {
      color: white;
  }


  #inputCountry {
    margin-left: 20px;
}

#heading {
    text-align: center;
    font-size: 45px;
}

#subheading {
    font-size: 20px;
    margin-left: 20px;
}


#inputCountry {
    margin-left: 180px;
}

.box {
display: inline-block;
width: 540px;
grid-template-columns: 120px 120px 120px;
align-items: center;
justify-content: space-between;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
border-style: inset;
border-radius: 30px;
border-width: 5px;
border-color: black;
color: white;
font-size: 25px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#section {
    display: flexbox;
    text-align: center;
    font-size: 30px;
    color: yellow;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    border-style: inset;
    border-width: 5px;
    border-radius: 30px;
    border-color: black;
    display: inline-block;
    width: 540px;
    grid-template-columns: 120px 120px 120px;
    align-items: center;
    justify-content: space-between;
    padding: 1em;
    position: absolute;
    top: 85%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

#covid {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -35%;
    width: 100%;

}