/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

.special-elite-regular {
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
}

h1 {
  color: black;
  font-size: 24pt;
}

h2 {
  color: black;
  font-size: 20pt;
}

h3 {
  color: black;
  font-size: 18pt;
}

h4 {
  color: black;
  font-size: 16pt;
}


body {  
  background:
  linear-gradient(180deg, rgba(10, 10, 10, 0.65), rgba(10, 10, 10, 0.5)),
  url("images/white-recycle-paper-texture.jpg");
  background-size: cover;
  background-repeat: repeat;
  background-attachment: fixed; /* optional: makes texture stay put while scrolling */
  
  color: #1f1f1f;
  font-family: "Special Elite";
  line-height: 1;
  width: 90%;
  margin: 0 auto;
  top: 0%;
  left: 2%;
  font-size: 14pt;
  }

quote {
  font-style: italic;
  font-size: 22pt;
}

.divbasicalign{
  width:100%;
  margin: 0px auto;
  padding-left: 2.5%;
}

.divmain{
  background-color: rgba(255, 255, 255, 0.1);
  line-height: 1.5;
  width: 96%;
  margin: 0px auto;
  padding-top: 0.5%;
  padding-bottom: 1%;
  padding-left: 2%;
  padding-right: 2%;
}

.divstory{
  background-color: rgba(255, 255, 255, 0.4);
  line-height: 2.0;
  border-radius: 4px;
  border: 1px rgba(0, 0, 0, 0.5);
  width: 100%;
  margin: 40px auto;
  padding-left: 2.5%;
}

.divcallout{
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  border-radius: 0px 0px 4px 4px;
  border: 1px rgba(0, 0, 0, 0.5);
  width: 100%;
  margin: 0px auto;
/*  padding-top: 2.5%;*/
}

.divimage {
  flex-shrink: 0; /* prevent image div from stretching or shrinking */
}

.divimage img {
  width: 15em; /* or whatever fixed/relative size looks good */
  height: auto;
  border-radius: 4px;
  display: block;
  margin-right: 20px;
}

.divtext {
  flex: 1; /* allows text to take remaining width */
}

/* Nav bar */
ul.nav-bar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.50);
  display: flex;
  border-radius: 4px 4px 0px 0px; 
}

ul.nav-bar li a {
  display: block;
  color: black;
  padding: 10px 10px;
  text-decoration: none;
}

ul.nav-bar li a:hover {
  color: white;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 0px 0px 0px 0px; 
}
/*End Nav Bar*/

.divstoryfirstline
{
  text-indent: 0em;
}

.divstorysubline
{
  text-indent: 2em;
}

footer
{
  background-color: black;
  height: 40px;
  width: 100%;
}