:root{
    --primary-color: #c95c7a;
    --secondary-color: #d6b3b1;
    --bg: #c6d8c0;
    --text-size: 1.5 rem; /*Rem respeta el tamaño de la fuente origen*/
    --color-text: #231b42;
    --color-bg: #e6e1cd;
}

body{
    font-family: "Parkinsans", sans-serif;
    /*background-color: var(--bg);*/
    background: rgb(198,216,192);
    background: linear-gradient(0deg, rgba(198,216,192,1) 30%, rgba(230,225,205,1) 100%);
    height: 100 vh; /*Viewport height*/
    color: var(--color-text);
    display: flex;
    justify-content: center;
}

.container{
    max-width: 80%;
    width: 400px;
    height: 600px;
    margin: 0 auto; /*Arriba y Abajo, Derecha e Zzq*/
    padding: 40px;
    background-color: var(--secondary-color);
    border-radius: 10px; 
    overflow-y: auto; /*Habilita scroll dentro de la cajita/*
}

.header{
    padding: 10px 0 5px 0; /*Arriba Derecha Abajo Izq*/
}

.add{
    background-color:var(--primary-color);
    border-radius: 15px;
    height: 70px;
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 40px;
}

.add input{
    width: 100%;
    height: 100%;
    border:none;
    border-radius: 8px;
    background-color: var(--color-bg);
    padding-left: 10px;
    font-size: 18px;
    font-family: "Parkinsans", sans-serif;;
    color: var(--color-text);
}

#input::placeholder{
    color: gray;
}

.add i{
    font-size: 45px;
    color:var(--color-text)
}

.add i:hover{
    transform: scale(1.1);
    cursor: pointer;
}

.tasks h2{
    margin-bottom: 10px;
}

.tasks i:hover{
    color: var(--primary-color);
}

#list{
    font-size: 15px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.task-item {
    background-color: var(--color-text);
    border-radius: 10px;
    padding: 8px;
    color: var(--color-bg);
    margin-bottom: 5px;
    display: flex;
    align-items:center;
    justify-content: space-between;
}

.crossed_off{
    text-decoration: line-through;
    color: var(--primary-color);
}

.bi-record-circle{
    color: var(--primary-color);
}

.bi-x{
    font-size: 20px;
}