/*the parent id for standard text - the line spacing and linear gradient are meant to line up to make the page look like lined paper*/
#main-text {
  padding: 5px;
  background: repeating-linear-gradient(to bottom, white 0px, white 25px, #aaa 26px), #fff1e0;
  width: 100%;
  margin: auto;
  box-sizing: border-box;
  line-height: 1.855;
}
li {
  line-height: 1.855
}
ol {
  line-height: 1.855;
  margin: 0px;
}
/*main text in the <p> tags with no margin or padding*/
#main-text p {padding:0;margin:0;}
/*example of another class, done as shown by documentation below the author one*/
#main-text .quote {
  font-size: 20px;
  font-style: italic;
  text-align: right;
}

#main-text .author {font-size: 14px; text-align: right;}
/* above activated by doing "<p class="quote">"*/

#lucida {
position:relative; 
left: 300px;
width: 150px;
height:125px;
}

/*nav bar below the site banner, including tabs that are equally spaced*/
#nav a {
  color: white;
  padding: 0 14px;
  text-decoration: none;
  border-radius: 15px 15px 0px 0px;
  transition: all 0.1s ease-in-out;
}
#nav a:hover {
  box-shadow: inset 0px 0px 0px rgba(0,0,0,0.3), inset 0px 0px 0px rgba(0,0,0,0.3), inset 0px 0px 0px rgba(0,0,0,0.3), 0px 0px 0px rgba(0,0,0,0.3);
  transform: rotateX(20deg);
}
#nav {
  width: 100%;
  margin: auto;
  background: linear-gradient(#02bef7, #037ca1);
  display: flex;
  justify-content: space-around;
}
/*classes for the buttons on the navbar - see .css document for how these work*/
#nav a.active {
  border: 1px solid white;
}

#nav a.green {
  background: linear-gradient(green, darkgreen);
}
#nav a.red {
  background: linear-gradient(red, darkred);
}
#nav a.yellow {
  background: linear-gradient(gold, orange);
}
#nav a.blue {
  background: linear-gradient(blue, darkblue);
}
#nav a.black {
  background: linear-gradient(darkgrey, black);
}
/*where the copyright thingy is, linear gradient as usual*/
footer {
  width: 100%;
  margin: auto;
  background: linear-gradient(#02bef7, #037ca1);
  color: white;
  padding: 0 7px;
  box-sizing: border-box;
  border-radius: 0 0 7px 7px;
}

/*banner at the top of the site, changes width depending on browser window size, up to 1500px*/
.banner {width:100%;margin:auto;display:block;max-height:100px;max-width:1500px;}

/*background image*/
body {
  background: url("background_view.jpg");
  background-size:cover;
  background-repeat: no-repeat;
}

.container {
  width: 80vw;
  margin: auto;
}
/*title banner of the website, shows the title split across the top with a background (and a transparent gradient on top)*/
.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25), rgba(0,0,0,0.65)), url("background_clouds.jpg");
  background-size: cover;
  box-sizing: border-box;
  border-radius: 7px 7px 0 0;
  font-family: "Trebuchet MS";
  letter-spacing: -1px;
}