* {margin:0;
    padding:0;
    box-sizing:border-box
}

html,body{font-size:16px;
    font-family:"Montserrat",sans-serif;
    color:#000;
    width:100%;
    min-height:100%;    
}

@media only screen and (min-width: 768px){
    html,body{font-size:22px}
}


body{ padding:20px;
    background-color:#D7CEC7;
    overflow-x: hidden !important;
}

section{background-color:#f2f2f2;
    width:90%;
    max-width:700px;
    margin:auto;
    border:1px solid #000;
    border-radius:10px}

.button{width:15%;
    min-width:48px;
    min-height:48px;
    color:#fff;
    border:2px solid #d3d3d3;
    border-radius:10px;
    outline:none
}

.button:hover{cursor:pointer
}

.button:hover,.button:focus{filter:brightness(120%); 
    box-shadow:4px 2px 5px #000}
    
.newItemEntry{position:sticky;
    top:0;
    margin-bottom:1rem;
    padding:.75rem
}
    
.newItemEntry form{display:flex;
    justify-content:space-between
}
    
.newItemEntry form label{position:absolute;
    left:10000px;
}
    
.newItemEntry form input[type=text]{width:80%;
        font-size:1.25rem;
        border:2px solid #d3d3d3;
        border-radius:10px;padding:.75rem;
        outline:none
}

.newItemEntry form input[type=text]:focus,
.newItemEntry form input[type=text]:hover{
    box-shadow:4px 2px 5px #000
}

.newItemEntry form button{
    font-size:1.25rem;
    background-color:#4caf50;
    padding:.75rem
}

@media only screen and (min-width: 768px){
    .newItemEntry form button{font-size:1.5rem}
}

.listContainer{min-height:60vh;
                padding:.75rem;
}

.listContainer .listTitle{display:flex;
       justify-content:space-between;
       align-items:flex-end
}

.listContainer .listTitle button{font-size:1rem;
    background-color:#9f6060;
    padding:0 .1rem;
    margin-bottom:.5rem;
}

@media only screen and (min-width: 768px){
    .listContainer .listTitle button{padding:0 .5rem}
}

.listContainer .listTitle hr{
    width:100%
}

.listContainer .item{display:flex;
    justify-content:flex-start;
    align-items:center;
    padding-top:1rem
}

.listContainer .item input[type=checkbox]{
    text-align:center;
    width:2.5rem;
    min-width:48px;
    height:2.5rem;
    min-height:48px;
    cursor:pointer;
    margin-right:1.5rem;
}

.listContainer .item input[type=checkbox]:focus+label{
    text-decoration:underline
}

.listContainer .item label{
    font-size:1.1rem
}

.listContainer .confirmation{
    position:absolute;left:-10000px
}