/* Sets elements heights so that height can be defined in percentage on gallery page */
html.gallery {
  height: 110%;
  max-height: 900px;
}

body {
  padding: 0;
  margin: 0;
}

body.gallery {
  height: 100%;
}

#container.gallery {
  height: 100%;
}

/* Styles for header (both text and image) */
/* makes text white and large, sets background color and makes z-index higher than header image */
.headTxt {
  float: left;
  color: white;
  background-color: rgb(250, 170, 20);
  font-size: 400%;
  margin-top: 12%;
  margin-left: 2%;
  padding: 1%;
  position: relative;
  z-index: 2;
}

/* Shrinks image to fit screen, and positions it under header text */
/* (Used in addition to two images that are not scaled */
.headImg {
  width: 100%;
  position: absolute;
  z-index: 1;
}

/* Styles for main content box (includes text and images) */
/* positions and sizes the box to put content in */
.mainContent {
  float: left;
  clear: left;
  padding-top: 5%;
  width: 100%;
  padding-bottom: 5%;
}

/* Creates a box for the text and images, specifies settings of text */
#textArea {
  float: left;
  background-color: rgb(250, 170, 20);
  font-size: 1.25vw;
  text-align: left;
  color: white;
  padding: 3%;
  width: 71%;
  margin-left: 2%;
  line-height: 130%;
  position: relative;
}

/* size and position the images on the home screen as well as giving them a border */
.homePageImgs {
  float: left;
  margin: 3%;
  width: 30%;
  border: solid 5px rgb(150, 0, 22);
}

/* Styles for menu */
/* positions and sizes the menu, sets color of the text inside */
.menu {
  float: right;
  background-color: rgb(150, 0, 22);
  color: white;
  padding-right: 2%;
  padding-left: 2%;
  padding-top: 4%;
  margin: 2%;
  margin-top: 0%;
  width: 10%;
  position: relative;
}

/* positions links within menu */
.link {
  text-align: center;
  font-size: 17px;
  margin-bottom: 40%;
}

/* fixing link styles */
/* link not yet visited*/
a:link {
  color: white;
  text-decoration: none;
}

/* link that has been visited */
a:visited {
  color: white;
  text-decoration: none;
}

/* when mouse hovers over link*/
a:hover {
  text-decoration: none;
  color: rgb(255, 218, 148);
}

/* selected link */
a:active {
  color: yellow;
  text-decoration: none;
}

/* Styles specific to gallery page: */
/* For most of the pages, the height of menu and textArea is 70%, the same as the home page */
.home {
  height: 70%;
}

/* positioning and styling arrow buttons */
button {
  width: 10%;
  padding: 0;
  border: none;
  margin: 0;
  background-color: rgb(250, 170, 20);
  position: absolute;
}

img.arrow {
  width: 100%;
}

.right {
  right: 5%;
  top: 40%;
}
.left {
  left: 5%;
  top: 40%;
}

/* arrows grow larger when hovered */

button:hover {
  width: 12%;
}

img.arrow:active {
  background-color: rgb(250, 170, 20);
  border: white solid 1px;
}

/* sets size and position of images in gallery */
img.gallery {
  height: auto;
  position: relative;
  z-index: 5;
  width: 40%;
  border: solid 5px rgb(150, 0, 22);
  margin: 2.5%;
  margin-top: 4%;
  margin-left: 27.75%;
}

/* centers captions of images in gallery */
#captions {
  text-align: center;
}

/* makes the height fixed while the size of the image changes */
.gallery.mainContent {
  height: 100%;
}

#textArea.gallery {
  height: 90%;
}

/* Specific to about page */
/* Menu and textArea on about page have greater height since  there's more writing*/
.about {
  height: 98%;
}