body {
    background: rgb(235, 218, 194);
    justify-content: center;
    margin: 0px;
}

nav {
    background: rgb(90, 45, 13);
    display: grid;
    align-content: center;
    border-bottom: solid gold 4px;
    padding: 20px 0px 20px 0px;
    & a {color: white; text-decoration: none; font-size: 2em; text-align: center;}
    & a:hover {color: coral;}
}

footer {
    background: url(tool-images/mermaid-2.jpg);
    background-size: cover;
    height: 220px;
}

main {
    display: grid;
    justify-content: center;
    margin: 20px 0px 0px 0px;
}

.tool-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 95vw;
}

.tool-column {
  grid-column: auto / span 4;
  & a {  text-decoration: none; color: black;}
}

.tool-post {
  margin: 10px 10px 40px 10px;
  padding: 10px;
}

.tool-post:hover {background-color: rgb(204, 185, 159); transition-duration: 0.3s;}

.tool-picture {
  overflow:hidden;
  & img {width: 99%; border: solid rgb(185, 185, 185) 1px;}
}

.tool-title {
  & h2 {font-family: sans-serif; margin: 0px; font-size: 2em; font-weight: 600;}
  & h4, p {font-weight: normal; font-family: sans-serif; margin: 10px 0px 10px 0px;}
}


.body-text {
  width: 800px;
  background: Snow;
  padding: 30px 30px 50px 30px;
  margin: 0px 0px 30px 0px;
  font-family: Arial, sans-serif;
  & p, li {font-size: 1.2em;}
  & li {margin: 0px 0px 15px 0px;}
  & h1 {font-size: 3.8em; font-family: Times, serif; font-weight: normal; margin: 0px;}
  & h4 {font-weight: normal; margin: 0px 0px 20px 0px;}
  & h5 {color: brown; font-size: 1.2em;}
  & .big-link a {
    font-weight: bold;
    text-decoration: none;
    background-color: rgb(90, 45, 13);
    color: gold;
    font-size: 1.4em;
    padding: 10px 25px 10px 25px;
   line-height: 2.6em;
    border-radius: 40px;
   border: solid rgb(90, 45, 13) 2px;
  }
  & .big-link a:hover {
      background-color: transparent;
      color: rgb(90, 45, 13);
      text-decoration: none;
      transition-duration: 0.2s;
    }
  & a {text-decoration: none; color: rgb(30, 117, 189);}
  & a:hover {text-decoration: underline;}
  & h3 {font-family: serif; text-align: center; color: brown; font-size: 2em;}
}

.tool-body-image img {
  width: 100%;
  border: solid rgb(185, 185, 185) 1px;
}


@media only screen and (width < 1500px) {
    .tool-container {width: 90vw;}
    .tool-column {grid-column: auto / span 6;}
    .body-text {max-width: 90vw;}
    footer a {text-align: center;}
    footer {padding: 0px;}
}

@media only screen and (width < 800px) {
    .tool-container {width: 90vw;}
    .tool-column {grid-column: auto / span 12;}
    .body-text {background-color: transparent;}
    body {background-color: snow;}
}