body {
  margin: 0;
  font-family: "Lucida Handwriting", "Lucida Calligraphy", Cursive;
  height: 100%;
  width: 100%;
}

header {
  background-color: oldlace;
}

.navBar {
  z-index: 2;
  position: fixed;
  top: 0px;
  left: 5em;
  right: 5em;
  opacity: 99%;
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em;
  height: 50px;
  display: flex;
  column-gap: 15%;
}

.navBarIdx {
  z-index: 2;
  position: fixed;
  top: 0px;
  left: 5em;
  right: 5em;
  opacity: 99%;
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em;
  height: 50px;
  display: flex;
  column-gap: 2%;
}

#logo {
  flex: 0 0 40%;
  margin-left: 1em;
  place-self: center;
  font-family: "Lucida Handwriting", "Lucida Calligraphy", cursive;
  color: black;
}

#logo a {
  text-decoration: none;
  color: black;
}

#navButtons {
  flex: 0 0 33%;
  display: flex;
  place-items: center;
}

#navButtonsIdx {
  flex: 0 0 40%;
  display: flex;
  place-items: center;
}

#navButtons a {
  flex: 0 0 40%;
  font-family: "Lucida Handwriting", "Lucida Calligraphy", cursive;
  font-size: x-large;
  text-decoration: none;
  color: black;
}

#navButtonsIdx a {
  flex: 0 0 35%;
  font-family: "Lucida Handwriting", "Lucida Calligraphy", cursive;
  font-size: x-large;
  text-decoration: none;
  color: black;
}

#navButtons a:hover {
  text-decoration: underline;
  color: darkgrey;
}

#navButtonsIdx a:hover {
  text-decoration: underline;
  color: darkgrey;
}

#poems {
  display: flex;
  z-index: 1;
  position: relative;
  top: 10vh;
  color: black;
  text-shadow: 1px 1px darkgray;
  font-size: 3.2vh;
  text-align: center;
  column-gap: 5%;
  margin-right: 1%;
  margin-left: 5%;
  
}

#aboutText {
  display: flex;
  z-index: 1;
  position: relative;
  top: 6vh;
  color: black;
  text-shadow: 1px 1px darkgray;
  font-size: 9vh;
  text-align: center;
  column-gap: 10%;
  margin-right: 10%;
  margin-left: 10%;
}

.poem {
  border: 2px outset tan;
  padding-left: 1%;
  padding-right: 1%;
}

#poemText1 {
  flex: 0 0 50%;
}

#poemText2 {
  flex: 0 0 50%;
}

#poemTitle1 {
  margin: 0;
  font-variant: small-caps;
  flex-wrap: nowrap;
}

#poemTitle2 {
  margin: 0;
  font-variant: small-caps;
  flex-wrap: nowrap;
}
.main {
  margin: 0;
  padding: 0;
}

#backgroundImage {
  position: fixed;
  top: 0;
  z-index: -1;
  object-fit: contain;
}

#poetry-maker-code {
  /* display: flex; */
  position: fixed;
  top: 10vh;
  left: 1%;
  place-self: center;
  height: 85%;
  width: 98%;
  object-fit: contain;
  overflow:auto;
  font-size: 3vh;
  color: black;
  text-shadow: .5px .5px antiquewhite;
  border: 3px inset tan;
  
}

#poemHolders {
  display: flex;
  position: fixed;
  top: 10vh;
  left: 10vh;
  place-self: center;
  height: 90%;
  width: 100%;
  overflow: auto;
  font-size: 3vh;
  color: black;
  text-shadow: 2px 2px darkgray;
  column-gap: 10%;
}

#poemSubmissionTools {
  display: flex;
  flex-direction: column;
  place-self: center;
  flex: 0 0 30%;

}
#createYourOwnPoemHolder {
  flex: 0 0 50%;
  place-self: center;
  text-align: center;
  
}