/*******************************************************************************
* Pyromaniac Mariner 2026
*******************************************************************************/
/* Style Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Lucida Sans Unicode', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans', Geneva, Verdana, sans-serif;
}

/* Main Style *****************************************************************/
body {
	background-color: #000840;
}

/* Style main content*/
.content {
	color: #f0f0e0;
	max-width: 1200px;
	margin: 100px auto 0;
	padding: 45px 0px 0px 0px;
	text-align: center;
}

.content h1 {
	margin-bottom: 20px;
	color: #f0f0f0;
}
/******************************************************************************/

/*******************************************************************************
* Pyromaniac Mariner 2026
* Based on How to Build a Responsive Navbar from Scratch by Amaresh Adak 
* (https://thesyntaxdiaries.com/responsive-navbar-html-css-js
*******************************************************************************/

/* Navigation Style ***********************************************************/
/* Navbar styles */
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: linear-gradient(180deg, #6f468c, #5c3973);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 2rem;
	height: 105px;
	box-shadow: 5px 10px 35px #58376f, 
			inset -2px -8px 18px #2a1a34;
	z-index: 1000;
	transition:
		background-color 0.3s ease,
		height 0.3s ease;
}

/* Logo and Nametext styles */
.logo a {
	color: white;
	font-family: 'Lucida Sans', sans-serif;
	font-size: 1.5rem;
	font-weight: 1000;
	text-decoration: none;
	transition: all 0.3s ease;
}

.logo a:hover {
	color: #ea5a4a;
}

.nametext a {
	color: white;
	font-size: 1.5rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.3s ease;
}

.nametext a:hover {
	color: #ea5a4a;
}

/* Nav Menu styles */
.nav-links {
	display: flex;
	list-style: none;
}

.nav-links li {
	margin-left: 2rem;
}

.nav-links a {
	color: #f0f0fa;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 500;
	padding: 0.5rem 0;
	transition: all 0.3s ease;
	position: relative;
}

.nav-links a:hover {
	color: #ea5a4a;
}

/* Active link indicator */
.nav-links a.active {
	color: #ea5a4a;
}

.nav-links a.active::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #ea5a4a;
}

/* Hamburber Menu style */
.hamburger {
	display: none;
	cursor: pointer;
}

.bar {
	display: block;
	width: 25px;
	height: 3px;
	margin: 5px auto;
	background-color: white;
	transition: all 0.3s ease;
}

/* Dropdown styles */
.dropdown {
	position: relative;
}

.dropdown-menu {
	position: absolute;
	top: 200%;
	right: 0;
	background: linear-gradient(145deg, #6c3989, #5b3073);
	background-color: #653580;
	width: 200px;
	padding: 10px 0;
	border-radius: 4px;
	box-shadow: -3px 3px 25px #4d2861,
			inset -1px -1px 8px #2a1a34,
			inset 1px 1px 8px #2a1a34;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s ease;
	z-index: 10;
	list-style: none;
}

.dropdown:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown-menu li {
	margin: 0;
}

.dropdown-menu a {
	display: block;
	padding: 8px 20px;
	transition: background-color 0.3s ease;
}

.dropdown-menu a:hover {
	background-color: #653580;
}
/******************************************************************************/

/* Scroll Effect Nav **********************************************************/
/* Navbar style */
.navbar.scrolled {
	background: linear-gradient(180deg, #6f468caa, #5c3973aa); /* Semi-transparent background */
	height: 60px; /* Smaller height when scrolled */
	backdrop-filter: blur(5px); /* Modern blur effect */
	box-shadow: 3px 8px 25px #503060, 
			inset -2px -8px 18px #2a1a34;
}

.nav-menu.scrolled {
	top: 60px;
}

/* Adjust Logo and Nametext size when scrolled */
.navbar.scrolled .logo a {
	font-size: 1.2rem;
}

.navbar.scrolled .nametext a {
	font-size: 1.3rem;
}
/******************************************************************************/

/* Footer style ***************************************************************/
footer {
	color: #ea5a4a;
	display: flex;
	position: fixed;
	font-size: 1rem;
	font-weight: 600;
	height: 65px;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 5px;
	background: linear-gradient(180deg, #4e768a44, #2c5268aa);
	box-shadow: -3px -8px 25px #4e768a, 
			inset 2px 5px 12px #362640;
	margin-top: 15px;
}

.footer-left {
	padding: 2px 30px;
	display: flex;
	flex-direction: column;
}

.footer-email a {
	color: #ea5a4a;
}

.footer-email a:hover {
	color: #eeee55;
}

.footer-right {
	display: flex;
	align-items: center;
	margin-left: auto;
	padding: 2px 45px;
}
/******************************************************************************/

/* Style Skip Button **********************************************************/
/* UNUSED FOR THIS
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background-color: #3498db;
  color: white;
  padding: 8px;
  z-index: 2000;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
}*/
/******************************************************************************/

/* Mobile Styles **************************************************************/
@media only screen and (max-width: 768px) {
	/* Show Hamburger menu only on mobile */
	.hamburger {
		display: block;
	}

	/* Animate Hamburger to a cross */
	.hamburger.active .bar:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.hamburger.active .bar:nth-child(2) {
		opacity: 0;
	}

	.hamburger.active .bar:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	/* Position the Nav Menu for mobile */
	.nav-menu {
		position: fixed;
		top: 105px; /* Height of the Navbar */
		left: 120%;
		width: 80%;
		background-color: #684183;
		text-align: center;
		transition: 0.3s;
		box-shadow: -10px 10px 25px #58376f, 
				inset 2px -5px 10px #2a1a34, 
				inset 2px 5px 18px #2a1a34;
	}

	/* Show Nav Menu when active class is added */
	.nav-menu.active {
		left: 20%;
	}

	/* Stack Nav Links vertically */
	.nav-links {
		flex-direction: column;
		padding: 20px 0;
	}

	.nav-links li {
		margin: 10px 0;
	}
  
	/* For Dropdowns */
	.dropdown-menu {
		position: static;
		width: 100%;
		background-color: #653580;
		opacity: 1;
		visibility: hidden;
		max-height: 0;
		overflow: hidden;
		transform: none;
		box-shadow: none;
		transition: all 0.3s ease;
	}

	.dropdown.active .dropdown-menu {
		visibility: visible;
		max-height: 500px;
		box-shadow: inset 3px -1px 8px #2a1a34;
	}
}
/******************************************************************************/

/* No JS Overrides ************************************************************/

.hamburger.j {
	display: none;
}

.content.j {
	padding: 30px 0px 0px 0px;
}

@media only screen and (max-width: 768px) {
	.navbar.j {
		position: absolute;
		top: 0;
		padding: 0 2rem;
		height: 70px;
		box-shadow: inset 0px -8px 18px #402a54;
	}

	.nav-menu.j {
		position: absolute;
		top: 70px;
		left: 0%;
		width: 100%;
		box-shadow: -10px 10px 25px #58376f,
				inset 0px -8px 18px #2a1a34,
				inset 0px 8px 18px #402a54;
	}

	.nav-links.j {
		flex-direction: column;
		padding: 5px 0;
	}

	/* For Dropdowns */
	.dropdown-menu.j {
		position: static;
		width: 100%;
		background-color: #653580;
		opacity: 1;
		visibility: hidden;
		max-height: 0;
		overflow: hidden;
		transform: none;
		box-shadow: none;
		transition: all 0.3s ease;
	}

	/* Dropdown styles */
		.dropdown.j:hover .dropdown-menu.j {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		visibility: visible;
		max-height: 500px;
		box-shadow: inset 0px -1px 8px #2a1a34;
	}

	.dropdown-menu.j li {
		margin: 0;
	}

	.dropdown-menu.j a {
		display: block;
		padding: 8px 20px;
		transition: background-color 0.3s ease;
	}

	.dropdown-menu.j a:hover {
		background-color: #653580;
	}

	.content.j {
		padding: 150px 0px 0px 0px;
	}
}
/******************************************************************************/