:root {
    --violeta: #CDB4DB;
    --purple: #C586DD;
    --pink: #FFC8DD;
    --hot-pink: #ffafcc;
    --soft-pink: #ffe5ec;
    --white: #ffffff;
    --black: #000000;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: system-ui, "Segoe UI", "Open Sans", "Helvetica Neue", sans-serif;
    background-color: var(--soft-pink);
}
header {
    color: var(--black);
    background-color: var(--violeta);
    display: flex;
    justify-content: center;
    font-size: 30px;
    height: 90px; 
    border-radius: 30px;
    margin: 20px;
}
textarea[name="user-input"] {
    color: var(--black);
    background-color: var(--hot-pink);
    border-color: var(--hot-pink);
    display: grid;
    justify-content: center;
    height: 150px;
    width: 600px;
    border-radius: 10px;
    margin: auto;
    margin-top: 10px;
}
#reset-button {
    color: var(--black);
    background-color: var(--violeta);
    border-color: var(--pink);
    display: block;
    justify-content: center;
    font-size: 20px;
    height: 40px;
    width: 120px;
    border-radius: 10px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
#reset-button:hover{
    color: var(--white);
    background-color: var(--purple);
}
ul {
    display: flex;
    justify-content: center;
    gap: 10px; 
}
.contador {
    white-space: nowrap;
    padding: 10px;
    color: var(--black);
    background-color: var(--hot-pink);
    border-radius: 15px;
    width: 400px;
    list-style: none;
}
footer {
    color: var(--black);
    background-color: var(--violeta);
    display: grid;
    justify-content: center;
    border-radius: 10px;
    margin: 200px;
}