html, body {
	background: #2774ad;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	color: rgb(107, 107, 132);
}
 
body {
	font-family: 'Space Mono', Verdana, Geneva, sans-serif;
	font-size: 100%;
	width: 60%;
	margin-right: auto;
	margin-left: auto;
	padding: 2.5% 2.5% 0;
	background: white;
	line-height: 1.8;
}

h1 {
	font: 1.6em 'Space Mono', Verdana, Geneva, sans-serif;
	margin-bottom: .4em;
	color: rgb(83, 104, 138);
}

h2 {
	font: 3.2em 'Space Mono', Georgia, "Times New Roman", Times, serif;
	margin-bottom: .2em;
}

h3 {
	font-size: 1.2em;
}

main p {
	margin-bottom: 1em;
}

a {
	color: #fed000;
  font-weight: bold;
}

a:hover {
	color: rgb(120, 97, 55);
}

nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;      
  flex-direction: row; 
}

nav li {
  margin-right: 1rem;
}

nav a {
  font-size: 150%;
  align-self: center;
  text-decoration: none;
}

section {
  margin: 6rem 0;
}

pre {
	font-size: 1.4em;
	color: black;
	padding: .5em 1em;
	border-left: 1em solid #2774ad;
	background: #E7E7E7;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
	width: 80%;
}

dt {
	font-style: bold;
	font-size:1.2em;
}

dd {
	margin-bottom: 1.4em;
}

.center {
	text-align: center;
}

header h2 {
	padding-bottom: .2em;
	border-bottom: 1px solid gray;
}

header img {
  width: 100%;     
  height: auto;    
  display: block;  
  margin: 1.5em 0; 
}

footer {
	border-top: 1px solid gray;
	text-align: center;
	font-size: .8em;
	line-height: 4em;
	margin-top: 1em;
}

/* These are the sytles for the social links in the footer */
.social-links {
  display: flex;
  gap: 16px; 
  align-items: center;
  justify-content: center;
}

.social-links a {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  color: inherit; 
  gap: 0.5rem; 
}

.social-links svg {
  width: 24px;
  height: 24px;
}

/* These are the styles for the hgroup titles */
hgroup {
  text-align: left;
  padding-left: 16px;
  border-left: 10px solid #2774ad;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid gray;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
}

hgroup h3 {
  margin-bottom: 0;
}

hgroup p {
  margin: 0;
  font-weight: bold;
}

/* These are the styles for the <a> for the papers so they look like buttons */
.button {
  display: block;
  padding: 10px 20px;
  background-color: #2774ad;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
  margin: 0, 2rem;
  width: 4rem;
  text-align: center;
}

.button:hover {
  background-color: #0056b3;
}

/* These are the syles so that the books refrences are in a 2x# grid */
.book-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 2rem;
  max-width: 1000px; 
  margin: 0 auto;
}

.book-grid dl {
  background: #f9f9f9;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.book-grid img {
  display: block;
  margin: 0 auto 1rem auto;
  border-radius: 8px;
}

.img-80 {
  width: 80%;
  height: auto;
  border-left: 1em solid #2774ad;
}

/* These are the styles for makeing it so img/video/content can be side by side with text */
.flex-section {
  display: flex;
  align-items: flex-start; 
  gap: 2rem;
}

.flex-text {
  flex: 1;
}

.flex-content {
  flex: 0 0 auto;
}

.flex-content video {
  width: 100%;
  max-width: 700px;
  border-radius: 8px;
  align-self: center; 
}

/* This is to revesre the order of the text and content */
.flex-section-reverse {
  display: flex;
  align-items: flex-start; 
  gap: 2rem;
  flex-direction: row-reverse; 
}