*{
    padding: 0;
    margin: 0;
}

body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header{
    background-color: #333;
    color: white;
    padding: 24px;
    font-size: 1.5rem;
}

.container{
    display: flex;
}

nav, main {
    padding: 20px;
}

nav{
    width: 230px;
    height: 100vh;
    background-color: #DDD;
}

h2{
    font-size: 2rem;
    padding-bottom: 16px;
}

.nav-btn{
    margin-bottom: 2px;
    width: 100%;
    font-size: 1rem;
    text-align: left;
    padding: 12px 8px;
    border: none;
    border-radius: 5px;
    background-color: #DDD;
}

.nav-btn:hover{
    background-color: #CCC;
    cursor: pointer;
}

.active{
    background-color: #CCC;
}

main{
    width: 800px;
}

.add-item, .item{
    width: 100%;
    font-size: 1rem;
    text-align: left;
    padding: 10px 8px;
    border: none;
    border-radius: 5px;
    background-color: white;
}

.add-item{
    margin-top: 8px;
}

.add-item:hover{
    background-color: #DDD;
    cursor: pointer;
}

.item-btn {
    font-size: 1.3rem;
    border: none;
    border-radius: 5px;
    background-color: white;
}

.item-btn:hover{
    cursor: pointer;
}

.item{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task{
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-input{
    display: flex;
    align-items: center;
    gap: 8px;
}

#add-input{
    display: none;
}

.add-box{
    padding: 5px 10px;
    border-radius: 5px;
    margin: 8px 0 8px 8px;
    width: 100%;
    font-size: 1rem;
}

.add-btn{
    background-color: #DDD;
    padding: 5px;
    font-size: 1rem;
}

.add-btn:hover{
    background-color: #CCC;
}

#list-input{
    display: none;
}