@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');

:root {
	--primary: #0a1628;
	--secondary: #0f1f3a;
	--third: #1a3050;
	--border: #1e4070;
	--accent: #4fc3f7;
	--accent-hover: #81d4fa;
	--font-color: #e0ecf5;
	--anchor: #4fc3f7;
	--anchor-hover: #81d4fa;
	--gold: #d4a843;
	--bg-danger: #2d1b1b;
	--color-danger: #ff6b6b;
	--border-danger: #4a2020;
	--bg-warning: #2d2a1b;
	--color-warning: #ffd93d;
	--border-warning: #4a4420;
	--bg-info: #0f2940;
	--color-info: #4fc3f7;
	--border-info: #1e4070;
	--bg-success: #1b2d1f;
	--color-success: #6bff8b;
	--border-success: #204a28;
	--bg-default: rgba(5,15,30,0.6);
	--color-default: #8bacc8;
	--border-default: #1e4070;
}

textarea {
	color: var(--font-color);
	background: var(--primary);
	border: 1px solid var(--border);
	border-radius: 6px;
}

body {
	font-family: 'Inter', sans-serif;
	color: var(--font-color);
	background: linear-gradient(rgba(5, 10, 25, 0.85), rgba(5, 10, 25, 0.9)), url(../img/background.webp);
	background-position: center top;
	background-attachment: fixed;
	background-size: cover;
	margin: 0;
	padding: 0;
}

body, ul { margin: 0; padding: 0; }
li { list-style: none; }
a { text-decoration: none; color: var(--anchor); }
a:hover { color: var(--anchor-hover); }
a:hover, button:hover, input[type="submit"]:hover {
	cursor: pointer;
}
* { transition: all 0.15s ease; }

nav {
	background: rgba(15, 25, 35, 0.95);
	border-bottom: 1px solid var(--border);
	backdrop-filter: blur(10px);
	position: sticky;
	top: 0;
	z-index: 100;
}
nav .container { padding: 0 20px; }
nav .container > div > ul > li { display: inline-block; }
nav .container > div > ul > li > a {
	padding: 18px 20px;
	display: block;
	color: #a0aec0;
	font-weight: 500;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
nav .container > div > ul > li > a:hover {
	color: var(--accent);
	background: rgba(0, 212, 170, 0.05);
}
nav .container > div > ul > li > ul {
	position: absolute;
	border: 1px solid var(--border);
	border-top: 2px solid var(--accent);
	width: 220px;
	display: none;
	background: var(--primary);
	border-radius: 0 0 8px 8px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
nav .container > div > ul > li:hover > ul { display: block; }
nav .container > div > ul > li > ul > li > a {
	display: block;
	padding: 12px 20px;
	color: #a0aec0;
	font-size: 0.85em;
}
nav .container > div > ul > li > ul > li > a:hover {
	background: rgba(0, 212, 170, 0.1);
	color: var(--accent);
}

nav .container, .preventCollapse, .ellipsis { overflow: hidden; }

.modIcon > i:nth-child(2),
.modIcon:hover > i:nth-child(1) { display: none; }
.modIcon:hover > i:nth-child(2) { display: inline-block; }

.topPane { margin-bottom: 10px; }
.leftPane { width: 69%; }
.rightPane { width: 29%; margin-left: 2%; }
.searchForm { width: 200px; }
.body { padding: 12px 0px; }
.header, .well, .smedia a { width: 100%; }
td { padding: 6px 8px; }
.header {
	color: var(--accent);
	border-bottom: 1px solid var(--border);
	font-family: 'Cinzel', serif;
}
.content { text-align: center; }
.feedContainer { margin: 1.5rem 0; }
.pull-left { float: left; }
.pull-right { float: right; }
.well, .header { width: auto; }
.centralizeContent { text-align: center; }
.smedia { font-size: 2em; }

tr:nth-child(even) { background: var(--primary); }
tr:nth-child(odd) { background: var(--secondary); }
.table-100 { width: 100%; }

.banner {
	background: transparent;
	height: 220px;
	margin-top: 10px;
	border: none;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("../img/header.webp") no-repeat center center;
	background-size: contain;
}

input {
	height: 40px;
	border: 1px solid var(--border);
	color: var(--font-color);
	font-size: 0.95em;
	background: var(--primary);
	border-radius: 6px;
	padding: 0 12px;
}
input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.1);
}
input[type=submit] {
	background: linear-gradient(135deg, #1565c0, #0d47a1);
	color: #e0ecf5;
	font-weight: 600;
	border: 1px solid #1e88e5;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 1px;
}
input[type=submit]:hover {
	background: linear-gradient(135deg, #1e88e5, #1565c0);
	transform: translateY(-1px);
	box-shadow: 0 4px 15px rgba(30, 136, 229, 0.4);
}

#countDownTimer {
	line-height: 2.3;
	padding: 10px 15px;
	color: var(--accent);
	font-family: 'Cinzel', serif;
	font-size: 1.1em;
	background: rgba(0, 212, 170, 0.05);
	border-radius: 8px;
	border: 1px solid rgba(0, 212, 170, 0.2);
}

.loginForm {
	display: flex;
	flex-wrap: wrap;
}
button:hover {
	background: rgba(0, 212, 170, 0.1);
}
button, input[type=submit], input[type=text], input[type=number], input[type=email], input[type=password] {
	margin-top: 8px;
	width: 98%;
}

input[type=search] {
	background: var(--primary);
}

.main {
	width: 1200px;
	margin: 0 auto;
	padding: 1.5rem 0;
	position: relative;
	z-index: 1;
}

.ellipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alert-box {
	max-width: 500px;
	font-size: 14px;
	border-radius: 8px;
	border: 1px solid var(--third);
	margin: 0 auto;
	margin-bottom: 15px;
	text-align: center;
	padding: 12px 20px;
}
.alert-default { background: var(--bg-default); color: var(--color-default); border-color: var(--border-default); }
.alert-info { background: var(--bg-info); color: var(--color-info); border-color: var(--border-info); }
.alert-success { background: var(--bg-success); color: var(--color-success); border-color: var(--border-success); }
.alert-warning { background: var(--bg-warning); color: var(--color-warning); border-color: var(--border-warning); }
.alert-danger { background: var(--bg-danger); color: var(--color-danger); border-color: var(--border-danger); }
.alert-collapse { display: inline-block; }
.alert-size1 { font-size: 12px; }
.alert-size2 { font-size: 15px; }
.alert-size3 { font-size: 18px; }
.alert-size4 { font-size: 20px; }

nav .container > div > ul > li > ul > li > a:hover, #countDownTimer, input[type=text], input[type=number], input[type=email], input[type=password], textarea, table {
	background: var(--primary);
}

nav .container {
	background: transparent;
}

.feedContainer {
	background: rgba(15, 25, 35, 0.5);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 20px;
}

.leftPane, .rightPane, .topPane {
	background: transparent;
}
tr:nth-child(2n+1) {
	background: var(--secondary);
}

.feedContainer, nav .container, .topPane {
	border-bottom: none;
}

.header, .well, .smedia a {
	padding: 10px;
}

.searchForm input,
.loginForm input,
.alert-box {
	padding: 5px 12px;
}

.vertical-menu a {
	color: var(--anchor) !important;
}

.loginForm .well {
	width: 100%;
}

.widget center {
	margin: auto;
}
.widget h3 {
	margin-bottom: 0;
}

#loginContainer li {
	text-align: right;
}

select {
	background: var(--primary);
	color: var(--font-color);
	height: 40px;
	border: 1px solid var(--border);
	font-size: 1em;
	border-radius: 6px;
}

input[type=radio], input[type=checkbox] {
	width: initial !important;
	height: initial !important;
}

#account-manage {
	width: initial !important;
}

.well.widget {
	background: var(--secondary);
	border: 1px solid var(--border);
	border-radius: 10px;
	margin-bottom: 12px;
	overflow: hidden;
}

footer {
	background: rgba(15, 25, 35, 0.8);
	border: 1px solid var(--border);
	border-radius: 12px;
	margin-top: 1.5rem;
	padding: 20px;
}
footer a { color: var(--accent); }