a {
    color: hsl(185,25%,25%);
}

body{
    margin:0;
    font-family: Gentium, Times, serif;
    background-color: hsl(185,25%,90%);
    min-height:100%;
}

.list{
    margin-left: 2%;
    margin-right:2%;
    max-width: 100%;
}

.listname{
    font-weight: bold;
}

.listdesc{
    margin-left:1ch;
    margin-bottom:1ex;
    width:40ch;
}

.listel{
    display:flex;
}

.listhead{
    margin-left:-1%;
    padding-top:1ex;
    font-size:larger;
}

.headerbar {
    margin:0;
    padding:1%;
    background: linear-gradient(180deg, hsl(185,25%,30%), hsl(185,25%,40%));
}

img.contained{
    height:15%;
    object-fit:scale-down;
    
}

.progress{
    display:flex;
    margin-left:20%;
    margin-right:20%;
    justify-content:center;
    margin-top:1ex;
    margin-bottom:1ex;
    border-radius:1ex / 2ex;
    background: linear-gradient(180deg, hsl(185,25%,40%), hsl(185,25%,50%), hsl(185,25%,40%));
}

.current{
    font-weight: bold;
    color: hsl(185,25%,90%);
}

.future{
    font-weight: lighter;
    color: hsl(185,25%,25%);
}

.past{
    font-weight: lighter;
    color: hsl(185,25%,25%);
}

.maincontent{
    padding:1%;
    min-height:60%;
    align-content: center
}

.footerbar{
    display:flex;
    margin:0;
    width:100%;
    background: linear-gradient(180deg, hsl(185,25%,40%), hsl(185,25%,30%));
    min-height: fill-available;
    justify-content:space-between;
    align-items:flex-start;
}

.license{
    align-self:flex-end;
}

.button{
    margin-left:4%;
    margin-top:2ex;
    box-shadow: 0.3ex 0.3ex hsl(185,25%,20%);
    border-radius:1ex / 2ex;
    background: linear-gradient(180deg, hsl(185,25%,40%), hsl(185,25%,50%), hsl(185,25%,40%));
}

input.number{
    width: 10ch;
    text-align:center;
    border: double hsl(185,25%,20%);
}

section{
    max-width:100ch;
}

img{
    max-width:75ch;
}