#make-it-good-container {
background: #fff;
padding: 15px;
border: 0px solid #ddd;
width: auto;
margin: 20px auto;
text-align: center;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.make-it-good-btn {
display: inline-block;
font-weight: bold;
font-size: 20px; color: #fff;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, .5);
user-select: none;
padding: 20px 50px;
border: 1px solid #0073aa;
border-radius: 10px;
outline: none;
background: #0073aa linear-gradient(#0073aa, #0073aa 80%);
box-shadow:
0 6px #003249,
0 3px 15px rgba(0,0,0,.4),
inset 0 1px rgba(255,255,255,.3),
inset 0 0 3px rgba(255,255,255,.5);
transition: .0s;
cursor: pointer;
}
.make-it-good-btn:hover {
background: #0073aa linear-gradient(#005177, #0073aa 80%);
}
.make-it-good-btn:active {
background: #005177 linear-gradient(#005177 20%, #0073aa);
box-shadow:
0 2px #003249,
0 1px 6px rgba(0,0,0,.4),
inset 0 1px rgba(255,255,255,.3),
inset 0 0 3px rgba(255,255,255,.5);
-webkit-transform: translate(0, 4px);
transform: translate(0, 4px);
}
.loading-window, .final-message-window, .positive-wish-window {
display: none;
text-align: center;
padding: 20px;
}
.loading-bar-container {
position: relative;
width: 100%;
height: 20px;
background-color: #ddd;
border-radius: 3px;
}
.loading-bar {
width: 0;
height: 100%;
background-color: gray; transition: width 0.1s ease;
border-radius: 3px;
}
.loading-bar.filling {
background-color: #0073aa; }
#loading-percentage {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-weight: bold;
color: #fff;
line-height: 20px; }
.final-message-window h2 {
font-size: 24px;
margin-bottom: 10px;
}
.final-message-window p {
font-size: 18px;
color: gray;
}
.positive-wish-window {
font-size: 20px;
font-weight: bold;
color: #1e7e34;
margin-top: 0px;
border: 1px solid #ddd;
border-radius: 8px;
}