day-36.css

.form { background: #fff; width: 100%; }

.header { background: #5f1888; padding: 1rem; }
.header-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1rem;
  padding: 0 1rem;
  outline: none;
  text-align: center;
  width: 100%;
}

.content { border-bottom: 2rem solid #fff; height: 10rem; overflow-y: scroll; overflow-x: hidden; }
.item:nth-of-type(odd) { background: #e7edf0; }

.footer { border-bottom: 1px solid #eee; border-top: 1px solid #eee; }
.addItem {
  background: transparent;
  border: none;
  color: #999;
  font-size: 1rem;
  height: 2rem;
  outline: none;
  padding: 0 1rem;
  text-align: center;
  width: 100%;
}

.buttons { padding: 10px 0; }
.button {
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
}
.button--save { background: #3a97a5; }
.button--delete { background: #ca4a50; }

.button:active { opacity: 0.4; }