/* Headings */
h1 {
  padding-top: 5px;
  padding-bottom: 0.15rem;
  color: #3d90bd;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 4rem;
  font-weight: bold;
  text-align: center;
}

h2 {
  text-align: center;
  font-size: 28px;
  margin: 1rem 0 0.5rem 0;
  font-family: "Roboto Condensed", sans-serif;
  color: #1e485e;
}
h3 {
  font-size: 22px;
  font-weight: bold;
  color: #28475c;
  font-family: "Roboto Condensed", sans-serif;
}

/* Form */
input {
  min-width: 100%;
  box-sizing: border-box;
}

.input {
  border: 1px inset darkgrey;
}
.input:focus {
  border: 1px inset #3d90bd;
}

select {
  font-size: inherit;
}

textarea {
  min-height: 12rem;
  font-size: inherit;
}

form {
  display: grid;
  grid-template-areas:
    "name name  name ."
    "price  . . ."
    "quantity . . ."
    "description description description description"
    "submit . . .";
  font-size: inherit;
}

#name {
  grid-area: name;
}

#price {
  grid-area: price;
}

#quantity {
  grid-area: quantity;
}

#description {
  grid-area: description;
}

#submit {
  grid-area: submit;
  justify-self: end;
}

label {
  font-family: "Roboto Condensed", sans-serif;
  color: #1e485e;
  font-size: 20px;
  padding-top: 1.5rem;
  padding-bottom: 1px;
}

.sell {
  width: 60%;
  margin: 0 auto;
}

.button {
  margin: 1rem 0 1rem 0;
}

/* Media Queries */
@media only screen and (max-width: 970px) {
  form {
    grid-template-areas:
      "name name"
      "price quantity"
      "description description"
      ". submit";
  }
}

@media only screen and (max-width: 660px) {
  form {
    grid-template-areas:
      "name"
      "price"
      "quantity"
      "description"
      "submit";
  }

  #submit {
    justify-self: center;
  }
}

.grid {
  display: grid;
  width: 90%;
  margin: 0 auto;
}

@media only screen and (max-width: 650px) {
  h1 {
    padding: 0.1rem 0;
  }
  h2,
  h3 {
    padding-top: 1rem;
  }

  .grid {
    width: 100%;
  }
  .image-container img {
    margin-top: 16px;
  }
  .about .information {
    width: 86%;
    margin: 0 auto;
  }

  .sell {
    width: 85%;
  }

  footer {
    margin-top: 20px;
    text-align: center;
  }
  nav li {
    padding: 6px;
    list-style: none;
    display: inline;
    color: black;
  }
  nav li:hover {
    color: #28475c;
    font-weight: bold;
  }

  .search-bar,
  .cart {
    margin-top: 5px;
  }
}