body {
font-family: open-sans;
font-size: 20px;
margin: auto;
text-align: center;
}

.user-input {
  background: #E5F3F2;
  margin: auto;
  padding-top: 20px;
  width: 100%;
}

header {
  min-height: 25px;
}

h1 {
  color: #6D6E71;
  font-size: 2em;
  font-family: Roboto Slab;
  padding-top: 0px;
  padding-bottom: 10px;
}

.idea {
  color: #00A79D;
}

.form-wrapper {
  display: block;
  text-align: center;
}

form {
  display: inline-block;
  margin: auto;
  text-align: left;
  width: 100%;
}

input {
  box-sizing: border-box;
}

.idea-title {
  display: block;
  outline-style: none;
  border: 1px solid #CCCCCC;
  padding: 2px;
  margin: 10px auto;
  width: 85vh;
}

.idea-title:focus, .idea-body:focus, h2:focus, p:focus {
  outline: none;
}

.idea-title::-webkit-input-placeholder {
  color: #D1D2D4;
}

.idea-body {
  border-color: #CCCCCC;
  box-sizing: border-box;
  display: block;
  height: 3.5vh;
  min-height: 20px;
  max-height: 20px; 
  margin: 10px auto;
  outline-style: none;
  padding: 2px;
  width: 85vh;
  resize: none;
}

.idea-body::-webkit-input-placeholder {
  color: #D1D3D4;
}

.save-button{
  background:#00A79D;
  color: white;
  display: block;
  margin: 10px auto;
  margin-bottom: 15px;
  outline-style: none;
  padding: 2px;
  transition: background 1s;
  width: 85vh;
}

.save-button:disabled {
  opacity: 0.5;
}

.save-button:hover{
  background:#045E55;
}

.idea-display{
  width: 100%;
}

.search-ideas {
  margin: 15px 0px;
  outline-style: none;
  width: 85vh;
}

.card {
  border-bottom: 1px solid #D1D3D4;
  margin: 0vh auto 5vh auto;
  padding-bottom: 3vh; 
  text-align: left;
  width: 85vh;
  }

.card h2 {
  color: #6D6E71;
  display: inline;
  font-family: Open-Sans;
  font-size: .8em;
}

.card p {
  color:#939598;
  font-size: .7em;
  margin: 10px 0px 15px 0px;
}

.svg.delete {
   background: url("images/delete.svg");
   float: right;
 }

.svg {
  transition: background 1s;
  vertical-align: middle;
  height: 20px;
  width: 20px;
  min-height: 10px; 
  min-width: 10px;
  max-height: 50px;
  max-width: 50px;
  }

.svg.upvote {
  background: url("images/upvote.svg");
  display: inline-block;
}

.svg.downvote{
  background: url("images/downvote.svg");
  display: inline-block;
  margin-right: 3vh;
}

.svg.delete:hover {
  background: url("images/delete-hover.svg");
}

.svg.upvote:hover {
  background: url("images/upvote-hover.svg");
}

.svg.downvote:hover {
  background: url("images/downvote-hover.svg");
}

#quality {
  color:#6D6E71;
  font-size: 0.6em;
}

@media screen and (max-width: 800px) {
    body {
    margin: 0 auto;
  }

  .idea-title {
    font-size: 20px;
    width: 85%;
  }

  .idea-body {
    width: 85%;
    max-height: none;
    min-height: 30px;
    font-size: 20px;
  }

  .idea-display {
    width: 100%;
  }

  .save-button {
    width: 85%;
  }
  
  .search-ideas {
    width: 85%;
    border: 1px solid #CCCCCC;  
  }

  .card {
  width: 85%;
  }
}

@media screen and (max-width: 376px) {
  body {
    margin: 0 auto;
  }

  .idea-title {
    font-size: 20px;
  }

  .idea-body {
    max-height: none;
    min-height: 105px;
    height: 15vh;
    font-size: 20px;
  }

  .idea-display {
    width: 100%;
  }
  
  .search-ideas {
    width: 85%;
    border: 1px solid #CCCCCC;  
  }

  .card {
  width: 85%;
  }
}