:root {
	--color-background: #111221;
	--color-primary: #ea132d;
	--color-primary-dark: #a10000;
	--color-secondary: #3273eb;
	--color-secondary-dark: #0041a8;
	--color-accent: #181930;
	--color-accent-dark: #0d0e1b;
	--color-text: #ffffff;
	--color-text-light: #b0b0b0;
	--color-success: #28a745;
	--color-error: #dc3545;
	--color-info: #17a2b8;
	--color-warning: #ffc107;
}

* {
	font-family: Poppins, sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: var(--color-text);
}

body {
	height: 100vh;
	background-color: var(--color-background);

	display: flex;
	flex-direction: column;
}

/* Navbar */
nav {
	z-index: 1000;
	overflow: visible; /* Changed from hidden to visible for dropdowns */
	padding: 1rem 2rem;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 35px;
	background-color: var(--color-accent);
}

#nav-logo {
	position: absolute;
	left: 20px;
	display: flex;
	align-items: center;
}

#nav-logo img {
	height: 40px;
}

#nav-logo span {
	font-family: "Neonderthaw", cursive;
	font-size: 35px;
	color: var(--color-primary);
}

nav * {
	-webkit-user-drag: none;
}

nav > a {
	font-size: 25px;
	text-decoration: none;
	transition: 0.2s;
}

nav > .nav-link:hover {
	transform: translateX(2px) translateY(-2px);
	color: var(--color-primary);
	text-shadow: -2px 2px var(--color-primary-dark);
}

/* Dropdown Menu */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    cursor: pointer;
    padding: 0;

    font-size: 25px;
    background: transparent;
    border: none;
    
	display: flex;
    align-items: center;
    gap: 5px;
    
	transition: 0.2s;
}

.dropbtn:hover {
    transform: translateX(2px) translateY(-2px);
    color: var(--color-primary);
    text-shadow: -2px 2px var(--color-primary-dark);
}

.dropdown-content {
    z-index: 1;
	overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    width: 140px;

    background-color: var(--color-accent-dark);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    border-radius: 5px 5px 10px 10px;
    border: 1px solid var(--color-primary-dark);

    display: none;
}

.dropdown-content a {
    padding: 10px 15px;

	color: var(--color-text);
    text-decoration: none;
    font-size: 18px;
	
    display: block;
	transition: 0.2s;
}

.dropdown-content a:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-text);
}

.dropdown-content a:active {
	background-color: var(--color-primary);
	color: var(--color-text);
}

.nav-dropdown:hover .dropdown-content {
    display: block;
}

/* Nav User Links */
#nav-user-links {
    padding: 3px;
    background-color: var(--color-primary-dark);
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s ease;
}

#nav-user-links > a {
    z-index: 1;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
    text-decoration: none;
	background-color: var(--color-primary-dark);
}

#nav-user-links > a:hover {
	background-color: var(--color-primary);
}

#nav-user-links > a:active {
    transform: scale(0.95);
}

#nav-user-links > a > i {
	font-size: 20px;
	color: var(--color-text);
}

#account-link {
	border-radius: 50% 0 0 50%;
}

#logout-link {
    border-radius: 0 50% 50% 0;
}

/* Nav Location */
#nav-location {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-family: "Neonderthaw", cursive;
	font-size: 40px;
	color: var(--color-primary);
	animation: led-flicker 10s infinite alternate;
}

main {
    overflow-y: scroll;
	flex-grow: 1;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-background);
}

::-webkit-scrollbar-thumb {
    background: #b30000;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #cc0000;
}

/* Flickering animation */
@keyframes led-flicker {
	0%,
	18%,
	22%,
	25%,
	53%,
	57%,
	100% {
		text-shadow: 0 0 7px rgba(0, 0, 0, 0.4), 0 0 10px var(--color-primary),
			0 0 21px var(--color-primary), 0 0 32px var(--color-primary),
			0 0 42px var(--color-primary);
	}

	20%,
	24%,
	55% {
		text-shadow: none;
	}
}