:root {
  --topMargin: 15vh;
  --bottomMargin: 80vh;
  --shadeColor: rgb(2, 75, 128); 
  --shadeOpacity: 85%;
  --titleFontSize: 1.8rem;
  --menuFontSize: 2.8rem;
  --menuLineHeight:5rem;  
  --haikuFontSize: 3rem;
  --haikuLineHeight:4.5rem;  
}
body
{
  margin: 0;
  padding: 0;
  background-color: whitesmoke;
  color: black;
  font-family: "Avenir Next", "Avenir", sans-serif;
}

#title {
  /* intentionally showing the title only when the side nav is closed */
  position: fixed;
  margin-left: 80px;
  margin-top: 18px;
  color: whitesmoke;
  z-index: 4;
  font-size: var(--haikuFontSize);
}

#content {
  display: flex;
  justify-content: space-evenly;
  transition: margin-left .5s;
}

#main {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-right: 50px;
  overflow: auto;  
  margin-bottom: 70vh;
}


.haiku {
  display: flex;
  color: black;
  font-size: var(--haikuFontSize);
  line-height: var(--haikuLineHeight);
  padding: 20px;
  text-indent: -20px; /* if word-wrap, indent */
}  


.haiku ul {
  list-style-type: none;
}

.category {
  display: flex;
  flex-direction: column;
}

#topShade {
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: var(--shadeOpacity);
  background-color: var(--shadeColor);
  background-image: linear-gradient(to top, whitesmoke, rgba(0,0,0,0));
}

#bottomShade {
  position:fixed;
  /* top: 60vh; */
  left: 0;
  right: 0;
  background-color: var(--shadeColor);
  opacity: var(--shadeOpacity);
  background-image: linear-gradient(to bottom, whitesmoke, rgba(0,0,0,0));
}

#copyright {
  position: fixed;
  bottom: 10;
  right: 20;
  z-index: 10;
}

#titleBar {
  position: fixed;
  bottom: 15;
  left: 25;
  z-index: 10;
  font-size: var(--titleFontSize);
  font-weight: 600;
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0));
	background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
}