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

:root {
   --white: #fafafb;
   --purple:#9a67ea;
   --blue-light:#04d4c3;
   --blue-dark:#2a73c2;
   --green: #2c7b90;

}

body {
    background: linear-gradient(to bottom,var(--purple),var(--blue-light));
    height: 100vh;   
    font-family: 'Prompt', sans-serif;
}

.container {
    max-width: 100%;
    width: 350px;
    height: 550px;
    margin: 0 auto;
}


/*PERFIL*/



.perfil h2 {
    color: var(--white);
    padding: 50px 0 5px 0px;
}

.perfil span {
    color: var(--white);
    letter-spacing: 1px;
}

#fechanv a {
    color: var(--white);
}




/*AGREGAR TAREA*/

.agregar-tarea {
    background-color: var(--white) ;
    border-radius: 15px;
    height: 70px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    margin: 40px 0;
}

.agregar-tarea input {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: none;
    background-color: var(--white);
    padding-left: 10px;

}
.agregar-tarea input::placeholder {
   font-size: 1rem;
   color: var(--purple);
}

.agregar-tarea i{
    font-size: 50px;
    color: var(--purple);

}
.agregar-tarea i:hover {
    transform: scale(1.1);
    cursor: pointer;
}



/*SECCION DE TAREA */

.seccion-tarea h3 {
    color: var(--white);
    margin-bottom: 20px;
}

.seccion-tarea li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom,var(--blue-dark),var(--green));
    border-radius: 15px;
    padding: 10px;
    color: var(--white);
    margin: 5px 0;

}
.seccion-tarea i {
    font-size: 25px;
}

.seccion-tarea > ul p {
    font-size: 1.2rem;

}


.seccion-tarea i:hover {
    color: var(--blue-light);
    cursor: pointer;
}

.line-through{
    text-decoration: line-through;
    color : var(--blue-light);
} 

/* Estilos de Footer */
footer {
    background-color: var(--indigo);
    color: var(--white);
    padding: 10px 0;
    text-align: center;
}

footer p {
    font-size: 17px;
}

@media screen and (max-width: 480px) {
    .container {
        width: 100%;
        padding: 0 10px;
    }

    .agregar-tarea {
        flex-direction: column;
        gap: 10px;
        height: auto;
    }

    .agregar-tarea input {
        height: 40px; /* Adjust height for better mobile experience */
    }

    .seccion-tarea li {
        flex-direction: column;
        gap: 5px;
    }

    footer {
        font-size: 12px;
    }
}