html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  height: 100%;
  margin: 0;
  font-family: "Garamond", serif;
  color: #333366;
  background-color: #ccc;
      /* OLD --
      background-image: url("/site-images/mainbg1080.jpg"),
        url("/site-images/mainbg1080_180rotate.jpg");
      background-repeat: no-repeat, no-repeat;
      background-attachment: fixed, fixed;
      background-position: right top, left bottom;
      background-size: auto 120%, auto 120%;
      -- END OLD */
  background-image: url("/site-images/bgright.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 46%;
  background-size: cover;
}

/*contains entire layout to achieve vertical spacing*/
.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /*vertical*/
  height: 100%;
}

/*contains logo and nav*/
header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around; /*horizontal*/
  align-items: center; /*vertical*/
  margin: 1rem 0 0 0;
  background-color: rgba(255, 255, 255, 0.5);
}

.logo {
visibility: hidden;
}

a {
  color:#333366;
}

a:visited {
  color: #333366;
}

nav {
  width: 100%;
}

nav ul{
  list-style-type: none;
  display: flex;
  align-items: center; /*vertical*/
  justify-content: center; /*horizontal*/
  color: #333366;
  text-transform: uppercase;
}

nav ul li {
  padding: 0 2rem 0 1rem;
  text-align: center;
}

/*spaces nav bar horizontally*/
#navitemsm {
  width: 20%;
}

#navitemlg {
  width: 100%;
}

nav ul li a {
  text-decoration: none;
  color: #333366;
}

nav ul li a:hover {
  text-decoration: underline;
}

/*controls majority of page*/
main {
  display: flex;
  flex-direction: column;
  justify-content: center; /*vertical*/
  align-items: center; /*horizontal*/
  margin: 1rem 0 1rem 0;
  flex: 1; /*fills undefined body space*/
}

/*styles home logo container*/
.home-logo-box {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0 1.5rem 0 1.5rem;
  padding: 0.75rem;
  width: 30%;
}

/*sizes home logo relative to its container*/
#home-logo {
  width: 100%;
  filter: drop-shadow(0.05rem 0.05rem 0.2rem white);
}

.home-logo-description {
  width: 30%;
  font-size: 1.5rem;
  font-style: italic;
  text-align: end;
}

/*contains social media aligned right*/
footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /*horizontal*/
  align-items: flex-end; /*vertical*/
  margin: 0.5rem;
}

#copyright {
  font-style: italic;
}

.instagram {
  width: 1.875rem;
  height: 1.875rem; /*gets rid of weird margin when applied to a, resizes img*/
}

.instagram:hover {
  filter: hue-rotate(88deg) saturate(186%) brightness(186%);
}

/*eliminates hover on touchscreens, displays nav as screen gets smaller switches to single bg*/
@media screen and (max-width: 1200px), (any-hover: none) {
  body {
    background-position: center;
    background-size: 100%;
    transition: all 0.5s ease;
  }
  nav ul li a {
    transform: none; /*keeps nav aligned on screen*/
  }
  nav ul li a:hover {
    width: 100px; /*widens on hover if not touchscreen*/
    /* font-weight: bold; */
  }
  .home-logo-box,
  .home-logo-description {
    width: 60%;
    transition: all 0.5s ease;
  }
}

@media screen and (max-width: 850px) {
footer {
  margin: 0px;
  padding: .5rem;
  background-color: rgba(255, 255, 255, .25);
}

@media screen and (max-width: 500px) {
  body {
    background-position: center right;
    background-size: auto 850px;
    transition: all 0.5s ease;
  }
  .home-logo-description {
    font-size: 1.2rem;
    filter: drop-shadow(0.05rem 0rem 0.05rem white);
  }
}
}