@charset "utf-8";
/* CSS Document */
html{
	height : 100%;
	width : 100%;
}
:root{
	--bg: #111213; /* Deep Navy chosen */
	--text: #F5F5F5;
	--primary: #9ADFDC;
	--secondary: #475267;
	--accent: #F34B06;
	--dark: #090E0E;
}
a {
	color: #9ADFDC; /* Unvisited link */
}
a:visited {
	color: #9b370f; /* Visited link */
}
a:hover {
	color: #F5F5F5; /* Hovered link */
}
a:active {
	color: orange; /* Active link */
}
body{
	font-family: Arial, Helvetica, sans-serif;
	background-color: var(--bg);
	color: var(--text);
	margin: 0;
	padding: 0;
}
/* Heading and navbar styling for modern dark theme */
h1{
	text-align: center;
	font-family: 'Orbitron', sans-serif;
	color: var(--text);
	font-size: clamp(2rem, 6vw, 4rem);
	margin: 0.5rem 0;
}
.navbar{
	width: 100%;
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	align-items: center;
	font-size: 1.1rem;
	font-family: 'Orbitron', sans-serif;
	background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.15));
	padding: 0.6rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.navbar a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 8rem;
	padding: 0.5rem 0.8rem;
	color: var(--text);
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
	background: rgba(0,0,0,0.25);
	border-radius: 6px;
	text-decoration: none;
}
.navbar a:hover,
.navbar a:focus{
	background: var(--primary);
	color: var(--dark);
	transform: translateY(-2px);
}


header {
	font-family: 'Orbitron', sans-serif;
	background: linear-gradient(90deg, rgba(0,0,0,0.3), rgba(9,14,14,0.6));
	color: var(--text);
	padding: 28px 12px;
	text-align: center;
}
footer {
	background-color:black;
	color: rgb(199, 191, 191);
	padding: 15px;
	margin-top: 15px;
	color:whitesmoke;
}
main{
	padding: 18px 20px;
	max-width: 1100px;
	margin: 0 auto;
}

section{
	padding: 18px 0;
	border-bottom: 1px solid rgba(255,255,255,0.04);
}
h2{
	font-family: 'Orbitron', sans-serif;
	margin: 0.6rem 0 0.3rem 0;
	color: var(--text);
}
h3{
	font-family: 'Orbitron', sans-serif;
	margin: 0.4rem 0 0.2rem 0;
	color: var(--text);
}
p{
	color: var(--text);
	line-height: 1.5;
}
.link{
	padding-left: 20px;
}
.footergrid{
	display: grid;
	grid-template-columns: 50% 20% 31%;
	gap: 2vw;
	justify-content: right;
	padding-left: 40px;
}
.footergrid > div{
	vertical-align: middle;
	justify-content: right;
}

/* Cats page gallery and demo styles */
.cat-gallery{
	display: flex;
	gap: 1rem;
	padding-left: 0;
	padding: 12px 20px;
	flex-wrap: wrap;
}
.cat-gallery figure{
	margin: 0;
	width: 30%;
}
.cat-gallery img{
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Button styles for demo */
.btn{
	display: inline-block;
	padding: 0.6rem 1rem;
	border-radius: 8px;
	font-family: inherit;
	cursor: pointer;
	border: none;
	box-shadow: 0 6px 18px rgba(0,0,0,0.6);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:focus{outline: 3px solid rgba(255,255,255,0.06);}
.btn-primary{
	background: linear-gradient(180deg, var(--primary), #6dbfb8);
	color: var(--dark);
}
.btn-primary:hover{transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.6);}
.btn-accent{
	background: linear-gradient(180deg, var(--accent), #d63a00);
	color: var(--dark);
}
.btn-accent:hover{transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.6);}
.swatch{display:inline-block;width:48px;height:28px;border-radius:4px;border:1px solid rgba(255,255,255,0.08);margin-right:8px;vertical-align:middle}

/* Responsive tweaks */
@media (max-width: 700px){
	.navbar{font-size:0.95rem; gap:0.25rem}
	.navbar a{min-width:6rem;padding:0.4rem 0.6rem}
	.cat-gallery figure{width:100%}
}
.SmallH1{
	font-size: clamp(1.5rem, 5vw, 3rem);
}