body {
    margin: 0px;
}

.main {
    width: 100vw;
    max-width: 1920px;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
    background-color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.header {
    padding-top: 3vh;
    height: 20vh;
    background-color: #6e2be2;
    text-align: center;
    color: #c9c9c9;
    font-size: 3rem;
    font-weight: bold; 
}

.list-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background: rgb(252, 252, 252);
}

.list-action-container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 2vh;
   padding-left:0;
}

.list-action {
    background-color: rgb(214, 213, 213);
    list-style: none;
    font-size: 1.1rem;
    border-radius: 0.5em;
    border-style:solid;
    border-width: 1px;
    padding:1vh;
}

.list-action:hover {
    background-color: white;
    border-color: gray;
    cursor: pointer;
}

.list-item {
   border: dotted 1px;
    border-radius:0.7em;
    margin: 1vh 2vh;
    padding: 1vh;
    display:flex;
}

.list-item .item-name {
    margin-left:1.5vh;
    flex:3
}

.list-item button {
    margin: 0.3em;
    font-size: 0.7em;
    height: fit-content;
    align-self: center;
    cursor: pointer;
}

.list-item #item-action-remove::before {
    content:'🗑';
}

.list-item #item-action-done::before {
    content:'🗸';
}

.list-item[data-state="true"] {
    opacity: 0.3;
    text-decoration: line-through;
}

.list-item[data-state="true"] #item-action-done {
    background-color: gray;
}

.list-item#new-item {       
    background-color:#bdeebd; 
}

.list-item#new-item input {       
    font-size: 1.5rem; 
    padding: 0 1vh;
    border-radius: 0.25em;
}

.hidden {
    display: none;
}