html{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #f1f1f1;
    background: #171717;
    color-scheme: dark;
}

.main-content{
    text-align: center;
    width: 40%;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.main-content > div{
    margin-top: 2rem;
    margin-bottom: 2rem;
}

button {
    margin: 0 1px;
    white-space: nowrap;
    margin: 0 1px;
    padding: 10px;
    transition: border 0.25s linear 0s, color 0.25s linear 0s, background-color 0.25s linear 0s;
    cursor: pointer;
    background: #272727;
    border: hidden;
    border-radius: 5px;
    color: #fff;
}

button:hover {
    background: #383838 !important;
  }

.content-div{
    text-align: center;
}

.content-div > *{
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
}

.progress {
    max-width: 500px;
    width: 80%;
    border: 1px solid black;
    border-radius: 20px;
    position: relative;
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
}

.percent {
    position: absolute;
    left: 47%;
}

.bar {
    height: 20px;
    background: linear-gradient(to right, rgba(20, 78, 109, 1), rgba(200, 32, 45, 1));
    width: 0%;
    border-radius: 20px;
}