tasklist.css

* {
    margin: 0;
    padding: 0;
    font-family: 'Cutive Mono';
}

body {
    background-color: rgb(204,254,254);
}

.header , .footer {
    height : 100px;
    width : 100%;
    text-align: center;
}

nav li {
    display : inline-block;
    list-style: none;
    margin : 10px;
    cursor : pointer;
}

button {
    margin : 2px;
    padding : 2px;
    float : right;
    cursor: pointer;
    margin: -3px 2px 2px;
}

.row {
    padding: 10px 10px;
    margin : 5px auto;
    clear : both;
}

.task.row {
    cursor: pointer;
}

.milestone.row:before {
    content: "☢ ";
}

#data-container {
    margin : 5px auto;
    width : 80%;
}

.task-name {
    font-weight: bold;
}

#show-add-task-button {
    display: block;
    float: none;
    font-weight: bold;
    margin: auto;
    font-size: 1.2em;
}

.show-milestone-form-button {
    font-weight : bold;
}

#add-task-form {
    position : fixed;
    top : 100px;
    width : 300px;
    padding : 20px;
    background-color: rgb(250,250,250);
    left : calc(50% - 100px);
    text-align: center;
}

#add-task-form button {
    float : none;
}

/* colors */
.green {
    background-color : rgb(150, 250, 150);
}
.light-blue {
    background-color : rgb(170, 220, 250);
}
.blue {
    background-color : rgb(150, 150, 250);
}
.orange {
    background-color : rgb(250, 180, 120);
}
.red {
    background-color : rgb(250, 10, 10);
}
.gold {
    background-color: gold;
}