body {
  text-align: center;
  text-transform: none
  letter-spacing: 0px;
  padding: 10px;
  font-style: none;
  font-size: 14px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  color: #000000;
  background-color: white;
  line-height: 1.8;
}
a:link {
  color: #DD3E00;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #00DD15;
  background-color: transparent;
  text-decoration: line-through;
}
a:hover {
  color: #00DD15;
  background-color: transparent;
  text-decoration: none;
}
a:active {
  color: #cccccc;
  background-color: transparent;
  text-decoration: underline;
}


h1 {
color: black;
 font-size: 25px;
text-align: center;
}


p {
font-family: verdana;
font-size: 20px;

}#para1 {
  text-align: center;
  color: red;
}

h2.img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #ffffff;
  background-color: #000000;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: #ffffff;
 font-size: 20px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #D24D19;
 font-size: 20px;
}

.active {
 font-size: 20px;
  background-color: #cccccc;
}

.grid-container {
  columns: 5 200px;
  column-gap: 1.5rem;
  width: 90%;
  margin: 0 auto;
  div {
    width: 150px;
    margin: 0 1.5rem 1.5rem 0;
    display: inline-block;
    width: 100%;
    border: solid 2px black;
    padding: 5px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    border-radius: 5px;
    transition: all .25s ease-in-out;
    &:hover img {
      filter: grayscale(0);
    }
    &:hover {
      border-color: coral;
    }
    img {
      width: 100%;
      filter: grayscale(100%);
      border-radius: 5px;
      transition: all .25s ease-in-out;
    }
    p {
      margin: 5px 0;
      padding: 0;
      text-align: center;
      font-style: italic;
    }