/* the styles for the elements */
:root {
    color-scheme: light dark;
    /* --light-scheme: oklch(100% 0 0); */
    /* --dark-scheme: oklch(0% 0 0); */
    /* --background: light-dark(var(--light-scheme), var(--dark-scheme)); */
    /* --text: light-dark(var(--dark-scheme), var(--light-scheme)); */
    --bg-color: light-dark(#b3cde0, #011f4b);
    --text-color: light-dark(#202020, #edeff7);
    --backdrop-color: light-dark(#b3c0e0, #03396c);
    --border: 3px solid light-dark(#011f4b, #b3cde0);
	--hr: 1px solid light-dark(#011f4b, #b3cde0);
    --border-radius: 0.75rem;
    --accent-color: light-dark(#ffffff, #1a1a1a);
    --currentnav-color: light-dark(black, white);
    --link-color: light-dark(#011f4b, #b3cde0);
    --visited-color: light-dark(#454061, #b3b7e0);
    --boxshadow-color: light-dark(#bbb3e0, #315488);
    --headertext-color: light-dark(#011f4b, #b3cde0);
    --hoverborder: 3px solid light-dark(#b3cde0, #011f4b);
}
* {
	margin: 0;
	padding: 0;
}
html {
	background-color: var(--bg-color);
	background-image: url("../images/stardust.png");
}
body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 1.2rem;
}
a {
	font-weight: bold;
}
a:link {
	color: var(--link-color);
	text-decoration: none;
}
a:visited {
	color: var(--visited-color);
}
/* the styles for the header */
header {
	padding: 2.06rem;
	background-color: var(--bg-color);
	background-image: url("../images/Background.svg");
	background-position: center;
	color: var(--headertext-color);
}
#cssimagemap {
	position: relative;
}
#cssimagemap a {
	display: block;
	position: absolute;
	cursor: default;
}
a#moon {
	width: 6rem;
	height: 6rem;
	right: 9.75rem;
	top: 0.438rem;
	clip-path: polygon(20% 4%, 31% 1%, 49% 0, 63% 3%, 74% 8%, 82% 15%, 89% 26%, 93% 37%, 95% 48%, 93% 66%, 87% 79%,
	76% 89%, 64% 94%, 52% 96%, 35% 95%, 22% 90%, 12% 81%, 5% 72%, 0 61%, 14% 67%, 28% 68%,
	39% 64%, 49% 55%, 53% 41%, 52% 30%, 47% 20%, 41% 13%, 31% 9%);
}
.title {
	font-size: 2.4rem;
	text-align: center;
	font-style: italic;
}
/* the styles for the navigation menu */
#nav_menu {
	border: var(--border);
	background-color: var(--backdrop-color);
}
#nav_menu a:focus, #nav_menu a:hover {
	font-style: italic;
	transition: 1.5s ease;
	box-shadow: inset 200em 0 0 0 var(--boxshadow-color);
}
#nav_menu ul {
	display: flex;
	flex-basis: 100%;
	justify-content: space-around;
	list-style-type: none;
	position: relative;
}
#nav_menu ul li {
	flex-basis: 25%;
}
#nav_menu ul li a {
	display: block;
	text-align: center;
	padding: 1.53rem 0;
    text-decoration: none;
	color: var(--headertext-color);
	font-weight: bold;
}
#nav_menu a.current {
	background-color: var(--bg-color);
	color: var(--currentnav-color);
}
#nav_menu ul ul {
	width: 100%;
    display: none;
    position: absolute;
    top: 100%;
}
#nav_menu ul li ul {
    width: 25%;
}
#nav_menu ul li:hover > ul {
	display: block;
	background-color: var(--bg-color);
}
#nav_menu > ul::after {
    content: "";
    clear: both;
    display: block;
}
.subitems {
	padding-left: 0;
	padding-right: 0;
	margin-right: 0;
}
/* the styles for the main content */
main {
	display: flex;
	max-width: 97%;
	margin: 1.05rem auto;
	min-height: 95dvh;
	background-color: var(--backdrop-color);
	border: var(--border);
}
/* the styles for the section */
section {
	flex-basis: 100%;
	padding: .5rem 2.57rem 1.05rem 2.57rem;
	color: var(--text-color);
}
section p {
	padding: 1.6rem 0;
}
h3 {
	margin: 0.70rem;
}
hr {
	margin: 0.75rem;
	border: var(--hr);
}
/* the styles for the article */
figure {
	display: inline-block;
	max-width: 15.64rem;
	margin: .46rem;
	border: var(--border);
}
figcaption {
	padding: .6rem;
	text-align: center;
}
figure img {
	width: 250px;
	height: 250px;
	object-fit: cover;
}
figure:hover {
	border: var(--hoverborder);
}
#myImg {
	display: flex;
	justify-content: center;
	padding: 2rem 0 1rem 0;
}
#myDescription {
	line-height: 1.5;
	text-align: center;
}
#imgTitle {
	margin-bottom: 0.70rem;;
}
/* the styles for the aside */
aside {
	flex-basis: 15%;
	padding: .07rem 0;
	color: var(--text-color);
}
aside p, aside ul {
	padding: 1.75rem 0;
}
/* the styles for the footer */
footer {
	background-color: var(--backdrop-color);
	clear: both;
	border: var(--border);
}
footer p {
	text-align: center;
	color: var(--text-color);
	padding: 1.02rem;
}
/*  the styles for mobile menu */
#mobile_menu{ 
	display: none;
}
@media only screen and (max-width: 959px) {
	section h1 {font-size: 135%;}
	section h2, aside h2 {font-size: 120%}
}
@media only screen and (max-width: 640px) {
	header img {float: none;}
	header {text-align: center;}
	section {
		float: none;
		padding-right: 2.5%;
		width: 100%;
	}
	aside {
		float: none;
		padding-right: 2.5%;
		width: 100%;
	}
	article img {max-width: 30%}
	#nav_menu {
		display: none;
	}
	#mobile_menu{
		display: block;
	}
	.slicknav_menu {
		background-color: var(--bg-color) !important;
	}
}
@media only screen and (max-width: 420px) {
	body { font-size: 90%; }
}