root: { 
color-scheme: light dark; 
--text-color: DarkBlue;
  --back-color: Azure;
  }
  
body 
{
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  color: black;
}

p
{
text-align: left;
margin:5px;
margin-bottom: 1em;
}


video 
{
display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  margin: 5px auto;
}
.video-container 
{
  display: flex;
  align-items: center;
   max-width: 550px;
	height: 300px;          /* full screen height */
	margin: 2px auto;
}
.image-container {
    display: flex;
    justify-content: center;   /* horizontal */
    align-items: center;       /* vertical */
    height: 300px;
}
.contentimage {
    display: block;
    width: 100%;
    max-width: 550px;
    height: auto;
    border-radius: 15px;
    overflow: hidden;
    margin: 5px auto;
}

a
{
color:black;
text-decoration: none;
}
a:hover
{
color:#17AA00;
text-decoration: none;
}
.navigationbutton
{
color:black;
border-radius:25px;

}

.popupmenu
{
background-color:white;
border-radius:25px;
}
.popupitem
{
color:black;
border-radius:25px;
}
.popupitem:hover {
background-color:lightgray;
}


#google_translate_element select {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
}

h1
	{
	color: black;

	}
	h6
	{
	color: black;

	-webkit-text-stroke-color: #000000;
	}
	h4/**Titles for web pages**/
	{
	color: #000000;

	}
	.headerimage {
  width: 95%;
  height: 200px;              /* adjust as needed */
  border-radius:15px;
  margin:5px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden; 
  border: 2px solid #000000;
	}
	.navigation {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #000000;
}
.navigation a {
  color:black;
  font-weight: bold;

    
}
/* Optional hover effect for a magical sparkle */
.navigation a:hover {
}
.main
  {
  width: 95%;
  border-radius:15px;
  margin:5px;
  border: 2px solid #000000;
  }
	/* Light mode (default / fallback) */
.headerimage {
  background-image: url("images/headerbackground-light.jpg");
}
/* Light mode (default / fallback) */
.navigation {
  background-image: url("images/navigationbackground-light.jpg");
}
.w3-button:hover{color:#000;background-color:#ffffff}



/* Main Title */
.title {
    font-family: 'Cinzel', serif;        /* Medieval, heroic feel */
    font-weight: 700;
    font-size: 60px;                      /* adjust as needed */
    color: black;  /* Light mode text */
    text-align: center;
    letter-spacing: 2px;
   /* White glow */
    text-shadow:
        0 0 2px #ffffff,
        0 0 4px #ffffff,
        0 0 6px #ffffff;
    margin: 20px 0 10px 0;
    
}

/* Subtitle / Smaller Heading */
.subtitle {
    font-family: 'Alegreya SC', serif;    /* Readable, old-style font */
    font-weight: 600;
    font-size: 28px;                      /* adjust as needed */
    color: black;  /* Light mode text */
    text-align: center;
    letter-spacing: 1px;
    /* White glow */
    text-shadow:
        0 0 1px #ffffff,
        0 0 3px #ffffff,
        0 0 5px #ffffff;
    margin: 0 0 20px 0;
    
}

@media (prefers-color-scheme: dark) 
{
	root: 
	{   
	--text-color: Azure;
	--back-color: DarkBlue;  
	} 
	body { 
	color: white;
 	background-color:black;
 	}
 	a{
	color:white;
	}
	a:hover
	{
	color:#3EFF21;
	text-decoration: none;
	}
	.navigationbutton
	{
	color:white;
	}

	.popupmenu
	{
	background-color:black;
	}
	.popupitem
	{
	color:white;
	border-radius:25px;
	}
	.popupitem:hover {
	background-color:darkgray;
	}
	
	.footer, .main
	{
	background-color:black;
	}
	
	h1
	{
	color: white;

	}
	h6
	{
	color: white;

	}
	h4/**Titles for web pages**/
	{
	color: #FFFFFF;

	}
	.headerimage {
    background-image: url("images/headerbackground-dark.jpg");
    border: 2px solid #FFFFFF;
  }
  .navigation {
    background-image: url("images/navigationbackground-dark.jpg");
    border: 2px solid #FFFFFF;
  }
  .navigation a {
  color:white;
  font-weight: bold;

    
     
    
    }
    
    .navigation a:hover {
    color:white;
}
	.navigationbutton
	{
	color:white;
	}
	.w3-button:hover{color:#ffffff;background-color:#000000}


  .main
  {
  border: 2px solid #FFFFFF;
  }
  
  .title {
        color: white;  /* Dark mode text */
        /* Black glow */
        text-shadow:
            0 0 2px #000000,
            0 0 4px #000000,
            0 0 6px #000000;
    }
    .subtitle {
        color: white;  /* Dark mode text */
        /* Black glow */
        text-shadow:
            0 0 1px #000000,
            0 0 3px #000000,
            0 0 5px #000000;
    }
    

}
/*  End Dark mode*/

/* Hover effects for elements */
/* Fire link - red glow + background */
.navigation a.fire:hover {
  text-shadow:
    0 0 2px #ffb366,
    0 0 4px #ff9966,
    0 0 6px #ff751a,
    0 0 8px #ff4500;
  color: #ff4500;
  background-color: rgba(255, 69, 0, 0.5);
}

/* Ice link - light blue glow + background */
.navigation a.ice:hover {
  text-shadow:
    0 0 2px #ccf2ff,
    0 0 4px #99e6ff,
    0 0 6px #66d9ff,
    0 0 8px #33ccff;
  color: #66ccff;
  background-color: rgba(51, 204, 255, 0.5);
}

/* Lightning link - yellow glow + background */
.navigation a.lightning:hover {
  text-shadow:
    0 0 2px #ffffb3,
    0 0 4px #ffff80,
    0 0 6px #ffff4d,
    0 0 8px #ffff00;
  color: #ffff66;
  background-color: rgba(255, 255, 0, 0.5);
}

/* Earth link - brown glow + background */
.navigation a.earth:hover {
  text-shadow:
    0 0 2px #A0522D,
    0 0 4px #8B4513,
    0 0 6px #5C3317,
    0 0 8px #4B2E2E;
  color: #8B4513;
  background-color: rgba(139, 69, 19, 0.5);
}

/* Wind link - green glow + background */
.navigation a.wind:hover {
  text-shadow:
    0 0 2px #90EE90,
    0 0 4px #66CDAA,
    0 0 6px #32CD32,
    0 0 8px #228B22;
  color: #32CD32;
  background-color: rgba(50, 205, 50, 0.5);
}

/* Water link - dark blue glow + background */
.navigation a.water:hover {
  text-shadow:
    0 0 2px #0000CD,
    0 0 4px #191970,
    0 0 6px #00008B,
    0 0 8px #000080;
  color: #00008B;
  background-color: rgba(0, 0, 139, 0.5);
}

/* Holy link - light yellow glow + background */
.navigation a.holy:hover {
  text-shadow:
    0 0 2px #FFFFF0,
    0 0 4px #FFFACD,
    0 0 6px #FFFFE0,
    0 0 8px #FFF8DC;
  color: #FFFFE0;
  background-color: rgba(255, 255, 224, 0.5);
}

/* Dark link - purple glow + background */
.navigation a.dark:hover {
  text-shadow:
    0 0 2px #BA55D3,
    0 0 4px #9932CC,
    0 0 6px #800080,
    0 0 8px #4B0082;
  color: #800080;
  background-color: rgba(128, 0, 128, 1.0);
}


/* Begin Scroll bars */

/* Target the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background-color: #8b5e3c;  /* color of the draggable part */
    border-radius: 5px;         /* rounded edges */
}

/* Optional hover effect */
::-webkit-scrollbar-thumb:hover {
    background-color: #6e482e;
}

/* Keep the track transparent or default */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Scrollbar width */
::-webkit-scrollbar {
    width: 12px; /* adjust to taste */
}
/* Only the scrollbar thumb in Firefox */
* {
    scrollbar-width: thick;                   /* makes the scrollbar thick */
    scrollbar-color: #8b5e3c transparent;   /* thumb color | track color */
}
/* End Scroll bars */