:root{ 
--captioncolor:black; 
--textcolor:black; 
--textcolor1:black; 
--bg1:rgb(240,255,240); 
--bg2:rgb(240,240,240); 
--bg3:rgb(240,240,240); 
--bg4:rgb(240,230,200); 
--main_text:rgb(250, 134, 80);
--a_unused:blue; 
--a_hover:red; 
--a_used:0D61D3; 
--a_active:magenta;
--li_a_hover:black; 
--font1:"Verdana";
--font2:"Tahoma";
--font3:"Arial";
--font5:"Arial";
--color1:#FFAAFF;
--color2:#FFbbFF;
--download_button_background:rgb(100,255,100);
--download_button_color:rgb(100,100,245);
--navigation_button_background:rgb(100,255,100);
--navigation_button_color:rgb(100,100,245);
--navigation_button_hover_color:rgb(200,200,245);
--navigation_button_hover_background:rgb(100,100,245);
margin:0;
padding:0;
} 

a:link {color:var(--a_unused); font-family:var(--font2)}
a:visited {color:var(--a_used); font-family:var(--font2)}
a:active {color:var(--a_active); font-family:var(--font2)}
a:hover {color:var(--a_hover); font-family:var(--font2)}

/*NAVIGATION BUTTON*/
div.navigation {color:var(--navigation_button_color); 
				background:var(--navigation_button_background); 
				width:max-content;  
				width:100%; 
				margin:0px;
				padding-left:4px; 
				padding-top:4px; 
				padding-right:5px; 
				padding-bottom:4px; 
				text-align:center; 
				font-family:var(--font5); 
				font-weight:bold; 
				font-size:1em;
				border-width:2px; 
				border-radius:8px; 
				border-style:outset; }
div.navigation:hover {color:var(--navigation_button_hover_color); 
				background:var(--navigation_button_hover_background); 
				width:100%; 
				margin:0px;
				padding-left:4px; 
				padding-top:4px; 
				padding-right:5px; 
				padding-bottom:4px; 
				text-align:center;
				font-family:var(--font5); 
				font-weight:bold; 
				font-size:1em;
				border-width:2px; 
				border-radius:16px; 
				border-style:inset; }

a.navigation:link {text-decoration:none;}
a.navigation:visited {text-decoration:none; color:black; background-color:black}
a.navigation:active {text-decoration:none;}
a.navigation:hover {text-decoration:none;}


nav {
    font: var(--font3);
    color: var(--color1);
    padding: 0em;
    text-decoration: none;
    background-color: var(--bg2);
    display: flex; /* Use flexbox */
    justify-content: space-between; /* Align items horizontally */
    align-items: center; /* Align items vertically in the center */
}
ul {
    list-style-type: none;
    padding: 0; /* Remove default padding */
    display: flex; /* Use flexbox to align list items horizontally */
    gap: 20px; /* Adjust the gap between list items as needed */
}


li {font:var(--font3); 
	color:var(--color1); 
	padding:1px; 
	text-decoration:none; 
	width:max-content; 
	width:100%; 
	text-align:center}
	
li:hover {
	font:var(--font3); 
	color:var(--color2); 
	padding:1px; 
	text-decoration:none; 
	background-color:var(--bg2);  
	width:max-content; 
	width:100%; 
	text-align:center}

header {
    background-color: var(--bg2);
    border-style: outset;
    border-radius: 0.5em;
    font-family: var(--font1);
    padding: 1em;
}

body {
    background-color: var(--bg1);
    border-color: black;
    font-family: var(--font2);
    padding: 0em;
}

footer {
    background-color: var(--bg3);
    border-style: outset;
    border-radius: 0.5em;
    font-family: var(--font3);
    padding: 1em;
    bottom: 0em;
    margin-top: 5em;
}

main {
	margin:auto;
    max-width: 80%;
    border-style: none;
    padding: 2em;
    margin-top: 3em;
}


h1 {color:var(--captioncolor); font-size:2em; font-family:var(--font1); font-weight:bold}
h1:hover {color:red}
h2 {color:var(--captioncolor); font-size:1.5em; font-family:var(--font1); font-weight:bold}
h3 {color:var(--captioncolor); font-size:1.2em; font-family:var(--font1); font-weight:bold}
h4 {color:var(--captioncolor); font-size:1em; font-family:var(--font1); font-weight:bold}
h5 {color:var(--captioncolor); font-size:0.8em; font-family:var(--font1); font-weight:bold}
h6 {color:var(--captioncolor); font-size:0.5em; font-family:var(--font1); font-weight:bold}
p {color:var(--textcolor); font-size:1em; font-family:var(--font1)}

.rock{color:var(--captioncolor); font-family:var(--font2); font-size:2em}
.error-code {color:black; font-size:5em}

.download_section_image {
    background-size: contain;
    max-width: 80%;
    width: 100%;
    display: block;
    margin: 0 auto; /* Center horizontally */
}

.front_image {
    background-size: contain;
    max-width: 80%;
    width: 100%;
    border-style: outset;
    border-width: 5px;
    border-color: black;
    display: block;
    margin: 0 auto; /* Center horizontally */
}



details:hover {color:red; cursor:pointer}

div.video1 {
	position:relative;
	margin:auto;
	text-align:center;}
video {border-style:inset; border-radius:0.6em; width:80%;	box-shadow:2px 2px #111111;}

/*DOWNLOAD BUTTON*/
div.download_button {color:var(--download_button_color); background:var(--download_button_background); width:max-content; 
					padding-left:4px; padding-top:5px; padding-right:5px; padding-bottom:4px; text-align:center; font-family:var(--font5); font-weight:bold; font-size:1em;
					border-width:3px; border-radius:8px; border-style:outset; }
a.download_button:link {text-decoration:none}
a.download_button:visited {text-decoration:none}
a.download_button:active {text-decoration:none}
a.download_button:hover {text-decoration:none}

video {border-style:inset; border-radius:0.6em; width:80%}

section {background-color:var(--bg4); padding:1em; border-style:groove; border-color:var(--bg4); border-radius:0px}


#header_grid {
	display:grid;
	grid-template-columns: min-content 1fr; 
	border-color:black;
}

.clock{color:var(--captioncolor); font-family:var(--font2); font-size:1em ; text-align:right; position:fixed; right:12px; top:10px; float:top}

.image-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0.8,0.5,0.5,0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-img {
    max-width: 80%;
    max-height: 80%;
}

.close {
    position: absolute;
	background-color: rgba(255, 0, 0, 0.8);
	z-index:600000;
    top: 5%;
    right: 5%;
    font-size: 10em;
    font-weight: bold;
    color: white;
    cursor: pointer;
}