@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

body{
	font-family: "Lucida Console", serif;
  margin: 0;
}

/* Website Links except the nav */
a:link{
  color: #6f2da8;
}
a:visited{
  color: #6f2da8;
}
a:hover{
  color: royalblue;
}
a:active{
  color: indigo;
}
header{
  text-align: center;
}

/*Navigation*/
nav{
  background-color: violet;
  border-top: 3px solid purple;
  border-bottom: 3px solid purple;
  padding: 5px;
}
nav ul{
  list-style-type: none;
  text-align: center;
  margin: 8px 0;
  padding: 0;
}
nav li{
  display: inline;
  padding: 5px;
}
nav a{
  text-decoration:none;
}
nav a:link{
  color: purple;
}
nav a:visited{
  color: purple;
}
nav a:hover{
  color: blue;
}
nav a:active{
  color:violet;
}

/*Main */
main{
  max-width: 1200px;
  margin: 20px auto;
  padding: 10px;
}

/*Footer */
footer{
  border-top: purple 3px solid;
  text-align: center;
}

/*CSS without a media query--applies to all sizes unless overridden*/
h1{
  font-size: 4em;
}

/* CSS Adjustments for Tablets */
@media only screen and (max-width: 1024px) {
  h1{
    font-size: 1.8em;
  }
}

/* CSS Adjustments for Smartphones */
@media only screen and (max-width: 768px) {
  h1{
    font-size: 1.5em;
  }
}

.fa{
  font-size: 4em;
  color: violet;
}
img.hero-image{
  border:6px solid pink;
}
.gallery .preview{
    width: 100%;
    height: auto;
}

.gallery .gallery-thumbnails img {
    width: 100px;
    height: 75px;
    margin: 3px 10px 10px 0;
}

.gallery .gallery-thumbnails img:hover {
    opacity: 0.8;
    cursor: pointer;
}

.gallery .preview img#preview {
    padding: 1px;
    max-width: 100%;
    height: auto;
    margin: 0 auto !important;
    display: block !important;
    border: 6px solid pink;
}