:root {
  --stone-ash:    #C0C3C4;  /* bright white */
  --stone-cool:   #7E8589;  /* dark white   */
  --stone-basalt: #4A4E52;  /* light grey   */
  --stone-lava:   #2C2F31;  /* dark grey    */
  --stone-deep:   #181A1B;  /* black        */

  /* Warm accent set */
  --warm-glow:    #EAA24A;  /* soft highlight orange */
  --lava-ember:   #FF8C42;  /* glowing ember orange  */
  --lava-orange:  #FF6B2C;  /* bright molten orange  */
  --warm-amber:   #D8872F;  /* orange-brown amber    */
  --wet-clay:     #b2713d;  /* clay brown            */
  --warm-clay:    #B34E2E;  /* earthy brick red      */
  --lava-red:     #CC2F2F;  /* deeper volcanic red   */

  --bg: var(--stone-deep);
  --bg-alt: var(--stone-lava);
  --title-text: var(--wet-clay);
  --header-text: var(--stone-cool);
  --header-text: var(--wet-clay);
  --text: var(--stone-ash);
  --text: var(--stone-cool);
  --link: var(--warm-amber);
  --link-hover: var(--warm-clay);
  --link-active: var(--lava-orange);
  --link-visited: var(--lava-red);
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: Garamond, serif;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

h1 {
  color: var(--title-text);  /* or any color you want */
}
 

h2, h3, h4, h5, h6 {
  color: var(--header-text);  /* or any color you want */
}

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

/* visited link */
  a:visited {
  color: var(--link-visited);
  text-decoration: none;
}

/* mouse over link */
  a:hover {
  color: var(--link-hover);
  text-decoration: none;
}

/* selected link */
  a:active {
  color: var(--link-active);
  text-decoration: underline;
}


.header{
    color: #ddd;
    font-family: Garamond, serif;
    font-size: 24px;
    background-color: DarkSlateGrey;
    width: 100%;
    margin-top: -20px;
    margin-bottom: -20px;
}

/* Style the top navigation bar */
.navbar {
  overflow: hidden;
  background-color: var(--bg-alt);
  width: 100%;
  font-size: 24px;
}

/* Style the navbar links */
.navbar a {
  float: left;
  display: block;
  color: var(--link);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
/* .navbar a:hover:not(.active) { */
.navbar a:hover {
  background-color: black;
  color: var(--link-hover);
}

.active {
  background-color: #04AA6D;
}

.column {
    margin-top: 4px;
    margin-left: 5px;
    font-size: 18px;
}



/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

@media (min-aspect-ratio: 1/1) {
      img {
        height: 100vh; /* 100% of the viewport height */
        width: auto; /* Adjust width accordingly */
      }
    }

    /* When the screen height is greater than the width (portrait mode), set image width to 100% */
    @media (max-aspect-ratio: 1/1) {
      img {
        width: 100vw; /* 100% of the viewport width */
        height: auto; /* Adjust height accordingly */
      }
    }