html {
    font-family: 'Caveat', cursive;
}
body{
    margin: 0;
    background-color: #fff4ed;  
}
header{
    background-color: #c6a793;
    color: white;
    padding: 1rem;
}

header h1 {
    font-size: 40px;
    letter-spacing: 5px;
    text-align: center;
}

h2 {
    margin: 0;
    background-color: #2c2c2c;
    color: white;
    padding: auto;
    font-size: 30px;
    letter-spacing: 3px;
    text-align: center;
}
#form {
    display:flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

textarea[name="user-input"]  {
  font-style: oblique;
  font-size: 15px;
}

#button{
    display:flex;
    justify-content: center;
    align-items: center;
    height: 100%;  
}

#reset-button {
    background-color: #7f5c45;
    width: 250px;
    padding: 5px;
    color: #fff;
    border-radius: 6px;
    font-size: 1.3rem;
    font-style:oblique;
    letter-spacing: 1px;
    border-color: #7f5c45;
    
}

.List {
    list-style-type: none;
    background-color: #fff4ed;
    border: solid 1px #fff4ed;
}

.characterCounter {
    border-bottom: solid 1px #fff4ed;
    padding: 10px;
    font-size: 25px;
    letter-spacing: 3px;
}

.characterCounterExcluding {
    border-bottom: solid 1px #fff4ed;
    padding: 10px;
    font-size: 25px;
    letter-spacing: 3px;
}

.wordCounter {
    border-bottom: solid 1px #fff4ed;
    padding: 10px;
    font-size: 25px;
    letter-spacing: 3px;
}

.numberCounter {
    border-bottom: solid 1px #fff4ed;
    padding: 10px;
    font-size: 25px;
    letter-spacing: 3px;
}

.numberSum {
    border-bottom: solid 1px #fff4ed;
    padding: 10px;
    font-size: 25px;
    letter-spacing: 3px;
}

.averageWordLength {
    border-bottom: solid 1px #fff4ed;
    padding: 10px;
    font-size: 25px;
    letter-spacing: 3px;
}

footer {
    background-color: #3c3c3c;
    height: 120px;
    color: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;     
}

footer p {
    font-size: 25px;
    letter-spacing: 3px;
    text-align: center;
}