html, body {
    margin: 0;
    height: 100%;
    width: 100%;
    background: url(/images/gray_water_3b_small_cropped.jpg) rgb(102, 102, 102) repeat center center fixed;
    background-size: cover;
    font-family: Arial, sans-serif; /* Doesn't seem to work. Should it include Roboto? */
}
/* Big background for 4k screens and bigger */
@media screen and (min-width: 2000px) {
    html, body {
        background: url(/images/gray_water_3b_big.jpg) rgb(102, 102, 102) repeat right bottom fixed;
    }
}
/* Small background for narrow screens and mobile */
@media screen and (max-width: 850px) {
    html, body {
        background: url(/images/gray_water_3b_mobile.jpg) rgb(102, 102, 102) repeat center bottom fixed;
        background-size: 100% auto; /* 100% width with overflowing height */
    }
}

@font-face {
    font-family: eightTrack;
    src: url(fonts/EIGHT3.TTF); /* Warning can be ignored */
}

/* Padding applied to the largest containers */
.superPadding {
    padding: 0.3% 8% 1%;
}
@media screen and (max-width: 1275px) {
    .superPadding {
        padding: 0.3% 6% 1%;
    }
}
@media screen and (max-width: 850px) {
    .superPadding {
        padding: 0.3% 4% 1%; /* Very narrow because mobile screens have very little horizontal space */
    }
}

/* Header Stuff */
header {
    background-image: linear-gradient(to bottom, aqua 3%, rgb(95, 100, 220) 45%, rgb(95, 100, 220) 51%, rgb(200, 0, 200) 97%);
    color: white; /* Default color for header text */
    border-bottom: 3px white solid;
    margin-bottom: 65px; /* Since box-shadow is based on pixels (for stylistic consistency), the gaps that the shadows reside in will also be based on pixels */
    box-shadow: 0 14px 20px 15px rgba(15, 15, 45, .6)
}
.headerGrid {
    margin-top: 39px; /* Consistent size so the gradient lines up correctly with the text */
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 2.6vw; /* Unused on narrow screens */
    row-gap: 4.3vw; /* Only used on narrow screens. Warning cause unknown, but seems harmless */
    margin-bottom: 4px;
}
/* Header changes for mobile */
@media screen and (max-width: 850px) {
    .headerGrid {
        grid-template-columns: 1fr; /* On narrow screens, the nav is instead placed below the logo */
        margin-bottom: 8px;
    }
    header {
        margin-bottom: 50px; /* Since box-shadow is based on pixels (for stylistic consistency), the gaps that the shadows reside in will also be based on pixels */
  }
}
#logo img {
    width: 100%;
    height: auto;
    /* Style for alt text */
    font-family: eightTrack;
    font-size: 3.4375vw;
    color: white;
    /* Decided against centering the alt text horizontally because it's not a big deal and it was affecting the look of the intdended display */
}
header nav {
    border-top: 3px white dotted;
    display: flex;
    justify-content: space-around;
    font-size: 1.875vw;
    font-weight: bold;
    border-bottom: 3px white dotted;
    position: relative;
    bottom: 0.625vw; /* Position slightly higher so the borders line up nicer with the logo */
}
@media screen and (max-width: 1275px) {
    header nav {
        font-size: 2.6vw; /* Text gets bigger when padding is reduced */
    }
}
.nav-items {
    text-align: center; /* maybe unnecessary */
    align-content: center;
}
nav a {
    transition-property: background-color;
    transition-duration: 0.2s;
}
nav a:link, nav a:visited {
    color: rgb(255, 153, 0);
    text-decoration: none;
}
nav a:focus, nav a:hover {
    color: white;
    text-decoration: underline;
    background-color: rgba(0, 0, 0, 0.5);
}
nav a:active {
    color: magenta;
}
/* Style changes for the nav item corresponding to the current poge */
#currentPage a:link, #currentPage a:visited {
    color: yellow;
    text-decoration: underline;
}
#currentPage a:focus, #currentPage a:hover, #currentPage a:active {
    color: white;
}
/* Style changes to nav for narrow screens */
@media screen and (max-width: 850px) {
    header nav {
        padding-top: 0.5rem;
        font-size: 4.6vw; /* Font size is still rather small: smaller than the paragraph text. But increasing it pushes the items too close together. A 2nd row is needed if I want to fix it */
        padding-bottom: 0.5rem;
    }
    nav a:link, nav a:visited {
        color: white;
    }
    nav a:focus, nav a:hover, nav a:active {
        background-color: black;
    }
    nav a:active {
        color: magenta;
    }
    #currentPage a {
        background-color: black;
    }
    #currentPage a:link, #currentPage a:visited, #currentPage a:active {
        color: white;
    }
}

/* Main Content, universal */
section {
    border-top: 26px rgb(90, 235, 235) solid;
    border-radius: 13px 13px 8px 8px;
    background-color: white;
    padding: 1.875rem 2.5rem 1.3125rem; /* Was 30, 35, and 18px, although the values have since been adjusted. 32px between the top border and the h2, 40px between the bottom element and the bottom of the section */
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 1.25rem;
    box-shadow: 15px 21px 20px 2px rgba(15, 15, 45, .6), 0 -15px 30px 2px rgba(0, 0, 0, .4) inset;
    margin-bottom: 55px; /* Since box-shadow is based on pixels (for stylistic consistency), the gaps that the shadows reside in will also be based on pixels */
}
section h2 {
    margin-top: 0; /* The space between the heading and the top is determined by section padding */
    line-height: 1.0; /* If you adjust this value, make sure the section's .subheading line-height is adjusted by an equivalent amount. Assumes all text will be on a single line; TO DO: increase value */
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 2.125rem;
    font-weight: normal;
    text-decoration: underline 2px; /* Warning cause unknown, but seems harmless */
    margin-bottom: 1.375rem; /* If you adjust this value, make sure the section's .subheading margin-bottom is adjusted by an equivalent amount. About 35px between h2 underline and content on my screen */
}
section>hgroup>h2 {
    margin-bottom: 0.875rem; /* Margin reduced so that subheadings appear closer to the heading. Not intended to place actual content closer to the heading: About 18-20px between h2 underline and subheading on my screen */
}
section .subheading {
    margin-top: 0; /* Spacing determined by hgroup's h2's bottom margin */
    line-height: 1.0; /* Line-height of the subheading matches the line-height of an h2 with no subheading */
    color: rgb(100, 100, 100);
    font-style: italic;
    margin-bottom: 1.375rem; /* Bottom margin of the subheading matches the bottom margin of an h2 with no subheading: About 35px between h2's subheading and the content on my screen */
}
section h3 {
    margin-top: 0; /* Space between elements is based on bottom margins */
    line-height: 1.75; /* Matches p line-height. */
    font-size: 1.5rem;
    margin-bottom: -0.25rem; /* Margin reduced so that content appears closer to the heading. About 18-20px between h3 and the p on my screen, same as .subheading's spacing */
}
section p {
    margin-top: 0; /* Spacing between elements is based on bottom margins */
    line-height: 1.75; /* Adjusting line height will also increase the space between elements, necessitating additional adjustments. About 20px between lines on my screen. Should match h3's line-height */
    text-indent: 3.125rem; /* Lots of sites have no indent, should I remove it? But then the vertical spacing probably needs adjusting */
    margin-bottom: 0.625rem; /* If you adjust this value, make sure the section bottom padding is adjusted by an equivalent amount. About 30px between elements on my screen */
}
section a:link, nav a:visited {
    color: rgb(0, 0, 255);
    text-decoration: underline;
}
section a:focus, section a:hover {
    color: rgb(255, 140, 0);
}
section a:active {
    color: magenta;
}
section .video {
    aspect-ratio: 16/9; /* Code functions as expected, error can likely be ignored */
    margin: 2.0625rem 0 0.9375rem; /* Values assume video is placed below a subheading and above a p element; 35px above, 30 below */
}
.video iframe {
    border: none;
    background-color: rgb(19, 19, 19);
}
/* Style changes for narror screens and mobile */
@media screen and (max-width: 850px) {
    section {
        padding: 1.125rem 1.0rem 0.625rem; /* About 27px on top, 26 on bottom */
        font-size: 1.125rem; /* Reduced font size in order to fit more characters per line on mobile */
        box-shadow: 10px 21px 10px 0 rgba(15, 15, 45, .6), 0 -15px 30px 2px rgba(0, 0, 0, .4) inset; /* Less horizontal space and blurring compared to desktop view, since there's less horizontal space for decoration */
        margin-bottom: 45px; /* Since box-shadow is based on pixels (for stylistic consistency), the gaps that the shadows reside in will also be based on pixels */
    }
    section h2 {
        line-height: 1.5;
        font-size: 1.625rem; /* Reduced font size in order to fit more characters per line on mobile */
        text-align: center;
        text-decoration: none; /* Not sure why I need this declaration a 2nd time for it to work on mobile. Looks better without underline for headings with multiple lines, though */
        margin-bottom: 0.25rem; /* About 21-22px */
    }
    section>hgroup>h2 {
        margin-bottom: 0; /* 17px between h2 and subheading */
    }
    section .subheading {
        line-height: 1.5;
        text-align: center;
        text-indent: 0;
        margin-bottom: 0.25rem; /* About 21-22px */
    }
    section h3 {
        line-height: 1.5;
        font-size: 1.3125rem;
        font-weight: normal;
        margin-bottom: 0; /* About 15px */
    }
    section p {
        line-height: 1.5; /* 13px between lines */
        text-indent: 1.5625rem; /* I didn't want to commit to removing the indent entirely, so I just reduced it */
        /* About 23-24px bottom margin */
    }
    section .video {
        margin: 1.0rem 0 0.6875rem;
    }
}


section img {
    width: 100%;
    /* Center images */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Footer Stuff */
footer {
  margin: 5px auto 10px;
  border-top: 3px white solid;
  background-color: rgba(255, 255, 255, .45);
  border-bottom: 3px white solid;
  width: 84%;
}
@media screen and (max-width: 1275px) {
  footer {
    width: 88%;
  }
}
@media screen and (max-width: 850px) {
  footer {
    width: 92%;
  }
}
footer p {
  margin: 0;
  text-align: center;
  padding: 10px 0;
}
#bottomPad {
  padding-top: 100px;
}