@charset "utf-8";
/* CSS Document */
* {
  box-sizing: border-box;
}

body {
  background-color: white;
  padding: 20px;
  font-family: Arial;
  margin: auto;
  max-width: 98vw;
}
header{
	width: 98%;
	margin: auto;
}
nav{
	margin: auto;
}
nav ul{
	margin: auto;
	padding: 1%;
}
nav ul li {
	list-style-type: none;
	text-decoration-line: none;
	display: inline-block;
	width: 33%;
	text-align: center;
	border: 3px solid black;
	font-weight: bolder;
	font-size: xx-large;
	border-radius: 10px;
	background-color: black;
	color: white;

}
nav ul li:hover{
	background-image: url("../images/IMG_6078-HDR.jpg");
	background-size: ;
	background-repeat:no-repeat;
}
nav ul li a{
	text-decoration: none;
}
/* Center website */
.main {
  max-width: 99%;
  min-height: 99vh;
  max-height: 9999vh;
  margin: auto;
  overflow: none;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 10px -16px;
  max-width: 95%;
  margin: auto;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 32%;
  height: 250px;
  display: none; /* Hide all elements by default */
  margin: .4vw;
  text-align: center;
  background-color: white;
  border-radius: 8px;
}

/* Content */
.content {
  background-color: black;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  margin: auto;
  object-fit: contain;
  align-content: center;
  opacity: 0.9;
}
.content img{
	max-width: 99%;
	max-height: 97%;
	margin: auto;
	margin-left: auto;
	margin-right: auto;
	border-radius: 8px;
	padding: 1%;
	
}
.content img:hover{
	opacity: 1.0;
}
h4{
	background-color: black;
	border-radius: 6px;
	border: 3px solid dodgerblue;
	color: white;
	width: 85%;
	text-align: center;
	align-content: center;
	margin: auto;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}
#myBtnContainer{
	padding: 1.5%;
	margin: 1px;
	margin-left: auto;
	margin-right: auto;
	width: 99%;
	
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: dodgerblue;
  cursor: pointer;
  border-radius: 5px;
  margin:.1%;
  font-weight: bold;
}

.btn:hover {
  background-color: black;
  color: white;
  font-weight: bolder;
}

.btn.active {
  background-color: black;
  color: dodgerblue;
  font-weight: bold;
}
footer{
	position: fixed;
	bottom: 3px;
	height: 6vh;
	width: 96%;
	z-index: 2;
	padding: 1px;
	margin: 1px;
}
#back{
	position:relative;
	bottom: 3px;
}
footer a{
	width: 20%;
	text-align: right;
	margin: 1px;
}
footer a img{
	height: 99%;
	opacity: .8;
	float: right;
	margin: 2px;
}
footer a img:hover{
	opacity: 1.0
}
#filter{
	display: none;
}
@media screen and (max-width: 850px){
	body{
		max-width: 98%;
	}
	header{
		position: sticky;
		top: 2px;
	}
	nav ul li{
		font-size: large;
		width: 31%;
	}
	.main{
		max-width: 99%;
		min-height: 100vh;
		max-height: 9999vh;
	}
	.row{
		width: 98%;
	}
	.column{
		width: 99%;
		margin: 1vh;
		z-index: 5;
	}
	.content img{
		opacity: 1.0;
		max-height: 99%;
	}
	#myBtnContainer{
		position: sticky;
		top: 28px;
	}
	.btn{
		border: 3px solid black;
	}
	h4{
		z-index: 10;
	}
	#filter{
		display: block;
		float: left;
		margin-bottom: 15px;
		color: white;
		border: 3px solid white;
		border-radius: 9px;
		width: 15vw;
		text-align: center;
		background-color: cornflowerblue;
		margin-left: -5px;
	}
	#filter:hover{
		cursor: pointer;
	}
}