/* Code by https://github.com/marcus-aastum */
/* Site can be reached at https://todolist.aastum.no */

/* ---Universal styling--- */
*{
    font-family:  Helvetica, sans-serif;
}
body{
    background-color: navy;
}
#appcontent{
    background-color: white;
    width: 40%;
    padding: 5vh;
    border-radius: 25px;
    text-align: center;
    margin: auto;
    margin-top: 10vh;
}

/* --Form to add tasks--- */
#listItemContent{
    border-radius: 100px;
    padding: 2vh;
    width: 30vh;
}
button, #submitListItem{
    background-color: rgb(255, 68, 0);
    color: white;
    border-radius: 5px;
}
#submitListItem{
    font-size: 1.5em;
    border-radius: 100px;
    height: 2em;
    width: 2em;
    vertical-align: middle;
}


/* ---List element (task)--- */
ul {
    padding: 0%;
}

li{
    list-style-type: none;
    position: relative;
    text-align: center;
    width: 100%;
    padding-bottom: 0.5vh;
    padding-top: 0.5vh;
    padding-right: 1vh;
    padding-left: 1vh;
}
li button{
    right: -1vh;
    background-color: rgb(255, 68, 0);
    color: white;
    border-radius: 5px;
    vertical-align: middle;
}
li button:hover, #submitListItem:hover{
    background-color: rgb(206, 55, 0);
}
li input{
    left: -1vh;
    vertical-align: middle;
}
p {
    display: inline-block;
    width: 80%; 
}
.checkbox {
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    width: 1.4em;
    height: 1.4em;
    border: 0.10em solid black;
    border-radius: 10em;
  }
.checkbox:hover{
    background-color: #ddd;
}
.checkbox:checked{
    background-color: rgb(255, 68, 0);
}
.checkbox:checked:hover{
    background-color: rgb(206, 55, 0);
}


/* ---Styling for responsiveness--- */
@media (max-width: 1100px) {
    #appcontent{
        width: 80%;
    } 

}
@media(max-width: 495px){
    p{
        width: 100%;
    }
    li{
        border-bottom: 0.1em solid #eee;
    }
}