html {
  height: 100%;
}

body {
  /*background-image: radial-gradient(circle, #ff6633 20%, #602870);*/
  background: rgba(255,255,255,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(240,240,240,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=1 );
  min-height: 80%;
  color:#621950;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 40px;

}
h3 { color: #144adc}

h1, h2,h3,h4 {
  font-family: 'Comfortaa', cursive;
}
h4 {
 
  font-size: 14px;
  margin-bottom: 5px;
  text-align: center;
  color:#8d118f;
 
}
i {
	color:#144adc;	
}

p {
  font-family: 'Comfortaa', cursive;
  font-size: 16px;
  
}

.progress-bar {
  align-self: center;
  height: 7px;
  width: 45%;
  position: relative;
  background: #8d118f;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  padding: 5px;
  margin-top: 5px;
  box-shadow: 1px 0 7px  #a0d8ff;
}

.progress-bar span {
  width: 65%;
  display: block;
  height: 100%;
    -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  background-color: #FFF;
  
}