/* =====================
     CSS Reset
======================== */

/* remove browser default margins and padding for cross browser consistency */ 
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption {
  margin: 0;
  padding: 0;
} 

/* use boder-box instead of default content-box to avoid addition of extra padding and borders */
*, *::before, *::after {
box-sizing: border-box;
}

/* Set a default font family for the entire document */
html {
font-family:Georgia, 'Times New Roman', Times, serif /* Replace 'Your Main Font' with your chosen font */
}

/* Ensure specific elements inherit the font family from their parent */
body, button, input, textarea, select {
font-family: inherit;
}

/* Define a different font family for headings, if desired */
h1, h2, h3, h4, h5, h6 {
font-family: 'Your Heading Font', sans-serif; /* Replace 'Your Heading Font' with your chosen font for headings */
}

ul, ol {
list-style: none; /* Will need to remove or override for bullets */
}

a {
color: inherit;
}

/* Ensure images don't exceed containing element. Replace inline with block prevents for instance, bottom padding */
img {
max-width: 100%;
display: block;
}

/* Ensure HTML5 elements display correctly in older browsers */
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
display: block;
}

/* =====================
     Base Styles
======================== */

body {
  color: #777777;
  background: #f8f5eb;
  max-width: 100%;
  position: relative;
  min-height: 100vh;
}
a { /* Base link styles */ }

/* =====================
     Layout Components
======================== */

header {
  max-width: 720px;
  margin: auto;
  color: #777777;
  background: #f8f5eb;
  padding: 0px;
}

header nav a {
text-decoration: none;
color: inherit;
font-family: sans-serif;
font-size: 1.1em;
font-weight: bold;
padding-right: 0.4em;
padding-bottom: 1em;
}

header h1 {
     font-size: 2.5em;
     padding-top: 1em;
     padding-bottom: 1.7em;
     color: #6ab04a;
}

/* created a class here as was unable to prevent the underlining using the above 'header h1' or using 'header h1 a' */
header .site-title {
     text-decoration: none;
}

header .logout-link {
    float: right;
    text-decoration: none;
    margin-top: 5px;
    font-size: smaller;
    font-family: Arial, Helvetica, sans-serif;
}

footer { 
  max-width: 720px;
  margin: auto;
  color: #777777;
  background: #f8f5eb;
  padding: 0px;
  font-size: 14px;
}

main {
  max-width: 720px;
  margin: auto;
  color: #777777;
  background: #f8f5eb;
  padding: 0px;
}

main h3 {
     font-size: 1.5em;
     padding-bottom: 1em;
}

.main-body {
     line-height: 1.4em;
}

.main-body a {
     color: #6ba8b6;
}

/* ====================================
     Reusable Components/Utilities
======================================= */

.btn { /* Button styles */ }
.text-center { /* Text alignment utility */ }
.long-link {
     word-wrap: break-word;
}


/* ========================
     Responsive Design
=========================== */

@media (min-width: 320px) and (max-width: 575px) { /* Small phones */ 
     main, header, footer {
          max-width: 90%;
          font-size: 16px;
     }

     header h1 {
          font-size: 2.2em;
     }
}

@media (min-width: 576px) { /* Small phones */ 
     main, header, footer {
          max-width: 90%;
          font-size: 16px;
     }
}
@media (min-width: 768px) { /* Medium phones and small tablets */ 
     main, header, footer {
          max-width: 73%;
          font-size: 18px;
     }
}
@media (min-width: 992px) { /* Tablets and small laptops */ 
     main, header, footer {
          max-width: 63%;
          font-size: 18px;
     }
}
@media (min-width: 1200px) { /* Large laptops and desktops */ 
     main, header, footer {
          max-width: 55%;
          font-size: 18px;
     }
}
@media (min-width: 1400px) { /* Large desktops */ 
     main, header, footer {
          max-width: 720px;
          font-size: 18px;
     }
}

/* =====================
     State Styles
======================== */

a:hover { /* Link hover state */ }
.btn:active { /* Button active state */ }
etc.

/* =========================
     Page-Specific Styles
============================ */

.home-page { /* Home page specific styles */ }
.about-page { /* About page specific styles */ }
etc.