body {
    background-image: url("fondo.png");
    background-size: cover;
}
.contenedor {
    width: 700px;
    margin: auto;
}
header {
    background: #75474A;
    color: #e8dbd3;
    height: 100px;
    width: 100%;
    margin: 0px;
    line-height: 100px;
    border-radius: 15px;
    text-align: center;
    font-family:'Courier New', Courier, monospace;
    font-size: larger;
}

textarea[name="user-input"] {
    background-color: #C5DFDC;
    width: 66%;
    margin: auto;
    border: 5px solid #F2C2C2;
    border-radius: 15px;
    padding: 50px;
    text-align: left;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: mediumpurple;
    
}
.metricas {
    margin: auto;
}
li {
    display: inline-block;
   
}
.characterCount::before {
    content: "Caracteres: ";
}
.characterCount {
    
    background-color: #bfa4a4;
    color: white;
    padding: 10px; 
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
    border-radius: 15px;
    border: 4px solid #f2c2c2;
    margin: 4px 2px;
}
.characterWOSpaces::before {
    content: "Caracteres sin espacios: ";
}
.characterWOSpaces {
    background-color: #bfa4a4;
    color: white;
    padding: 10px; 
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
    border-radius: 15px;
    border: 4px solid #f2c2c2;
    margin: 4px 2px;
}
.wordCount::before {
    content: "Palabras: ";
}
.wordCount {
    background-color: #bfa4a4;
    color: white;
    padding: 10px; 
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
    border-radius: 15px;
    border: 4px solid #f2c2c2;
    margin: 4px 2px;
}
.numberCount::before {
    content: "Números: ";
}
.numberCount {
    background-color: #bfa4a4;
    color: white;
    padding: 10px; 
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
    border-radius: 15px;
    border: 4px solid #f2c2c2;
    margin: 4px 2px;
}
.sumOfNumbers::before {
    content: "Suma de números: ";
}
.sumOfNumbers {
    background-color: #bfa4a4;
    color: white;
    padding: 10px; 
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
    border-radius: 15px;
    border: 4px solid #F2C2C2;
    margin: 4px 2px;
}
.averageLength::before {
    content: "Longitud promedio: ";
}
.averageLength {
    background-color: #bfa4a4;
    color: white;
    padding: 10px; 
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
    border-radius: 15px;
    border: 4px solid #F2C2C2;
    margin: 4px 2px;
}

#reset-button {
  color: white;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 20px;
  border-radius: 16px;
  border: 4px solid #f2c2c2;
  background-color: #85a6a0;
  width: 15%;
  
  
}

footer {
    color:#85a6a0;
    border-top: solid;
    width: 100%;
    bottom: 0;
    position: fixed;
}