:root{
	--color1:#4c5b61; /*outer space,dark blue*/
	--color2:#adacb5; /*french gray,medium gray*/
	--color3:#dcdcdd; /*platinum*/
	--color4:#6a2e35; /*wine*/
	--color5:#7b904b; /*moss green*/
}
.container {
max-width: 1200px; /* Max width for larger screens */
margin: 0 auto; /* Center container */
padding: 20px;
}
html, body {
margin: 0;
font-size: 2vh;
/*width: calc(var(--vw, 1vw) * 100);*/
height: 100vh;
font-family: 'Arial', sans-serif;
background-color: var(--color1);
color: var(--color3);
}
header {
background-color: #1e1e1e; /* Darker section for header */
padding: 15px 0;
text-align: center;
}
nav {
margin: 10px 0;
}
a:link, a:visited {
color: var(--color3);
text-decoration: none;
background-color: var(--color5);
border: 3px solid var(--color1);
padding: 10px 18px;
text-align: center;
transition: color 0.3s; /* Smooth transition */
}
a:hover {
color: var(--color1);
background-color: var(--color2);
}
nav a {
color: #ffffff; /* White links */
text-decoration: none;
margin: 0 15px;
transition: color 0.3s; /* Smooth transition */
}
nav a:hover {
color: #ff9800; /* Highlight on hover */
}
nav a:visited {
color: #eeeeee; /* Highlight on hover */
padding: 20px;
}
h1, h2, h3 {
color: var(--color5); /* Accent color for headings */
padding-left: 10px;
}
p {
line-height: 1.6; /* Improve readability */
padding-left: 10px;
}
footer {
background-color: #1e1e1e; /* Consistent footer styling */
padding: 15px 0;
text-align: center;
color: #bbb; /* Lighter text for footer */
}
@media (max-width: 600px) {
.container {
padding: 10px; /* Reduce padding on smaller screens */
}