body {
    background-color: #3f78a7;
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
  }
  
  h1, h2 {
    color: white;
    text-align: center;
    font-size:xx-large;
    margin: 30px 0px 10px 0px;
  }

  h3,h4 {
    color: #FFB612;
    font-size:x-large;
    margin: 10px 50px 10px 50px;
  }
  
  p {
    font-family: verdana;
    font-size: 20px;
    margin: 10px 50px 10px 50px;
  }
  body {
	margin: 0px;
}

div	{
	display:block;
}

img {
	max-width:100%;
	height:auto;
	display:inline-block;
	transition: transform .5s;
}

.img2 {
  filter: opacity(50%) drop-shadow(0 0 0 white);
  height: auto;
  width: fit-content;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Index navigation */
.topnav {
	background-color:#0F204B;
	overflow:hidden;
}

.topnav a {
	float:left;
	display:block;
	color:white;
	text-align:center;
	padding:14px 50px;
	text-decoration:none;
	font-size:17px;
	height:25px;
	width:125px;
}

.topnav a:hover {
	background-color:#FFB612;
	color:white;
	transition:0.5s;
}

/*active features have really been a pain in my butt on this assignment. I'm not taking any chances with this page.*/
.topnav .active {
	background-color:#FFB612;
	color:white;
}
/* responsive css for top navigation bar */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a {text-align:left;}
    .topnav a.icon {
      float: right;
      display: block;
    }
    .topnav a {
      float:left;
      text-decoration:none;
      font-size:17px;
      height:20px;
      width:auto;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }

/* row and column css. In full honesty I think a carousel would probably look better, but I really wanted to try the zoom features and display the pictures
more openly. Even if it's not as sleek. The fact that the pictures are not the same sizes also kind of affected my decision. */
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* figured out how to center the columns thanks to this https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div */
.column {
  flex: 25%;
  max-width: 15%;
  padding: 20px 20px 48px 20px;
  margin:0 auto;
  width: 80%;
}

.column img {
  margin-top: 50%;
  vertical-align: middle;
  
}

/* hover css taken from https://www.w3schools.com/howto/howto_css_zoom_hover.asp */
.column img:hover {
    transform: scale(2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* fadein effect code */
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}