/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/**
 * Typography & Text styles
 */

/* html is set to 62.5% so that all the REM measurements are based on 10px sizing. So basically 1.5rem = 15px */
html {
  font-size: 62.5%;
}
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Segoe UI", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #FFFFFF;
  cursor: url('data:image/x-icon;base64,AAACAAEAICAQAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAAdpr1AF7KwwBUcNsATSkVAOjy8ABnr1YAVkgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREREREREREREAAAAAAAARmZiVVVVVVJmZkAAAAAAAEZmIlVVVVVSJmZAAAAAAABGYiJVVVVVUiJmQAAAAAAABGIiVVVVVVIiZAAAAAAAAARiIiVVVVUiImQAAAAAAAAEYiIiVVVSIiJkAAAAAAAABCIiIiIiIiIiJAAAAAAAAAByESIiMiIhEnAAAAAAAAAAQRESJzciERFAAAAAAAAAAEEREiJyIhERQAAAAAAAAAAHEXciIidxFwAAAAAAAAAABCJ3IiInciQAAAAAAHdAAAQiIiIiIiIkAAAAAAB2ZwAAQiJ0RHIiQAAAAAAAdmZAAAREAAAERAAAAAAAAEZiJAAAAAAAAAAAAAAAAABGIiJAAAAAAAAAAAAAAAAARiIiJwAAAAAAAAAAAAAAAEIiIiJwAAAAAAAAAAAAAAByIiIiJAAAAAAAAAAAAAAAciIiIiQAAAAAAAAAAAAAAERERHd0AAAAAAAAAAAAAAD////////////////////////////////////////////////4AAD/8AAAf/AAAH/wAAB/+AAA//gAAP/4AAD/+AAA//wAAf/8AAH//AAB//4AA//+AAP/HgAD/w8AB/8Hj4//A////wH///8A////AH///wA///8AP///AD///w=='), auto;
}
/**
 * Links
 */
 
a {
  font-weight: normal;
  text-decoration: none; 
  color:#50b659;
}
a:focus {
  outline: thin dotted;
}

small {
  font-size: 75%;
}

/**
 * Headings
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
  text-rendering: optimizeLegibility; /*  voodoo to enable ligatures and kerning | https://developer.mozilla.org/en-US/docs/CSS/text-rendering */
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300;
}
h1 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h2 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h3 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h4 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h5 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
h6 { font-size: 1.4rem; line-height: 1.6;  letter-spacing: 0; }

/**
 * Paragraphs
 */
p {
  margin: 0 auto 1.5em auto; /* bottom margin for paragraphs */
}
p + p {

}

/**
 * Quotes & Blockquotes
 */
q {
  quotes: '\00201C' '\00201D';
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

blockquote {
  /*background-color: #F8F8F8;*/
  border-left: 2px solid #247721;
  margin: 1.6em 10%;
  padding: .75em 1em;
  font-size:1.8rem;
}
blockquote p:last-child {
  margin-bottom: 0;  
}

/**
 * Layout styles
 */

/* Full size background image */
html, #container, .inner { background-color:transparent;}
html {
  background:url(background.jpg) center center no-repeat fixed;
  background-size:cover;
}
body{
  max-width:800px;
  margin:25px auto;
}

header, #content, footer { 
  background: rgba(0,0,0,.8); 
  padding:25px;
  border-radius: 8px;
  color:#FFFFFF; 
}

iframe {
  max-width:100%;
}
/* Menu Links */
ul.main-menu {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  list-style: none;
}
ul.main-menu li a {
  margin-right:20px;
  font-size:2.0rem;
  border-bottom: solid transparent 3px;
  color:#cfd2da;
}
ul.main-menu li a:hover {
  color:#FFFFFF;
}
ul.main-menu li a.active {
  color:#FFFFFF;
  border-bottom-color:#247721;
}

/* Utility classes */
.hide {
  display:none;
}
.show {
  display:block;
}

 nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 20px;
    }

    nav ul li {
      position: relative; /* Needed for dropdown positioning */
      width: 150px; /* Match dropdown min-width */
    }
    

    nav a {
      color: white;
      text-decoration: none;
      padding: 8px 12px;
      display: block;
      width: 100%;
      box-sizing: border-box; /* include padding in width */
    }

    nav a:hover {
      background: #555;
      border-radius: 8px;
    }

    /* Dropdown menu hidden by default */
    .dropdown {
      display: none;
      position: absolute;
      top: 100%; /* Right below the parent */
      left: 0;
      background: #444;
      min-width: 150px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      z-index: 1000;
    }

    .dropdown li {
      border-bottom: 1px solid #555;
    }

    .dropdown li:last-child {
      border-bottom: none;
    }

    .dropdown a {
      padding: 10px 15px;
    }

    .dropdown a:hover {
      background: #666;
      border-radius: 8px;
    }

    /* Show dropdown on hover */
    nav ul li:hover > .dropdown {
      display: block;
    }