/*The main class which contains the text colour and background colour, font sizes used in the paragraphs. */
.main {
  background-color: #396534;
    color: white;
    text-align: left;
    padding: 0;
    font-weight: bold;
    font-size: 20px;
}
/*The class containing the formatting for the felexbox layout*/
.flex-row {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
}
/*Contains the positioning and flex for the text boxes  */
.text-box {
  flex: 1;
  background-color: #396534;
  color: white;
  padding: 20px;
  margin-right: 10px;
  box-sizing: border-box;
}
/*These two classes specify how large an image should be when it is inside a text box*/
.inside-txt {
  width: 95%;
}
.inside-txt-small {
  width: 150px;
}
/*This gives the flex for the full size images*/
.image-box {
  flex: 1;
}
/*This instructs how large the fill size images are and gives margins for them  */
.image-box img {
  width: 100%;
  max-width: 1080px;
  height: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
.text-box h2 {
  margin-top: 0;
}
/*This class is for the h1 headers inside the full-section */
.full-section-h1 {
  background-color: #396534;
  color: white;
  padding: 20px;
  margin: 10px;
  margin-top: 0;
  margin-bottom: 0;
}
/*This is the class used for the text boxes that span across the full page in width, used in the reflection.html page */
.full-section {
  background-color: #396534;
  color: white;
  padding: 20px;
  margin: 10px;
  margin-top: 50px;
  margin-bottom: 75px;
}
/*This is the class for the h2-headers that are highly featured thorughout the page*/
.header-h2 {
  color:white;
  font-family: monospace;
  font-size: 20px;
  text-align: center;
  padding: 0;
  margin: 0;
  width: fit-content;
}
/*This defines the height of the overall page, the standard font family and lighter-green background colour*/
body {
  font-family: monospace;
  height: fit-content;
  max-width: fit-content;
  background-color: #7A9B76;
}
/*This defines the formatting for the footer*/
footer {
  background-color: #396534;
  height: 50px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding-top: 0;
  padding-bottom: 10px;
  color: white;
}
/*This defines formatting for the header*/
header {
  background-color: #396534;
  position: sticky;
  height: 35px;
  padding: 10px 12px;
  top: 0;
  width: auto;
  margin-bottom: 1%;
  justify-content: center;
  align-items: center;
  display: flex;
}
/*This defines how nav bar works  */
nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #396534;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*This formats an unclicked link in the nav bar */
nav a {
  display: block;
  color: white;
  font-size: 15px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/*This adds a darker colour to the link in the nav bar when hovering over it*/
nav a:hover {
  background-color: #30562B;
}
/*This defines the font size and overall formatting for the links in the full-section which are the sources*/
.full-section a {
  display: block;
  color: white;
  font-size: 12px;
  text-align: left;
}
/*This adds a darker colour to the link in the sources section when hovering over it*/
.full-section a:hover {
  background-color: #30562B;
}
/*This changes the link colour in the sources section to grey once opened */
.full-section a:visited {
  color: gray;
}
/*This defines the formatting for the link in the footer which is my email address*/
footer a {
  display: block;
  color: white;
  font-size: 15px;
  text-align: center;
}
/*This changes the link colour in the footer to grey once opened */
footer a:visited {
  color: gray;
}