:root {
    --red: rgb(191 43 17);
    --yellow: rgba(255,255,94,0.8);
    --gray: rgba(185,185,184,0.7);
    }

header h1 {
    text-align: center;
    font-family: "Pixelify Sans";
    font-weight: bolder;
    border-radius: 45px 45px 0 0;
}

#pagename, #leadinginfo, .pagedescript {
    background-color: var(--red);
}

p.pagedescript {
    text-align: center;
    font-size: 1.5rem;
    font-style: italic
}

figcaption {
  font-style: italic;
}

.apple>img {
  width: 20%;
  height: 20%;
  border-radius: 45px 0 0 45px;
}

figcaption.preview {
  max-width: 350px;
}

p.sbjctmatter {
  /* This indents all of my Ps with subject content, only */
  text-indent: 1em; 
  margin: 0;
  font-family: "Futura", system-ui;
  font-size: 1.15rem;
}

p {
  font-family: "Futura", system-ui;
  font-size: 1.15rem
}

p.sbjctmatter > dl{
  font-family: "Futura", system-ui;
}

  /* I need styling to give the uls within sbjctmatter the proper font */
p.sbjctmatter>ul>li {
  font-family: "Futura", system-ui;
}

#ital {
  font-style: italic;
  font-weight: lighter;
}

.underln {
  text-decoration: underline;
}

#leadinginfo {
    padding-left: 15px;
}
#TOC, .cntnts {
    background-color: var(--yellow);
}
section h1, h2 {
    text-align: left;
    font-family: "Pixelify Sans";
    font-weight: bold;
}
h1#leadinginfo {
    text-align: center;
}
h1#TOC {
    text-align: center;
}
dd {
    font-style: italic;
}
#execSum, #prjparts {
	background-color: var(--gray);
    padding-left: 15px;
}
#adverse, #aha, #vizDat {
    background-color: var(--yellow);
    padding-left: 15px;
}
#closing {
    background-color: var(--gray);
    padding-left: 15px;
}
#endit:not(footer) {
/*Adjusted to only have a border above contacts*/  
    background-color: var(--red);
    border-radius: 0 0 45px 0;
    padding-left: 15px;
    padding-top: 1px;
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    /*background-color: #eee;*/
    background-color: var(--gray);
    margin: 10px 0 10px 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: 8px var(--red);
    outline-style: dotted;
    transition: 0.4s;
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .accordion:hover {
    background-color: #969696;
  }

.accordYL {
        background-color: var(--yellow);
        margin: 10px 0 10px 0;
        cursor: pointer;
        width: 100%;
        text-align: left;
        border: 8px var(--red);
        outline-style: dotted;
        transition: 0.4s;
    }
      
      /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
      .active, .accordYL:hover {
        background-color: hsl(61, 38%, 49%);
      }

      /* Styling for the breadcrumbs */

      ul.breadcrumb {
        padding: 10px 16px;
        list-style: none;
        background-color: #eee;
      }
      ul.breadcrumb li {
        display: inline;
        font-size: 18px;
      }
      ul.breadcrumb li+li:before {
        padding: 8px;
        color: black;
        content: "/\00a0";
      }
      ul.breadcrumb li a {
        color: #0275d8;
        text-decoration: none;
      }
      ul.breadcrumb li a:hover {
        color: #01447e;
        text-decoration: underline;
      }