css.css

header, main, footer{
    margin: 10px;
}

.container{
    width: 855px;
    margin: 10px auto;
}

.todos-dones{
    margin-top:35px;
}
.todos-dones ul{
    border-left: 2px solid gray;
    border-right: 2px solid gray;
    border-bottom: none ;
    border-top: none;
    margin:3px;

}

.todos-dones ul li input{
    width: 20px;
    height: 20px;
}

.container h1{
    text-align: center;
}
.todo-input, .add-btn{
    height: 50px;
}
.todo-input{
    width: 520px;
    background-color: #FAEBD7;
    font-size: 2em;
    font-family: monospace;
    color: coral;
    text-align: center;
    border-radius: 10px;
}
.todo-input:focus, select:focus{
    border-radius: 10px;
    border-color: beige;
    background-color: #faebd1;
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

.add-btn{
    float:right;
    width: 255px;
    text-align: center;
    text-decoration: underline;
    color: wheat;
    background-color: darkseagreen;
    font-family: serif bold;
    font-size: 2em;
    border-radius: 10px;
    box-shadow: gray;
}

.container .todo{
    float:left;
    width: 300px;
    margin: 0px auto;
}

.container .done{
    float: right; width: 300px;
    margin: 0px auto;
}

.todo li, .done li{
    list-style: none;
    margin:3px;
}

.todo li label , .done li label{
    font-size: 35px;
        color: darkgoldenrod;
    background-color: beige;
}

.done li label{
    text-decoration: line-through;
    color: darkgray;
}

fieldset{
    border: 5px solid bisque;
}
legend{
    color: gray;;
}

.todos-text{
    text-align: center;
}

.dones-text{
    float:right;
}

.validation{
    width: 200px;
    z-index: 8000000;
    background-color: rgb(239, 229, 245);
    margin: 40px;
    padding: 1px;
    border-radius: 35px;
    position: absolute;
    top: 100px;
    left: 525px;
}
.validation main{
    background-color: pink;
    border-radius: 35px;
}

.validation main p{
    color:darkred;
    margin:2px;
    text-align: center;
    border-radius: 2px;
}