: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", system-ui;
    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;
}

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

.cntnts {
    font-family: "Futura", system-ui;
}

.ital {
  font-style: italic;
}

#prjparts li {
    font-weight: bold;
}

#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;
}

#vizDat, #execSum {
  padding-bottom: 15px;
}

#closing {
    background-color: var(--gray);
    padding-left: 15px;
    padding-bottom: 0;
    margin-bottom: 0;
}

#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;
}

#faileddrafts figcaption {
  max-width: 525px;
}

figcaption.mytarget {
  max-width: 525px;
}

/* Underline for spans...but is it redundant or easier to do some other way? */
.underln {
  text-decoration:underline;
}

/* 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%);
      }

      /* BREAD: 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;
      }

      /* Image styling */
      /* Styling of map image  */
      #bklynmap>img {
    max-width: 850px;
    width: 70%;
      }    

      figure#thewinner img {
        align-items: start;
        min-width: 450px;
      }     

      #grngem, #crwell, #pinkcomm, #eupine {
        height: 300px;
      }

      .neighborhood {
        height: 200px;
      }

      .amaran {
        max-width: 300px;
        min-width: 240px;
        width: 33%;
      }

      img.grateful {
        height: 380px;
      }

      #thewinner>img {
        max-width: 550px;
        min-width: 450px;
        width: 50%;
      }

      figure#faileddrafts img {
        display: flex;
        flex-direction: column;
        min-height: 425px;
        max-width: 550px;
        position: relative;
      }

      img#systemside {
        max-width: 650px;
        min-width: 450px;
        position: relative;

      }

      img.drip {
        max-width: 500px;
        min-width: 450px;
        position: relative;
        padding-bottom: 10px;
      }

      @media screen and (max-width: 530px) {
        /* Messy test styling to reduce images for mobile. Unfortunately, 
        this type of coding isn't mobile first... 
        Also, there must be a better way to style all of these images at once.*/
        img 
          {max-width: 440px;}
        #bklynmap>img 
          {min-width: 400px;}  
        figure#thewinner>img 
          {min-width: 440px;}
        figure#faileddrafts>img 
          {max-width: 440px;}
        figure#messup>img.drip
          {max-width: 440px;}
        figure>img 
          {max-width: 440px;}
        img#systemside 
          {max-width: 440px;}  
      }

      /* #overgarden>img {
        max-width: 400px;
        width: 40%;
      }  

      #overgarden>figure {
        vertical-align: text-top;
      } */

      




      /*Leftover css from other file. Test it! Move it to a note file after that.
h2{
    font-weight:bold;
}
aside{
    text-align:right;
}
footer{
    text-align:left;
}*/


/* This may be a good way to indent the content paragraphs, which should be given their own classes. */
/* p { text-indent: 1em; margin: 0 } */