:root {
    --bg-color: #4fac79;
    --fg-color: white;
}

* {
    box-sizing: border-box;
}
h1{
    font-family: monospace;
    text-align: center;
}
body{
     font-family: Arial,  sans-serif;
     background-color: #4fac79;
     color: white;
     font-size: 30px;

}

.controls {
    text-align: center;
    margin: 0 auto;
}

.list{
    margin-top: 0vw;
    margin: 0.9vw;
   
}

input {
    width: 400px;
    background-color: rgb(125, 221, 192);
    color: palevioletred;
    box-shadow: none;

}

#mybutton{
    font-size: 20px;
    font-family: monospace;
    background-color: white;
    color: rgb(144, 223, 26);
    border-radius: 0.75vw;
    position: relative;
    padding: 1.1vw;
    width: 6vw;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition-duration: 0.5s;
}

#mybutton:hover {
    background-color: rgb(228, 169, 228);
    color: rgb(98, 226, 156)
}


#todo, #done {
    /*border: solid 1px white;
    border-radius: 10px;*/
    min-width: 300px;
    margin: 10px 0px 0px;

}
.doneitem{
    text-decoration: line-through;
}

.flex-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;     /*check this*/
}