body {
font-family: "Sanchez";
 margin: 0;
 }
* {
  box-sizing: border-box;
}
.banner {
	display: flex;
	flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
	margin: 0px;
	padding-bottom: 0.3em;
	padding-left: 0.8em;
	padding-top: 0.8em;
	background-color: #ffffff;
	width: 100%;
	border-bottom: 3px solid black;
	font-size: 3vw;
	z-index: 1;
  position: fixed;
}
.header {
	display: flex;
  flex: 1 1 auto;
}
.header text {
	font-weight: bold;
}
.subheader {
	display: flex;
  flex: 1 1 auto;
}
.subheader text {
	font-size: 2vw;
}

.sidebar {
	margin-top: 10.5vw;
  padding-top: 0.8em;
  padding-left: 0.8em;
  width: 15vw;
  background-color: #ffffff;
  position: fixed;
  height: 100%;
  z-index: 0;
  font-size: 3vw;
  flex-direction: column;
}

.sidebar a {
  display: flex;
  color: black;
  padding-top: 1em;
  padding-bottom: 1em;
  text-decoration: none;
  font-size: 1.5vw;
}

.sidebar a:hover {
  text-decoration-line: underline;
}

/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: fixed;
    flex-flow: row wrap;
    margin-top: 7rem;
    padding-top: 0;
    padding-bottom: 0.8rem;
  }
  .sidebar a {
    float:left;
    padding-right: 0.8em;
    padding-left: 0.8em;
    padding-bottom: 0em;
    padding-top: 0.8;
    font-size: 1rem;

  }
}

@media screen and (max-width: 900px) {
  .banner {
    font-size: 2rem;
    height: 7rem;
  }
  .subheader text {
    font-size: 1.5rem;
  }
  .sidebar {
    margin-top: 7rem;
  }
  .sidebar a {
    font-size: 1rem;

  }
}

div.content {
  display: block;
  margin-left: 15vw;
  padding-top: 10.5vw;
  max-width: 100%;
}

@media screen and (max-width: 700px) {
  div.content {margin-left: 0.8em;
    padding-top: 13rem;
  }
}

@media screen and (max-width: 900px) and (min-width: 700px){
  div.content {
  padding-top: 8rem;
  margin-left: 10rem;
  }
  .sidebar{
  width: 10rem;
  }
}


.gallery-wrapper {
display: block;
}

.gallery-box {
display: flex;
max-width: 1000px;
flex-flow: row wrap;
font-size: 100%;
padding: 20px;
gap: 20px;
justify-content: center;
align-content: center;
}

.image-box {
display: flex;
justify-content: center;
flex: 1 1 content;
height: 25rem;
width: auto;
object-fit: contain;
}

.image-box img {
max-width: 100%;
height: auto;
object-fit: contain;
}

.image-box a {
display: flex;
justify-content: center;
flex: 1 1 content;
outline-style: none;
outline-color: black;
}

.image-box a:hover {
outline-style: solid;
outline-width: 4px;
outline-color: black;
}

.page-header {
padding: 1rem;
width: 100%;
}

.page-header text {
font-size: 2rem;
font-weight: bold;
}

.page-info p {
font-size: 1rem;
margin-top: 0px;
margin-bottom: 5px;
}

.page-info {
padding-left: 1rem;
padding-right: 2rem;
}