body{
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    /* Created with https://www.css-gradient.com */
    background: #244EA8;
    background: -webkit-linear-gradient(right, #244EA8, #C0CDF7);
    background: -moz-linear-gradient(right, #244EA8, #C0CDF7);
    background: linear-gradient(to left, #244EA8, #C0CDF7);
}
.container{
    padding: 50px 15px;
}
h2 {
  margin-top: -24px;
  margin-left: 18px;
}
img {
  width: 50%;
  height: auto;
}
#myProgress {
    width: 100%;
    background-color: grey;
    border-radius: 25px;
    border: 2px solid black;
  }
  
  #myBar {
    width: 0%;
    height: 30px;
    border-radius: 25px;
    background-color: green;
  }
  button{
    font-size:24px;
    border:none;
    padding:16px 40px 16px 40px;
    border-radius:5px;
      box-shadow:0px 10px 0px 0px #1d7f8a, 
        0px 0px 10px 0px rgba(120, 120, 120, 0.4);
    color:white;
    background:#239dab;
    cursor:pointer;
    transition:all 0.16s;
    position:relative;
    top:0;
  }
  button:focus{
    outline:none;
  }
  button:active{
    box-shadow: 0px 5px 0px 0px #1d7f8a;
    top:5px;
  }
  
  .loading-button.red{
    background:#d03651;
    box-shadow:0px 10px 0px 0px #a72b41,
      0px 0px 10px 0px rgba(120, 120, 120, 0.4);;
  }
  
  .loading-button.red:active{
    box-shadow: 0px 5px 0px 0px #a72b41;
  }
  
  .loading-button.green{
    background:#61a74b;
    box-shadow:0px 10px 0px 0px #4e883c,
      0px 0px 10px 0px rgba(120, 120, 120, 0.4);;
  }
  
  .loading-button.green:active{
    box-shadow: 0px 5px 0px 0px #4e883c;
  }