/* Light Mode - Desktop */
body {
	background-color: #fafafa;
    color: black;
    margin: 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.1em;	
	padding: 10px;
	overflow-x: hidden;
}

/* Dark Mode - Desktop */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #00001E;
		color: white;      
	}
}

/* Light Mode - Mobile and Tablet */
@media screen and (max-width: 1080px) {
body {
    background-color: #fafafa;
   	font-size: 1.2em;
    }
}

/* Dark Mode - Mobile and Tablet */
@media screen and (max-width: 1080px) and (prefers-color-scheme: dark) {
body {
        background-color: #00001E;
        color: white;
        font-size: 1.2em;
     }
}
/* Responsive Container */
.container {
	width: 100%;
	max-width: 930px;
	margin: 0 auto;
  	display: grid;
  	grid-template-areas:
    "masthead masthead"
    "navigation navigation"
    "content content2"
    "footer footer";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 80px auto auto auto 80px;
  gap: 10px;
    	
}

/* Assign grid areas */
.masthead { grid-area: masthead; }
.navigation { grid-area: navigation; }
.content { grid-area: content; }
.content2 { grid-area: content2; }
.footer { grid-area: footer; }

/* Responsive: Tablet and below */
@media (max-width: 1080px) {
  .container {
  	width: 90%;
  	max-width: 800px;
	grid-template-areas:
		"masthead"
      	"navigation"
      	"content"
      	"content2"
      	"footer";
    grid-template-columns: 1fr;
    grid-template-rows: 80px auto auto auto 80px;
    gap: 10px;
   
  }
}

/* Responsive: Mobile */
@media (max-width: 610px) {
  .container {
  	width: 90%;
    grid-template-areas:
      "masthead"
      "navigation"
      "content"
      "content2"
      "footer";
	grid-template-columns: 1fr;
	grid-template-rows: 80px auto auto auto auto;
	gap: 10px;

   }
}
.masthead {
	margin-left: 10px;
	margin-top: 10px;
}

.content {
	max-width: 560px;
	margin-left: 10px;
}
.content2 {
	max-width: 560px;
	margin-left: 10px;
}
/* Navigation Styles */

.navigation {
  grid-area: navigation;
}
.navigation ul {
  list-style-type: none;
  padding: 0;
  margin-left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.navigation li {
  flex: 0 0 auto;
}
.navigation a {
  font-size: 1em;
  text-decoration: none;
  color: #000;
  display: block;
  padding: 5px;
  border: 2px solid #A1887F;
  background-color: #FDD835;
}
.navigation a:hover {
	color: black;
  	background-color: #FFEB3B;
	}

/* Mobile nav specific adjustments */
@media (max-width: 610px) {
  .navigation ul {
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}
/* Content Styles */

/* Headings */
h1,h2,h3,h4,h5,h6 {
	color: black;
	font-weight: normal;
}
/* Dark Mode - Desktop */
@media (prefers-color-scheme: dark) {
h1,h2,h3,h4,h5,h6 {
	color: white;
	font-weight: normal;
 	}
}
/* Horizontal Lines */
hr {
      border: none; /* Removes default 3D border */
      height: 2px; /* Sets the line thickness */
      background-color: #A03232; /* Sets the line color */
      width: 590px;
    }

/* Footer Styles */
.footer p, .footer a {
	font-size: 0.85em;
	color: black;
	text-decoration: underline;
	margin: 0 auto;
	text-align: center;
}

.footer a:hover {
	color: #BF360C;
}
/* Dark Mode - Desktop */
@media (prefers-color-scheme: dark) {
	.footer p, .footer a {
		color: white;
	}
	.footer a:hover {
		color: #FDD835;
	}
}


/* Link Styles */
a {
	color: black;
	text-decoration: underline;
}
a:hover {
	color: #BF360C;
	text-decoration: underline;
}
/* Dark Mode - Desktop */
@media (prefers-color-scheme: dark) {

a {
	color: white;
	text-decoration: underline;
}
a:hover {
	color: #FDD835;
	text-decoration: underline;
	}

}

.style_bold {
	font-weight: bold;
}
.style_italic {
	font-style: italic;
}
.quote {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.0em;
	font-style: italic;
	color: #FFFFFF;
	border-style: none;
}

.quote p {
	margin: 0;
	padding: 0;
}