/* Import Merlin’s locker Fonts */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&display=swap" rel="stylesheet">
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Merriweather:wght@400;700&family=Open+Sans:wght@400;700&display=swap');
.cinzel-decorative-bold {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-style: bold;
}


/*  
 @font-face {
    font-family: 'campanile_LOC';
    src:url('font/campanile_LOC.woff') format('woff'),
        url('font/campanile_LOC.eot'),
        url('font/campanile_LOC.ttf') format('truetype'); 
   */
/* Merlin’s locker: General Body */
body {
  font-family: 'Merriweather', serif; /* Primary body font */
  color: #aea59e; /* #7192af blue gray font /*#625044;  Smoky brown font color #aea59e lighter brown font*/
  /*top to bottom gradient: background: linear-gradient(180deg, #1e1c1d, #4a3728); Background gradient */
  margin: 0;
  background: linear-gradient(to right, #1e1c1d 0%, #4a3728 50%, #1e1c1d 100%); /* Background gradient going to the right dark then light then dark again */
  padding: 0;
  z-index: -1;
  min-height: 100vh; /*Full viewport height*/
 
}

.ml_wizard{
    	background-image:  url('../images/ml_wizard.gif')/* ,url('../images/ml_title.gif')*/;
	opacity: 0.20; 
	width: 50%;
	height: 100%;
    	position: fixed; /* Keep it fixed on the side of the page */
    	top: 20%;
    	left: 25%;
   	background-repeat: no-repeat; /* Tile the image vertically */
    	background-position: left top, left 150px; /* First image starts at 0px, second image starts at 110px*/
    	/*background-size: 100px 100px; /* Use the image's natural size */
    	z-index: -1;
	pointer-events: none;
}

.green-band {
    position: absolute;  /* This positions the band relative to the page */
    top: 65px;  /* Start 10px from the top */
    left: 0;  /* Align to the left edge of the page */
    width: 100%;  /* Make the band span the entire width of the page */
    height: 70px;  /* Set the height of the band */
    background-color: #21373d;  /* Hunter green color */
    z-index: 0; /* ensuring the green band is on top*/
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.3), /* Inner dark shadow */
              inset -4px -4px 8px rgba(255, 255, 255, 0.6); /* Inner light highlight */
}

.ml_logo{
    position: absolute;  /* Positioned relative to the page */
    top: 10px;  /* Align to the top of the green band */
    left: 5%;  /* Center horizontally */
    transform: translateX(-50%);  /* Adjust positioning to exactly center the image */
    z-index: 3;  /* Ensure the image is above the green band */
    width: 100px;  /* Set the width of the image (adjust as necessary) */
    height: 180px;  /* Keep aspect ratio of the image */
}

.ml_title{
    background-image:  url('../images/ml_cream_title.gif')/* ,url('../images/ml_title.gif')*/;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;  /* Positioned relative to the page */
    top: 10px;  /* Align to the top of the green band */
    left: 20%;  /* Center horizontally */
    /*transform: translateX(-50%);   Adjust positioning to exactly center the image */
    z-index: 2;  /* Ensure the image is above the green band */
    width: 55%;  /* Set the width of the image (adjust as necessary) */
    height: 180px;  /* Keep aspect ratio of the image */
}

.ml_watermark{
    	background-image:  url('../images/ml_logo.gif')/* ,url('../images/ml_title.gif')*/;
	opacity: 0.10; 
	width: 100px;
	height: 100%;
    	position: fixed; /* Keep it fixed on the side of the page */
    	top: 0px;
    	left: 85%;
   	background-repeat: repeat-y; /* Tile the image vertically */
    	background-position: left top, left 150px; /* First image starts at 0px, second image starts at 110px*/
    	background-size: 100px 100px; /* Use the image's natural size */
    	z-index: 1;
}


/* Dropdown menu container */
.ml_dropdown {
    position: fixed; /* Keep it fixed on the side of the page */
    display: inline-block;
    top: 0; /* Start at the top */
    left: 85%; /* Align to the right edge */
    transform: translateX(-50%); /* Offset by 50% of its own width */
    text-align: center; /* Center the text and image inside */
    z-index: 5;
}

/* Style the image */
.ml_dropdown_image {
    background-image: url('../images/ml_logo.gif'); /* Dropdown image */
    transform: rotate(-15deg); /* Rotates the image by -15 degrees */
    transition: transform 0.5s ease; /* Smooth animation */
    width: 45px; /* Adjust image size */
    height: auto;
    cursor: pointer;
    z-index: 6;
}

/* Add a hover effect to rotate further */
.ml_dropdown_image:hover {
    transform: rotate(-90deg); /* Rotate to -90 degrees on hover */
}

/* Dropdown menu */
.ml_menu {
    display: none; /* Initially hidden */
    position: absolute;
    top: 100%; /* Position below the image */
    left: 0; /* Align to the dropdown container */
    background-color: #1e1c1d; /* Dark brown background color */
    border: 1px solid #21373d; /* Green border color */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Optional: shadow for depth */
    z-index: 7;
    min-width: 150px; /* Adjust width */
    padding: 5px; /* Add padding around items */
}

/* Style menu links like buttons */
.ml_menu a {
    display: block;
    font-family: "Cinzel Decorative", serif; /* Consistent font */
    font-size: 18px;
    font-weight: 700;
    padding: 10px 20px; /* Button-like padding */
    background-color: #F5F5DC; /* Tan background */
    color: #21373d; /* Hunter green font */
    border: 3px solid #225766; /* Green border */
    border-radius: 5px; /* Rounded corners */
    margin: 5px 0; /* Add spacing between items */
    text-decoration: none; /* Remove underline */
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    /* Emboss effect */
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.3), /* Inner dark shadow */
                inset -4px -4px 8px rgba(255, 255, 255, 0.6); /* Inner light highlight */
}

/* Hover effect for menu links */
.ml_menu a:hover {
    color: #F5F5DC;   /*625044; /* Smoky brown on hover */
    background-color: #21373d; /* Green background for contrast */
}

/* Remove border for the last item */
.ml_menu a:last-child {
    border-bottom: none;
}

/* Show dropdown menu on hover */
.ml_dropdown:hover .ml_menu {
    display: block; /* Show the menu */
    z-index: 7;
}



/* Buttons */
button, .ml_button {
  z-index: 10;
 /* font-family: 'Open Sans', sans-serif; /* Clean sans-serif for buttons */
  font-family: "Cinzel Decorative", serif; /* Consistent font */
  font-size: 18px;
  font-weight: 700;
  background-color: #F5F5DC; /*625044; tan /* background for contrast */
  color: #21373d; /* Hunter green font*/
  border: 3px solid #225766; /* really nice soft contrast for dark green=#25444d;  */
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
/* Emboss effect */
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.3), /* Inner dark shadow */
              inset -4px -4px 8px rgba(255, 255, 255, 0.6); /* Inner light highlight */
      }
button:hover, .ml_button:hover {
  color: #f5f5dc; /*#625044; /* Change to smoky brown on hover */
  background-color: #21373d; /* background green for contrast */
}
/* Links */
a {
  font-family: 'Open Sans', sans-serif; /* Simple, clean font for links */
  color: #967a67; /* light tan */
  text-decoration: none;
}
a:hover {
  color: #f5f5dc; /*625044; /* Smoky brown on hover */
}


/* Headings */
h1 {
  font-family: "Cinzel Decorative", serif; /* Consistent font */
  color: #F5F5DC; /* Light cream for headings */
  margin-bottom: 28px;
}

/* Subheadings */
h2 {
  font-family: "Cinzel Decorative", serif; /* Consistent font */
  font-size: 26px; /* Adjust size for readability */
  color: #F5F5DC; /* Light cream for headings */
  /*font-weight: 800;  Bold weight for emphasis */
}

h3 {
  font-family: "Cinzel Decorative", serif; /* Consistent font */
  font-size: 24px; /* Adjust size for readability */
  /*font-weight: 600; /* Regular weight for subtler headings */
  color: #f5f5dc; /*light cream font*/
}

h4 {
  font-size: 22px; /* Adjust size for readability */
  /*font-weight: 600; /* Regular weight for subtler headings */
  color: #f5f5dc; /*light cream font*/
}

p {
  font-family: 'Crimson Text', serif; /* Apply to paragraphs */
  font-size: 22px; /* Adjust size for readability */
  line-height: 1.6; /* Ensure good line spacing */
  color: #f5f5dc; /*light cream font*/
}
 
/* General font styles for unordered and ordered lists */
ul, ol {
  font-family: 'Crimson Text', serif; /* Replace with your desired font */
  font-size: 22px; /* Adjust size for readability */
  line-height: 1.6; /* Ensure good spacing between lines */
  margin: 0 0 1rem 1.5rem; /* Add default margin for indentation */
  padding: 0; /* Remove default padding if not needed */
}

/* Font styles specifically for list items */
li {
  font-family: 'Crimson Text', serif; /* Same font as the list */
  font-size: 22px; /* Inherit or specify a font size */
  color: #f5f5dc; /*light cream font*/
}
/* here is the container that holds the side bar and content row */
.ml_container{
    display: flex;
    flex-direction: row;
    align-items: flex-start; /*Aligns items at the top */
    min-height: 100vh;
}
/* sidebar look and details */
.sidebar {
    font: normal 1.1em castellar;
    letter-spacing: 0px; 
    margin: 10px;  
    position: relative; /* Change from absolute to relative */
    top: 200px;  /* 200px from the top of the page */
    left: 0;   /* Align to the left side of the page */
    width: 25%; /* Responsive width 300 px wide*/
    min-width: 250px; /* Set a minimum width to avoid collapsing */
    padding: 10px;
    background-color: #1e1c1d;  /* rgba(49, 47, 46, 0.1); */ /* Semi-transparent smoky brown */
    border: 3px solid #21373d;   /* Optional teal border */
    box-sizing: border-box; /* Include padding and border in the width/height */
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.3),  /* Inner dark shadow */
                inset -4px -4px 8px rgba(255, 255, 255, 0.6);  /* Inner light highlight */
    word-wrap: break-word; /* Ensures long words wrap within container */
}
/* content look, details and positioning */
.content{
   /* font: normal 1.1em castellar;  is called in as <h2 id="sidebar"> </h2> in the side bar */
    position: relative; 
    top: 200px;   /* 200px from the top of the page, this is also where the side bar starts, below the melogo and title*/
    left: 5%;      /* Align to the left of the side bar */
    max-width: 50%; /* side bar takes up 25% of page and content takes up 70% */
    /*width: 600px; */
    height: 555px;
    padding: 10px; /* Optional padding around the text */
    z-index: 4;
    flex-grow: 1; /* Allow content to grow and push footer down */
    flex-shrink: 0;
    flex-basis: auto;
    overflow: auto;
}

/* here is the container that holds the footer row */
.ml_footer_container{
    display: flex;
    flex-direction: row;
    align-items: flex-start; /*Aligns items at the top */
    min-height: 100vh;
}

/* Footer */
.footer {
  font-family: 'Merriweather', serif;
/*  color: #ffffff;  */
/*  background-color: #1e1c1d; /* Dark gradient start */ 
  padding: 20px;
  text-align: center;
  left: 20%;
  max-width: 100%;
/*  position: fixed; */
  bottom: 0px;
  
}

footer a {
  color: #21373d; /* Hunter green links */
}

footer a:hover {
  color: #625044; /* Smoky brown hover effect */
}