/* CSS variables at the top of the page for easy changing */
:root {
  /* Header & Footer */
  --header-footer-bg: #3D4A26;
  --header-footer-text: #FFFFFF;

  /* Top Menu */
  --menu-bg: #556B2F;
  --menu-link-unvisited: #A2B997; /* Lightest green so far for default links */
  --menu-link-active: #FFF8DC;
  --menu-link-visited: #D3D3D3;    /* Light gray for visited links */

  /* Left Column */
  --left-col-bg: #6B8E23;
  --left-col-link-active: #8B4513;
  --left-col-link-visited: #556B2F;
  
  /* head tag */
  --base-h1: 36px;
}

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

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

#wrapper {
    width: 90%;
	max-width: 1200px;
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* HEADER */
#header {
    background-color: var(--header-footer-bg);
    color: var(--header-footer-text);
    padding: 20px;
    text-align: center;
}

/* TOP MENU */
#menu {
    background-color: var(--menu-bg);
}

#menu a {
    text-decoration: none; /* Removes the underline */
    display: inline-block; /* Allows padding to work correctly */
    padding: 12px 20px;    /* 12px top/bottom, 20px left/right */
}

/* MUST FOLLOW THIS EXACT ORDER TO WORK: Link -> Visited -> Active */
#menu a:link {
    color: var(--menu-link-unvisited);
}
#menu a:visited {
    color: var(--menu-link-visited);
}
#menu a:hover {
    color: var(--menu-link-active); /* <--- ADD THIS LINE HERE */
}
#menu a:active {
    color: var(--menu-link-active);
}

/* CONTENT AREA */
#content {
    display: flex;
    flex: 1;
}


/* Left Column */
#leftcol {
    background-color: var(--left-col-bg);
	width: 200px;
    display: block;
	padding-top: 12px;
    padding-left: 12px;
}
#leftcol a {
    text-decoration: none; /* Removes the underline */
	color: var(--menu-link-unvisited);
}

#leftcol a:hover {
    color: var(--left-col-link-visited);
}
#leftcol a:active {
    color: var(--left-col-link-active);
}



/* MAIN AREA */
#main {
    flex: 1;
    background-color: #fff;
    padding: 20px;
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

/* FOOTER */
#footer {
    background-color: var(--header-footer-bg);
    color: var(--header-footer-text);
    text-align: center;
    padding: 15px;
}

p {
    text-align: justify;
    margin-top: 6px;
}

/* FIGURES */
.figure-center {
    width: 800px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

.figure-small {
    width: 400px;
    height: auto;
    display: block;
    margin: 20px auto;
}

.figure-full {
    width: 100%;
    height: auto;
}

/* Data frame table */
.dataframe th, 
.dataframe td {
  padding: 15px;
}

.dataframe {
  border: 2px solid var(--left-col-bg); 
}

/* Header background color */
.dataframe th {
  background-color: var(--left-col-bg); 
}


.date {
  text-align: right;
  color: grey;
  font-style: italic;
}


h1 {
  font-size: var(--base-h1);
  font-family: "Brush Script MT", cursive;
  margin-top: 20px;    /* Space before */
  margin-bottom: 20px; /* Space after */
}

h2 {
  font-size: calc(var(--base-h1) - 6px);
}

h3 {
  font-size: calc(var(--base-h1) - 8px);
  font-family: "Brush Script MT", cursive;
  color: #2e6f40;
}

hr {
  height: 4px;             /* Thickness */
  background-color: var(--left-col-bg);   /* Color */
}