styles.css

html {
  height: 100%;
}
body {
  font-family: 'Cabin', sans-serif;
  background: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),url("img/wallpaper.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
header {
  background-color: #59323C;
  padding: 0.3em;
  text-align: center;
  font-family: ‘Courier New’, Courier, monospace;
  font-size: 4em;
  color: white;
  margin-bottom: 0.5em;
}
main {
  position: relative;
  margin: auto;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-right:1em;
  width:50%;
  height: 50%;
  background-color: #BFAF80;
  border-radius: 0.2em;
}
.user-form {
  padding: 0.5em;
  display: block;
  text-align: left;
}
.user-form p {
  font-size: 0.8em;
  color: black;
}
h4 {
  display: block;
  margin:auto;
  text-align: center;
  background-color: #8C6954;
  padding: 1em;
  width: 50%;
  color: white;
  border-radius:0.2em;
  font-style: italic;
}
input {
  display: block;
  margin: auto;
  width: 90%;
  margin-bottom: 1em;
  border-radius: 0.2em;
  text-align: left;
  font-size: 1.2em;

}
.submit{
  margin: auto;
  display: block;
  padding: 0.5em;
  background-color: white;
  border-radius: 0.5em;
  font-family: georgia;
}
.output-container{
  display:block;
  margin: auto;
  width: 50%;
  text-align: center;
  margin-bottom: 1em;
  padding: 1em;
  background-color: #F2EEB3;
  border-radius: 0.2em;
}
li {
  border-radius: 0.2em;
  padding: 1em;
  padding-bottom:2em;
  margin: auto;
  position: relative;
  width: 90%;
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: white;
}
.removeButton {
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  border-radius: 1em;
  background-color: white;
  border-color: black;
}
.user-name{
  float: left;
}
.user-email{
  float: right;
}
footer {
  box-sizing: border-box;
  background-color: #59323C;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0.5em;
}