Demo.css

html{
    background-color:whitesmoke;
}
body{
	font-family: "Segoe UI",Arial,sans-serif;
    width: 50vw;
    margin-left: auto;
    margin-right: auto;
    min-width: 500px;
    background-color:white;
    margin-top:2em;
    padding-left:1em;
    position:relative;
}
h1{margin-top:0;text-align:center;}
.c{
  	font-family: "Convergence","Segoe UI",Arial,sans-serif;
}
p > span.c, p>input{position:absolute; right:1em;}
b{color: #004E00;}
span.pre{font-family: monospace;}
body > a{float:right; font-size:80%;}
.cnt-task{border-bottom:1px solid red;border-top:1px solid red;}
.box{
    min-height:40px;
    min-width:80%;
    margin: 16px auto;
}
.transi{transition: all 1s linear 0s;}
.rot{
    -webkit-transform: rotate(45deg); 
     transform: rotate(45deg);
}
.round{
    -webkit-transform: rotate(45deg); 
     transform: rotate(45deg);
    border-radius:50%;
}
.border{
    border:1px solid black;
    padding:5px;
    min-width:16px;
    height:16px;
    background-color:sandybrown;
    box-shadow:inset 1px 1px 1px orange;
}
.task{
    height:auto !important;
}
.dashy{
    padding-top:8px;
    border-bottom:1px dashed gray;
    border-top:1px dashed gray;
    display:flex;
    justify-content: space-between;
}
.flex{
	display:flex;
	flex-wrap:wrap;
}
.w100{width:100%;margin-left:1em;}
.w100 > p{margin:0;}
.cent{
    text-align:center;
}
.yellow{
    background-color:yellow;
}