body {
    background-color: #F2EAEA;
}

/* Guidelines for custom font taken from: https://www.w3schools.com/cssref/atrule_font-face.php ; Jost font downloaded for free from Google Fonts 
(designed by Owen Earl), Sulphur Point font downloaded for free from Google Fonts (designed by Dale Sattler) */

@font-face {
  font-family: jost;
  src: url(Jost-Regular.ttf)
}

@font-face {
  font-family: jost;
  src: url(Jost-Bold.ttf);
  font-weight: bold;
}

@font-face {
  font-family: jost;
  src: url(Jost-MediumItalic.ttf);
  font-style: italic;
}

@font-face {
  font-family: sulphur;
  src: url(SulphurPoint-Regular.ttf)
}

@font-face {
  font-family: sulphur;
  src: url(SulphurPoint-Bold.ttf);
  font-weight: bold;
}

/* Border-box box-sizing used to fix overflow of header image in grid created by zooming in and out; I asked my friend Emma Needleman (who
uses CSS for work) to look over my CSS, she put a query in chatGPT, and she received the instruction to insert the following 5 lines of code */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
    max-width: 100%;
    min-width: 80vw;
    border: 1px solid #DDC471;
    height: auto;
}

h1 {
    font-family: sulphur, "Century Gothic", jost, sans-serif;
    font-size: 12px;
    text-align: right;
    font-weight: bold;
    letter-spacing: 2px;
    color: #DDC471;
}

h2 { 
    font-family: sulphur, "Century Gothic", jost, sans-serif;
    font-size: 24px;
    font-weight: bold; 
    text-align: center;
    color: #62151E;
}

h3 { 
    font-family: sulphur, "Century Gothic", jost, sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    text-align: left;
    color: #62151E;
}

h4 { 
    font-family: sulphur, "Century Gothic", jost, sans-serif;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    text-align: left;
    color: black;
}

h5 { 
    font-family: sulphur, "Century Gothic", jost, sans-serif;
    font-size: 18px;
    line-height: 40%;
    font-weight: bold; 
    text-transform: uppercase;
    text-align: center;
    color: #62151E;
}
/* CSS grid learned from https://www.w3schools.com/css/css_grid.asp ; specific pages consulted were the intro, grid columns/rows, grid container, and grid item pages */

/* Alignment of grid containers learned from here: https://stackoverflow.com/questions/46469127/center-a-grid-container-vertically-and-horizontally */

/* I learned about the vh and vw units here (which helped solve some problems I was having with zooming in and out affecting the grid layout): https://www.sitepoint.com/css-viewport-units-quick-start/ */

.container {
  display: grid;
  grid-template-columns: 20vw 20vw 20vw 20vw;
  margin: 5px 10vw 5px 10vw;
  align-items: center;
  justify-content: center;
}

.title {
    background-color: #62151E;
    margin: 5px 0px 2.5px 0px;
    padding: 0px 5px 0px 5px;
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 1;
    grid-column-end: span 4;
}

/* Guidelines for styling hyperlinks for a specific div class derived from: https://stackoverflow.com/questions/11366357/styling-links-inside-a-div-with-a-specific-class */

.title a {
    color: #DDC471;
    text-decoration-line: underline;
}

.title a:visited {
    color: #DDC471;
    text-decoration-line: underline;
}

.title a:hover {
    color: #B3993F;
    text-decoration-line: underline;
}

.title a:active {
    color: #B3993F;
    text-decoration-line: underline;
}

.header {
    margin: 2.5px 0px 1px 0px;
    grid-row-start: 2;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: span 4;
    max-width: 80vw;
    min-width: 80vw;
}
.navigation {
    background-color: #DDC471;
    font-family: sulphur, "Century Gothic", "Segoe UI", jost, sans-serif;
    font-size: 24px; 
    font-weight: bold; 
    text-align: center;
    color: #62151E; 
    border: 1px  #DDC471;
    margin: 1px 0px 2.5px 0px;
    grid-row-start: 3;
    grid-row-end: 3;
    grid-column-end: span 4;
}

/* Navigation bar based off of float example from: https://www.w3schools.com/css/css_navbar_horizontal.asp */


.navigation ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: #DDC471;
  text-align: center;
}

.navigation ul li {
  float: left;
  text-align: center;
}

.navigation ul li a {
    
  display: block;
  color: #62151E;
  font-size: 20px;
  text-align: center;
  padding: 6px 12px 5px 12px;
  text-decoration: none;
  overflow: hidden;
}

.navigation ul li a:hover {
  background-color: #FFEBAA;
}

.navigation a:visited {
    text-decoration-line: none;
}

.navigation a:hover {
    text-decoration-line: none;
}

.maincontent {
    background-color: #FFFDFD;
    font-family: jost, sans-serif;
    font-size: 16px;
    text-align: left; 
    color: black; 
    border: 1px solid #DDC471;
    border-radius: 15px;
    margin: 2.5px 2.5px 5px 0px;
    padding: 20px 35px 40px 40px;
    grid-row-start: 4;
    grid-row-end: span 2;
    grid-column-start: 1;
    grid-column-end: span 3;
}

.sidebar {
    background-color: #DDC471;
    color: black; 
    font-family: jost, sulphur, sans-serif;
    border: 1px solid #DDC471;
    border-radius: 15px;
    margin: 2.5px 0px 5px 0px;
    grid-row-start: 4;
    grid-row-end: span 1;
    grid-column-start: 4;
    grid-column-end: 4;
}

.sidebar_homepage {
    background-color: #DDC471;
    color: black; 
    font-family: jost, sulphur, sans-serif;
    font-size: 15px;
    text-align: left;
    margin: 2.5px 0px 5px 2.5px;
    padding: 0px 15px 10px 15px;

}

.sidebar_subpage {
    font-family: jost, sans-serif;
    font-size: 14px;
    text-align: left;
    text-transform: uppercase;
    border: 1px solid #DDC471;
    border-radius: 15px;
    padding: 5px 10px 5px 0px;
}

.sidebar_subpage a {
    color: black;
    font-size: 12px;
}
.sidebar_subpage a:visited {
    color: black;
    font-size: 12px;
    text-decoration-line: none;
}

.sidebar_subpage a:hover {
    color: #83202b;
    font-size: 12px;
}

.sidebar_subpage ul {
    list-style-type: square;
}

.sidebar_subpage li {
    display: list-item;
    padding: 0px 0px 4px 0px;
}

.sidebar_subpage li::marker {
  color: #83202b;
}

.footer {
    font-family: sulphur, "Century Gothic", jost, sans-serif;
    font-size: 10px;
    letter-spacing: .5px;
    text-align: center; 
    color: black; 
    padding: 5px 60px 5px 60px; 
    margin: 5px 25px 5px 25px;
}
a {
    color: #62151E; 
    text-decoration-line: none; 
}

a:hover {
     color: #62151E; 
     text-decoration-line: underline;
}

a:active {
    color: #62151E;
    text-decoration-line: underline;
}
a:visited {
    color:#62151E;
    text-decoration-line: underline; 
}

@media (max-width: 768px){
*,
*::before,
*::after {
  box-sizing: border-box;
}

ul li {
    float: none;
    font-size: 16px;
}
ul li a {
        padding: 2px;
        text-align: left;
    }

img {
    max-width: 100%;
    height: auto;
    border: 1px solid #DDC471;
}
.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  margin: 5px 10vw 5px 10vw;
  align-items: center;
  justify-content: center;
} 

.title {
    margin: 5px;
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 1;
    grid-column-end: span 4;
}
.header {
    margin: 5px;
    grid-row-start: 2;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: span 4;

}
.navigation {
    border: 1px solid #DDC471;
    padding: 10px 10px 10x 10px; 
    margin: 5px;
    grid-row-start: 3;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: span 4;
}

.maincontent {
    border: 1px solid #DDC471;
    font-size: 16px;
    text-align: left;
    padding: 15px 25px 25px 30px; 
    margin: 5px 2.5px 5px 5px;
    grid-row-start: 4;
    grid-row-end: span 2;
    grid-column-start: 1;
    grid-column-end: span 3;
}

.sidebar {
    padding: 5px 10px 10px 5px;
    margin: 5px 5px 5px 2.5px;
    padding: 2px;
    border: 1px solid #DDC471;
    grid-row-start: 4;
    grid-row-end: 4;
    grid-column-start: 4;
    grid-column-end: 4;
}
}

@media (max-width: 600px) {
*,
*::before,
*::after {
  box-sizing: border-box;
}

ul li {
    float: none;
    font-size: 16px;
}
ul li a {
        padding: 2px;
        text-align: left;
    }

img {
    max-width: 100%;
    height: auto;
    border: 1px solid #DDC471;
}
.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  margin: 5px 10vw 5px 10vw;
  align-items: center;
  justify-content: center;
} 

.title {
    margin: 5px;
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 1;
    grid-column-end: span 4;
}
.header {
    margin: 5px;
    grid-row-start: 2;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: span 4;

}
.navigation {
    border: 1px solid #DDC471;
    padding: 10px 10px 10x 10px; 
    margin: 5px;
    grid-row-start: 3;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: span 4;
}

.maincontent {
    border: 1px solid #DDC471;
    font-family: jost, sans-serif;
    font-size: 16px;
    text-align: left;
    padding: 15px 20px 25px 20px; 
    margin: 5px 5px 5px 5px;
    grid-row-start: 4;
    grid-row-end: span 2;
    grid-column-start: 1;
    grid-column-end: span 4;
}

.sidebar {
    padding: 0px 10px 15px 10px;
    margin: 5px 5px 5px 5px;
    border: 1px solid #DDC471;
    grid-row-start: 6;
    grid-row-end: 6;
    grid-column-start: 1;
    grid-column-end: span 4;
}
}