style.css

.todo-container {
    width: 95%;
    max-width: 600px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.todo-centered{
    text-align: center;
}

.todo-row {
    position: relative;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.todo-row > * {
    display: inline;
    height: 100%;
    float: left;
}

.todo-height-default {
    height: 30px;
}

.todo-display-block {
    display: block;
}

.todo-margin-vertical {
    margin-top: 10px;
    margin-bottom: 10px;
}

.todo-max-width{
    width: 100%;
}

.todo-tasklist {
    width: 70%;
}

.todo-sidebar {
    width: 25%;
    position: relative;
    float: right;
}

.todo-button-default {

}

.todo-task {
    background-color: #b3e0ff;
}

.todo-task > input {
    float: right;
    cursor: pointer;
    border: none;
    background-color: inherit;
}

.todo-task > todo-task-title {
    font-weight: bold;
}

.todo-task > todo-task-description {
    display: block;
}

.todo-box-bordered {
    padding: 10px;
    margin-top: 10px;
    border: 1px solid black;
    box-sizing: border-box;
}

.todo-task-done{
    background-color: #e6e6e6;
}

.todo-hidden{
    width: 70%;
    display: none;
}

.todo-hidden > form > input, .todo-hidden > form > textarea {
    width: 100%;
}

.todo-hidden > form > input[type='submit'] {
    margin-top: 30px;
    width: 100px;
}

#input-form > p {
    font-weight: bold;
}

@media screen and (max-width: 450px) {
    .todo-tasklist, .todo-sidebar, .todo-hidden {
        width: 100%;
    }
}