html {
  overflow: auto;
  background-color: #000000;
  color: var(--font-primary);
  margin: 0;
  padding: 0;
  max-width: 100%;
  font-family: var(--primary-font), sans-serif;
  font-size: 20px;
  line-height: 170%;
  overflow-x: hidden;
}

:root {
  --primary-font: "equity_a_regular", serif;
  --primary-dark: #9CC7FC;
  --primary-light: #F1EEEC;
  --primary-light-darker: #f2ae7e;
  --secondary-dark: #993000;
  --highlight: #ebdac9;
  --secondary-darker: #682404;
  --secondary-light: #FFFFFF;
  --tertiary-dark: #877d78;
  --gold: #635D48;
∑
  --font-primary: black;

  --outline-style: dashed 1px var(--tertiary-dark);

  --space: 2rem;
  --space-big: 5.6rem;
  --space-tiny: .8rem;

  --border-radius: 8px;

  --skyblue: #9CC7FC;
}

body {
  background-color: var(--primary-light);
}

h1 {
  font-family: var(--primary-font);
  font-size: 1.6rem;
}

h1:first-of-type {
  padding-bottom: .4rem;
}

h2, h3, h4, h5, h6 {
  font-family: var(--primary-font);
  color: var(--gold);
}

 @font-face {
  font-family: "equity_a_regular";
  font-display: block;
  src:
    local("equity_a_regular"),
    url("fonts/equity_a_regular.woff2") format("woff2"),
}

h2 {
  font-size: 1.5rem;
  padding-bottom: var(--space-tiny);
}

h3 {
  font-size: 1.2rem;
  padding-bottom: var(--space-tiny);
}

body {
  margin: 0 auto;
  padding: 1rem;
  font-size: 1rem;
  font-family: var(--primary-font);
  /* width: 100%; */
}

a {
  color: var(--secondary-dark);
  text-decoration: none;
}

a:hover {
  color: var(--font-primary);
  text-decoration: none;
  transition: .2s;
}

.link:hover {
  color: var(--font-primary);
  text-decoration: none;
  background-color: var(--highlight);
  transition: .2s;
  color: red;
}


p {
  font-size: 1.2rem;
  padding-bottom: var(--space-tiny);
}

.small-text {
  font-size: 1rem;
}

.text-list {
  margin: 0 auto;
  padding-left: 1rem;
  list-style-position: outside;
  list-style-type: disc;
  width: 100%;
  max-width: 800px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hero {
  text-align: left;
  background-color: var(--skyblue);
  padding: 5rem 4rem 5rem 3rem;
  margin: 6rem auto 6rem auto;
  max-width: 900px;
  /* border: outset var(--ggb-international-orange); */
  /* box-shadow: 0 3px 6px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.11); */
}

.layout {
  background-color: var(--primary-light);
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  max-width: 1600px;
}

/* Main content area */
.content {
  background-color: var(--primary-light);
  /* align-self: center; */
  transition: margin-left 0.3s;
  padding-top: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  /* padding-bottom: 4rem; */
  max-width: 1200px;
  /* margin: 0 auto 0 min(28%); */
  margin: 0 auto;
  border-right: var(--outline-style);
  /* border-left: var(--outline-style); */

  /* position: block; */
  overflow-x: hidden;
}

.footer {
  padding-bottom: 2rem;
  text-align: center;
}

/* Shared navigation styles */
.navbar {
  background-color: var(--primary-light);
  color: var(--font-primary);
}

.logo {
  height: 48px;
}

.nav-links a {
  color: var(--font-primary);
  /* margin: 1em;
  padding: 1em; */
  text-decoration: none;
}

.nav-links a:hover {
  font-weight: 900;
  border-radius: var(--border-radius);
  outline: var(--outline-style);
}

/* Mobile menu button */
.mobile-menu-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

.small-icon {
  font-size: 20px;
  font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

hr {
  max-width: 800px;
  border-top: var(--outline-style);
  margin: 0 auto 40px auto;
}

/* Desktop: Left sidebar navigation */
@media only screen and (min-width: 800px) {
  .layout {
    flex-direction: row;
    display: flex;
  }

  .hero h1 {
    padding-bottom: .5rem;
  }

  .navbar {
    display: block;
    position: sticky;
    left: 0;
    top: 0;
    height: 100vh;
    width: 200px;
    padding: 0rem;
    flex-direction: column;
    font-size: 2rem;
    border-right: var(--outline-style);
    border-left: var(--outline-style);

  }

  .mobile-menu-btn {
    display: none;
  }

  .nav-container {
    display: flex;
    flex-direction: column;
    margin: 12px 8px;
  }

  .logo {
    margin-bottom: 2rem;
    margin-left: 8px;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: var(--space-tiny) 0;
  }

  .nav-links li {
    margin-bottom: 4px;
    margin-right: 8px;
    width: 100%;
    font-size: .6em;
    /* background-color: red; */
    padding: 8px 8px 4px 12px;
  }

  .content {
    flex: 1;
    max-width: 1280px;
  }
}

.img-centered {
  display: block;
}

/* Mobile: Top navigation with hamburger */
@media only screen and (max-width: 799px){

  body {
    font-size: !important 1rem;
    font-family: var(--primary-font);
  }

  p {
    font-size: 1rem;
    padding-bottom: var(--space-tiny);
  }

  .hero {
    text-align: center;
    background-color: var(--skyblue);
    padding: 4rem 1.2rem 4rem 1.2rem;
    margin-top: 1rem;
  }

    .hero h1 {
      font-size: 1.4rem;
    }

  .hero h2 {
      font-size: 1.2rem;
  }

  .layout {
    flex-direction: column;
  }

  .hero {
    margin-top: 50px;
    margin-bottom: var(--space)
  }

  .logo {
    display: block;
    justify-content: flex-end;
    /* width: auto; */
    margin-bottom: 0;
  }

  .navbar {
    position: fixed;
    z-index: 1;
    top: 0;
    height: auto;
    padding: .5rem;
    width: 100%;
    /* background-color: rgb(78, 101, 117); */
    border-bottom: var(--outline-style)
    
  }

  .nav-container {
    opacity: 1 !important; 
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mobile-menu-btn {
    display: block !important;
    order: -1;
    color: var(--font-primary);
    font-size: 24px;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 69px;
    left: 0;
    right: 0;
    background-color: var(--primary-light);
    z-index: 100;
    list-style: none;
    padding-bottom: 8px;
    font-size: 32px;
    /* color: blue; */
    border-bottom: var(--outline-style)
  }

  .nav-links li {
    display: block;
    color: var(--font-primary);
    margin-top: 0;
    font-size: 24px;
    padding-top: 12px;
    padding-left: 24px;
    padding-bottom: 12px;
    align-items: center;
    justify-content: center;
  }

  .nav-links.active {
    display: flex;
  }

  .content {
    margin: 0 auto;
    width: 100%;
    padding: 1rem;
  }
  /* .entry figure {
    margin-bottom: 0;
  } */
}



/* small screens */

 @media only screen and (max-width: 799px)  {
  .nav-links li a {
    display: block;
    vertical-align: middle;
    color: red;
    margin-top: 0;
    font-size: 24px;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
    align-items: center;
    justify-content: center;
  }
}

/* Additional styling for your content */
.header {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.entry {
  margin: 0 auto;
  max-width: 1000px;
  margin-bottom: 2rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}

.entry:first-of-type {
  margin-top: var(--space-big);
}

.entry h3 {
  /* margin-bottom: 2rem; */
}

.entry h1, h2, h3, p {
  margin: 0 auto;
  max-width: 800px;
}

.entry img {
  margin: auto;
  object-fit: contain;
  max-width: 100%;
  max-height: 800px;
  /* min-width: 1000px; */
  margin: 0 auto;
  /* margin: 0 auto var(--space-tiny) auto; */
  text-align: center;
}

.entry li {
  /* margin-left: 1.5rem; */
  margin-bottom: 0.5rem;
}

figure {
  margin-top: var(--space);
  margin-bottom: 4rem;
  text-align: center;

}

figure img {
    margin-bottom: 5.6rem;
}

.img-with-caption {
  margin: 0;
}

img {
  margin-bottom: 5rem;
}

figcaption {
  text-align: center;
  /* font-style: italic; */
  max-width: 600px;
  margin: var(--space-tiny) auto 0 auto;
  font-size: 1.1rem;
  color: var(--font-primary);
  margin-bottom: var(--space);
  /* margin-top : var(--space-tiny); */
}