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

body {
  height: 100%;
  margin: 0;
  background-color: #ccc;
  font-family: "Garamond", serif;
  color: #333366;
}

/*contains entire layout to achieve vertical spacing*/
.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /*vertical*/
  min-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 4rem 0;
  background-color: rgba(255, 255, 255, 0.25);
}

.logo {
height: 5.5rem;
}

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;
}

/*Centered main container for all pages*/
main {
  display: flex;
  flex-direction: row;
  justify-content: center; /*horizontal*/
  align-items: center; /*controls children vertically*/
  margin: 0;
  gap: 1rem;
  width: 70%;
  align-self: center;
}

/*OPTION: Single centered large main body box*/
.single-box {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0 1.5rem 0 1.5rem;
  padding: 1rem;
  flex-basis: 100%; /*horizontal width*/
  text-align: justify;
}

/*OPTION: Give single body box a decorative top & bottom*/
.decoration-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-basis: 100%; /*horizontal width*/
}

img.decoration {
  width: 9rem;
}

img.decoration#flip {
  transform: rotate(180deg);
  width: 12rem;
}

/*contains four elements of contact information*/
.contact-container {
  padding: 1rem 0 1rem 0;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 120%; /*exceed the main's width*/
}

.contact {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0 1.5rem 0 1.5rem;
  padding: 2rem;
  text-align: center;
  font-size: large;
  flex-basis: 25%;
  flex: 1;
}

/* OLD --
.contact a:hover {
  filter: drop-shadow(0 0 0.03rem #ffcc00);
}
*/

/*formats link containing div*/
a#contact {
  flex-basis: 25%;
}

a#contact:hover {
  filter: drop-shadow(0 0 0.01rem #333366);
}

/*OPTION: Two column image gallery*/
/*each use of class is one column*/
.gallery-left,
.gallery-right {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 1rem;
  flex-basis: 40%; /*defines each column width within gallery relative to main's width*/
}

/*left boxes*/
.box-left {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0 0 0 1.5rem;
  padding: 1rem;
  max-width: 100%;
  text-align: justify;
}

img.fit-left {
  width: 100%;
  border-radius: 0 0 0 1.5rem;
}

/*Description will show top right of image, hiding under image option. When on below, it shows under first image in column*/
#description-hide-left {
  display: none;
}

/*right boxes*/
.box-right {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0 1.5rem 0 0;
  padding: 1rem;
  max-width: 100%;
  text-align: justify;
}

img.fit-right {
  width: 100%;
  border-radius: 0 1.5rem 0 0;
}

/*text modifiers*/
p.center {
  text-align: center;
}

p:first-of-type::first-letter {
  font-size: 133%;
}

h1 {
  /* header on info card of each portfolio piece */
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 600;
}

h2 {
  /* header on explore gallery page */
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 600;
  text-align: center;
}

/*formats header which is defined as a link containing a div*/
a#collection {
  text-decoration: none;
  color: #333366;
}

a#collection:hover {
  /* filter: drop-shadow(0 0 0.01rem #333366); */
  text-decoration: underline;
}


/*format pseduo-breadcrumb for gallery posts*/
a#breadcrumb {
  text-decoration: none;
  color: #333366;
}

a#breadcrumb:hover {
  text-decoration: underline;
}

p.details {
  margin: 1em;
}

/*removes default paragraph styling*/
p.details:first-of-type::first-letter {
  font-size: 100%;
}

/*resize @*/
at {
  display: inline;
  font-size: 0.8rem;
}

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

ul.footer-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

.footer-nav a {
  color: #333366;
  text-decoration: none;
}

.footer-nav a:hover {
  filter: drop-shadow(0 0 0.03rem #333366);
}

.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*/
@media screen and (max-width: 1200px), (any-hover: none) {
  nav ul li a {
    transform: none; /*keeps nav aligned on screen*/
  }
  nav ul li a:hover {
    width: 100px; /*widens on hover if not touchscreen*/
  }
  a#active {
    width: 100px;
  }
  main {
    width: 80%;
    transition: all 1s ease;
  }
  .contact-container {
    flex-direction: column;
    width: 60%;
    gap: 1rem;
    transition: all 1s ease-in-out;
  }
  .gallery-left,
  .gallery-right {
    margin-top: 1rem;
    transition: all 1s ease;
  }
}

/*switches to all column display on small screen, resizes main body boxes larger*/
@media screen and (max-width: 800px) {
  header{
    margin-bottom: .1rem;
    margin-top: .5rem;
  }
  nav ul{
    flex-direction: column;
    align-items: center;

  }
  nav ul li {
    margin-bottom: .2rem;
  } 

  ul li:nth-child(3) {
    order: -1;  /*move logo to top*/
    margin-bottom: .5rem;
  } 
  main {
    flex-direction: column;
    align-items: center; /*horizontal*/
    justify-content: center;
    gap: 0;
    column-gap: 1rem;
  }
  img.scale-off {
    display: none; /*hide decoration on about page*/
  }
  .single-box {
    width: 100%; /*horizontal width*/
  }
  .decoration-container {
    margin-bottom: 1rem;
  }
  .contact-container {
    width: 150%;
    transition: none;
  }
  #description-hide-left {
    display: inline; /*Description will show under first image*/
  }
  #description-hide-right {
    display: none;
  }
  ul.footer-nav {
    flex-wrap: wrap;
  }
}