.light {
    --primary-color: #FCFC30;
    --secondary-color: #465EFF;
    --caixa: #1D2870;
    --shadow: #A6A603;
    --dark: black;
    --light: white;
}

.dark {
    --primary-color: #BBBBBB;
    --secondary-color: #000000;
    --caixa: #757575;
    --shadow: #a0a0a0;
    --dark: white;
    --light: black;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif, icomoon;
}

/*
Customization

Fill: 0 ou 1

Weight: entre 100 e 700

Grade: entre -25 (low) e 200 (high emphasis)

Optical size: entre 20px e 48px

Tipos: Outlined, Rounded, Sharp.
*/

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 500,
  'GRAD' 200,
  'opsz' 48
}

/*
span.material-symbols-outlined {
    font-size: 2rem;
} */

body {
    background-color: var(--secondary-color);
    font: bold 1.5rem 'Open Sans', sans-serif;
}

.todo {
    display: flex;
    width: 80vw;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    gap: 15px;
}

.todo_title {
    display: flex;
    background-color: var(--primary-color);
    height: 50px;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    color: var(--secondary-color);
    box-shadow: 0px 2px var(--shadow);
}

header button {
    background-color: var(--primary-color);
    border: none;
    color: var(--secondary-color);
    padding: 0 8px;
}

.menu_lateral {
    z-index: 10;
    position: absolute;
    left: -100vw;
    width: 40vw;
    height: 100vh;
    background-color: var(--primary-color);
    display: flex;
    flex-direction: column;
    transition: .4s;
}

.menu_lateral-ativo {
    left: 0;
    transition: .4s;
}

.menu_lateral a {
    padding: 10px;
    color: var(--secondary-color);
}

.todo_item {
    display: flex;
    width: 88vw;
    justify-content: space-between;
    padding: 8px;
    box-shadow: 1px 1px 5px var(--primary-color);
    color: var(--primary-color);
    margin: 10px 0 ;
    align-items: center;
}

.todo_item > div {
    width: 80%;
}

.todo_item:hover {
    cursor: pointer;
    transition: all .5s ease;
    background-color: var(--primary-color);
    color: var(--secondary-color);
}


.todo_item > input[type='text'] {
    border: none;
    width: 80%;
    font: inherit;
}

.todo_item > input[type='button'],
.todo_item > input[type='checkbox'] {
    width: 35px;
    height: 35px;
    font: inherit;
    color: red;
    background-color: var(--primary-color);
    margin: 0 5px
}


.todo_item > input[type='checkbox']:checked  + div {
    text-decoration:line-through;
}

.todo_new_item{
    display: flex;
    background-color: var(--caixa);
    width: 100%;
    height: 70px;
    justify-content: space-evenly;
    padding: 10px 0;
    box-shadow: 1px 1px 5px var(--secondary-color);
    margin: 10px;
    font: inherit;
    font-size: 1rem;
    color: var(--light);
}

.todo_new_item > input{
    background-color: var(--secondary-color);
    border: none;
    width: 80%;
    outline: none;
    font: inherit;
    text-align: center;
    font-size: 1.5rem;
    color: var(--dark);

}

.todo_new_item > input::placeholder {
    font-style: italic;
    font-weight: normal;
}

@media (max-width: 500px) {
    
    .menu_lateral {
        width: 75vw;
    }

}