body{
  background-color:beige;
  font-family: 'Lato', sans-serif;}

header{
  display:flex;
  flex-direction:column;
  align-items:center;}

h1{font-family: 'Great Vibes', sans-serif;
  font-size: 3.5em;
  line-height:90%;
  margin-top:50px;}

.main{
  margin:0 20% 0;
  background-color:white;
  padding:20px;
  border-radius:5px;
}

header p{font-size:.9em;}

header input{
  height:30px;
  border:none;
  width:83%;
  }
.error::placeholder {
  color: red;
}
button{
  border:none;
  border-radius:2px;
  width:15%;
}

header form{
  background-color:white;
  border-radius: 3px;
  padding:5px;
  width:30%;
  margin:20px 0;
  display:flex;
  justify-content:space-between;}

ul{display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  padding:15px;
  border-top:3px ridge #c6be25;
  border-bottom:3px ridge #c6be25;}

li{list-style:none;
  border:1px solid #f2efef;
  box-shadow: 2px 2px 5px grey;
  border-radius: 3px;
  margin:5px;
  flex-grow:1;
  padding:.75em;
  height:81px;}

li span{display:block;
  font-size:1.75em;}

li input[type=text]{
  width: 5em;
  font-size:1.75em;
}

li label{display:block;
  color:grey;
  margin-top:5px;}

.checked{display:none;}

li button{
  margin-right:5px;
  width:60px;}

.responded{
  border:1px solid lightgrey;
  box-shadow: 4px 4px 5px grey;}

footer{
  text-align:center;
  margin:15px;
  color:grey;}

a {
  text-decoration:none;
  color:grey;}

@media (max-width: 768px){

  header form{
    flex-direction:column;
    width:80%;}
  header button, header input{width:auto;}
  .main{margin:0 7% 0;}
  h2{margin:0;}
  .main>div{
    margin:15px 0;
    font-size:.8em;}
  li input[type=text]{
    font-size:1.65em;}
}
