@font-face {
  font-family: saira-thin;
  src: url("/style/fonts/saira-condensed.thin.ttf");
}

@font-face {
  font-family: saira-medium;
  src: url("/style/fonts/saira-condensed.medium.ttf");
}

@font-face {
	font-family: bitcrusher;
	src: url("/style/fonts/bitcrusher.condensed-bold.ttf");
}

@font-face {
	font-family: axiforma;
	src: url("/style/fonts/AxiformaBold.otf");
}

html {
	background-image: url("/img/dark-bg.png");
}

body {
	margin: 0px;
	min-width: 840px;
}

.container {
	width: 1150px;
	margin: 0 auto;
}

.logo-big-image {
	margin-top: 10px;
	background-image: url(/img/Nostalgia_Website_Banner.png);
	background-size: 1150px;
	width: 1150px;
	height: 290px;
}

.header {
	height: 86px;
	background: #00050a;
	font-family: saira-thin;
	color: white;
}

.news-bar {
	font-family: axiforma;
    color: red;
    background: black;
    font-size: 20px;
    border: 1px solid red;
    text-align: center;
    padding: 8px;
    margin: 4px;
    text-transform: uppercase;
    font-weight: bold;
}

.news-bar a {
    color: red;   
}

.header-info-border {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	height: 34px;
}

.header-info {
	text-align: center;
	color: white;
}

.header-info-left {
	display: inline-block;
	float: left;
	padding-left: 252px;
	padding-top: 2px;
	font-weight: 500;
	font-size: 18px;
}
.header-info-right {
	display: inline-block;
	float: right;
	padding-right: 8px;
	padding-top: 2px;
	color: yellow;
	font-size: 16px;
}

.header-info-right a {
	color: rgb(255,255,0);
	text-decoration: none;
}

.header-info-right a:hover {
	text-decoration: underline;
}

.header-info-right span {
  font-family: saira-medium;
}

.header-nav {
	height: 48px;
	background-image: url("img/top-bar-nav-check.png");
}

.header-nav-content {
	padding-left: 252px;
	height: 100%;
	display: inline-block;
	overflow: hidden;
}

.header-nav-content a {
	border-left: 1px solid #777;
	border-right: 1px solid #777;
	padding: 0 40px;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
	line-height: 48px;
	margin: 0;
	color: white;
	text-decoration: none;
	font-size: 20px;
	font-weight: bold;
}

.header-nav-content-right {
	background-image: linear-gradient(rgba(255,235,0,0.8), rgba(210,200,16,0.70));
	border-top: 2px solid rgb(130, 130, 0);
	border-left: 2px solid rgb(110, 110, 0);
	border-bottom: 2px solid rgb(60, 60, 0);
	border-right: 2px solid rgb(90, 90, 0);
	float: right;
	display: inline-block;
	padding: 0 32px;
	height: 100%;
	vertical-align: middle;
	line-height: 48px;
	margin: 0;
	color: white;
	text-decoration: none;
	font-size: 26px;
	font-weight: bolder;
	text-transform: uppercase;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);
}

.header-nav-content-right:hover {
	background-image: linear-gradient(rgba(255,240,16,1.00), rgba(160,160,16,1.00));
}

.header-nav-content a:hover {
	text-decoration: underline;
	background-color: rgba(0,0,0,0.25);
}

.home-content {
	
}

.home-sidebar {
	display: inline-block;
	width: 340px;
}

.home-sidebar fieldset {
	background: rgb(20, 20, 20);
	border: 2px solid rgba(72,54,38,1.00);
	border-radius: 2px;
}

.login-bar {
	padding: 3px 12px;
	color: white;
	border: 2px solid #382418;
	background-color: black;
}

.login-bar a {
	color: yellow;
	text-decoration: none;
}

.login-bar a:hover {
	text-decoration: underline;
}

.home-sidebar legend {
	color: white;
	font-weight: bolder;
	padding: 8px;
	text-align: left;
}

.sidebar-link {
	vertical-align: middle;
	line-height: 32px;
	font-size: 20px;
}

.sidebar-link img {
	padding: 0 4px;
	vertical-align: middle;
}

.home-sidebar a, .home-sidebar p {
	color: yellow;
	text-decoration: none;
}

.sidebar-link:hover p {
	text-decoration: underline;
}

.home-sidebar p {
	display: inline-block;
	padding-left: 6px;
	margin: 0;
}

.home-main-content {
	display: inline-block;
	width: calc(100% - 360px);
	vertical-align: top;
	margin-top: 20px;
}

.home-main-buttons {
	margin: 0 auto;
	width: fit-content;
}

.home-main-big-button {
	display: inline-block;
	background-image: url(img/home-button-big-hover.png);
	background-size: 377px 160px;
	width: 377px;
	height: 160px;
	margin: 0 8px;
	vertical-align: top;
	text-align: center;
	align-content: center;
}

	.home-main-big-button h1 {
		color: #d1b77c;
		text-transform: uppercase;
		font-size: 34px;
		font-weight: normal;
		font-family: axiforma;
		padding: 0 32px;
		line-height: 48px;
		text-shadow: 4px 4px 1px black;
		margin: 10px 0;
	}

.home-main-big-button:hover {
	background-image: url(img/home-button-big.png);
	color: white;
}

.scroll-content {
	width: 800px;
	margin: 0px auto;
	margin-top: 10px;
}

.feed {
    margin: 0 auto;
    padding-top: 8px;
    background: url("img/feed-middle.png");
    background-repeat: repeat-y;
	background-size: 780px 160px;
    width: 780px;
}

.feed-logo-video {
	margin: 20px 0;
	text-align: center;
}

.feed p {
	font-size: 20px;
	padding: 8px 16px;
}

.feed iframe {
	margin: 0 auto;
}

.feed hr {
	width: 90%;
	border-color: rgba(108,59,28,1.00);
	background-color: rgba(85,67,36,1.00);
}

.server-information {
    margin: 0 auto;
    padding-top: 16px;
    padding-bottom: 16px;
    margin-top: 16px;
    background: url("img/feed-middle-info.png");
    background-repeat: repeat-y;
	background-size: 780px 360px;
    width: 780px;
	height: 328px;
	border-bottom: 2px solid #222;
}

.server-information p {
	font-size: 18px;
	margin-bottom: 34px;
}

.server-information h1 {
	font-family: saira-medium;
	margin-left: 32px;
	text-align: left;
	font-weight: 700;
}

.signup-button {
	font-family: axiforma;
	color: white;
	background-image: url(img/home-button-big-hover.png);
	margin: 0px 128px;
	border-radius: 6px;
	text-align: center;
	padding: 8px 20px 2px 20px;
	font-size: 28px;
	text-transform: uppercase;
	text-decoration: none;
	background-size: 233px 104px;
	line-height: 34px;
}

.button-link {
	text-decoration: none;
}

.signup-button:hover {
	text-decoration: underline;
	background-image: url(img/home-button-big.png);
}

.information {
	font-size: 14px;
	width: 55%;
	margin-left: 32px;
	text-align: left;
}

.news-feed {
	margin: 8px 28px;
	text-align: left;
	padding-bottom: 32px;
}

.home-news-post {
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(27,13,2,1.00);
}

.home-news-post span {
	font-size: 12px;
}

.home-news-post p a {
	font-size: 14px;
	color: white;
	text-decoration: none;
}

.home-news-post p a:hover {
	text-decoration: underline;
}

.icon {
  display: none;
}

.nav-bars {
	vertical-align: middle;
	line-height: 48px;
}

.nav-bars img {
	padding: 10px 0;
}

.footer {
	text-align: center;
	color: white;
	margin-bottom: 32px;
}

.footer a {
	color: yellow;
	text-decoration: none;
}

.footer a:hover {
	text-decoration: underline;
}

.dropdown-content {
	visibility: hidden;
	display: none;
	height: 0;
}

.dropdown-content-link {
	width: 100%;
	display: block;
	background: black;
	padding: 8px;
}

.dropdown-content a {
	color: white;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
}

.dropdown-content-link:hover {
	text-decoration: underline;
	background: #333;
}

.news-feed-home-posts h1 a {
	font-size: 22px;
	color: white;
	text-decoration: none;
}

.news-feed-home-posts h1 {
	margin-bottom: 4px;
}

.news-feed-home-posts p {
	font-size: 18px;
	margin: 4px 0;
	padding: 8px 2px;
}

.news-feed-home-posts h1 a:hover {
	text-decoration: underline;
}

.news-feed-home-posts {
	padding: 0 48px;
}

.home-news-post-left-side {
	display: inline-block;
	float: left;
	width: 30%;
}

.home-news-post-left-side img {
	margin-top: 32px;
}

.home-news-post-right-side {
	display: inline-block;
	float: right;
	width: 70%;
}

.signup-container {
	border: 6px solid rgb(24, 30, 32);
	border-radius: 8px;
	background: rgb(14, 17, 18);
	width: 400px;
	margin: 40px auto;
}

.signup-top-box-logo {
	background: black;
	padding: 12px;
	text-align: center;
}

.signup-container h1 {
	text-align: center;
	font-size: 28px;
	color: white;
  	font-family: saira-thin;
	margin: 8px 0;
}

.signup-container form {
	font-family: bitcrusher;
	color: white;
	width: 320px;
	margin: 0 auto;
}

.signup-container input:not([type="image"]) {
	width: 100%;
	font-size: 24px;
	margin-bottom: 8px;
	padding: 4px;
	font-weight: bold;
	font-family: bitcrusher;
}

.signup-container input[type=submit] {
	font-family: bitcrusher;
	cursor: pointer;
}

.signup-container p {
	color: white;
	font-size: 16px;
	font-family: saira-thin;
	margin: 8px 48px;
	text-align: center;
}

.signup-container a {
	color: yellow;
	text-decoration: none;
}

.signup-container a:hover {
	text-decoration: underline;
}

.signup-success-box {
	color: white;
	background: rgba(2,60,2,1.00);
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding: 2px 6px;
}

.signup-error-box {
	color: white;
	background: rgba(122,0,2,1.00);
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding: 2px 6px;
}

.signup-error-box p, .signup-success-box p {
	margin: 0;
}

.rules-container {
	padding: 16px 32px;
	font-family: saira-thin;
}

.rules-container h1, .guide-container h1 {
	font-family: saira-medium;
	font-weight: 700;
	color: white;
}

.rules-container p {
	font-size: 18px;
}

.rules-container dl {
	margin: 8px 16px;
}

.rules-container dt {
	font-family: saira-medium;
	font-weight: 500;
	color: red;
	font-size: 24px;
}

.rules-container dd {
	margin-inline-start: 20px;
	font-family: saira-thin;
	font-size: 20px;
	color: black;
}

.guide-container {
	padding: 24px;
	text-align: left;
}

.map-container {
	text-align: center;
	padding: 24px 0;
}

.map-container p,.guide-container p {
	color: white;
	font-size: 18px;
}

.map-container a, .guide-container a {
	color: white;
	text-decoration: none;
}

.map-container a:hover, .guide-container a:hover {
	text-decoration: underline;
}

.beta-info-container {
	padding: 16px 32px;
}

.beta-logo-small {
	height: 180px;
}

.beta-info-container h1, .poll-container h1 {
	font-size: 28px;
	font-family: saira-medium;
	font-weight: 700;
	color: white;
}

.beta-info-container a {
	color: yellow;
	text-decoration: none;
}

.beta-info-container a:hover {
	text-decoration: underline;
}

.center-image {
	text-align: center;
}

.news-page-numbers {
	text-align: center;
	font-family: saira-thin;
}

.news-page-numbers a {
	color: yellow;
	text-decoration: none;
}

.news-page-numbers a:hover {
	text-decoration: underline;
}

.bug-report-container {
	padding: 16px 32px;
	font-family: saira-thin;
	padding-bottom: 32px;
}

.bug-report-container td {
	text-align: center;
	padding: 2px 4px;
}

.bug-report-container p {
	font-size: 20px;
}

.bug-report-container li {
	font-size: 18px;
}

.bug-report-container select {
	width: 240px;
	height: 32px;
	font-family: saira-medium;
	font-size: 18px;
}

.bug-report-container input[type=submit] {
	width: 240px;
	height: 32px;
	font-family: saira-medium;
	font-size: 18px;
	margin-top: 8px;
}

.poll-container {
	padding: 16px 32px;
	font-family: saira-thin;
	padding-bottom: 32px;
}

.poll-container table {
	font-size: 24px;
}

.center-text {
	text-align: center;
}

.content-poll-vote {
	padding: 16px 64px;
}

.content-poll-vote label {
	font-weight: bold;
	display: block;
	text-align: left;
	font-family: saira-thin;
	font-size: 20px;
}

.poll-container {
	padding: 16px 64px;
	padding-bottom: 48px;
}

.poll-question p {
	margin: 0;
}

.vote-in-poll-buttons {
	text-align: center;
}

.vote-in-poll-buttons input[type=submit] {
	width: 180px;
	height: 38px;
	font-size: 18px;
	font-weight: bold;
	font-family: saira-medium;
}

.vote-in-poll-buttons a {
	color: yellow;
	text-decoration: none;
}

.vote-in-poll-buttons a:hover {
	text-decoration: underline;
}

.poll-result .wrapper .poll-question .result-bar {
      display: flex;
      height: 25px;
      min-width: 5%;
      background-color: #38b673;
      border-radius: 5px;
      font-size: 14px;
      color: #FFFFFF;
      justify-content: center;
      align-items: center;
}

.forums {
	color:white;
}

.forums p a{
	text-align: center;
	color: white;
}

.forums p a:hover {
	color: white;
}

.forums h1 {
	color: white;
	text-align: center;
	font-size: 32px;
	font-weight: 700;
	font-family: saira-medium;
}

.forums table {
	color: white;
	width: 96%;
	margin: 0 auto;
	font-family: saira-thin;
}

.forums table a {
	color: yellow;
	text-decoration: none;
	font-weight: bold;
}

.forums table a:hover {
	text-decoration: underline;
}

.forum-title-info {
	font-weight: bold;
}

.group-name {
	border: 1px solid #4f2f1f;
    background-color: #1A0903;
    font-size: 18px;
    font-weight: bold;
    text-align: left !important;
    padding: 8px;
	font-family: saira-medium;
}

.forum-item {
	background-color: black;
}

.forums td {
	padding: 8px;
	text-align: center;
}

.righttd.updated {
	
	border: 1px solid #4f2f1f;
}

td.num {
	border: 1px solid #4f2f1f;
}

.forum-icon {
	border: 1px solid #4f2f1f;
}

.forum-name {
	border: 1px solid #4f2f1f;
	text-align: left !important;
}

.groupend {
	border-top: 2px solid #382418;
    margin-bottom: 10px;
}

.postend {
    height: 4px;
	line-height: 0;
}

.post-content {
	padding: 8px 20px !important;
	font-size: 18px;
}

.post-name {
	background-color: #1D0A0A;
	padding: 8px 14px !important;
	text-align: left !important;
}

.post-name p {
	margin: 2px 0;
	font-size: 16px;
}

.post-name small {
	font-size: 12px;
	display: block;
}

.reply {
	width: 100%;
}

.reply textarea {
	width: 100%;
	height: 128px;
	font-size: 20px;
}

.forums-post-top-box, .forums-category-top-box {
	border: 2px solid #553f28; 
	background-color: black;
	padding: 2px 8px;
	font-size: 16px;
	font-family: saira-thin;
	width: 96%;
	margin: 0 auto;
	color: white;
}

.forums-post-top-box a, .forums-category-top-box a {
	color: yellow;
	text-decoration: none;
}

.forums-post-top-box a:hover, .forums-category-top-box a:hover {
	text-decoration: underline;
}

.create-thread-container {
	width: 680px;
	margin: 64px auto;
	border: 2px solid #553f28;
	background-color: black;
	padding: 8px 16px;
	color: white;
	font-family: saira-thin;
	font-size: 18px;
	text-align: center;
}

.create-thread-container h1 {
	font-family: saira-medium;
	font-size: 28px;
	margin: 4px 0;
}

.create-thread-container textarea {
	width: 80%;
	margin: 8px 0;
	font-size: 20px;
	padding: 2px;
	height: 180px;
}

.create-thread-container input[type=text] {
	font-size: 20px;
	height: 48px;
	width: 80%;
	padding: 2px;
}

.hiscores-container {
	width: 100%;
	margin: 60px auto;
}

.hiscores-container table, .hiscore-middle table {
	width: 100%;
}

.hiscores-container td {
	vertical-align: top;
}

.hiscore-left-side {
	background-color: #371B06;
	border-radius: 8px;
	margin-right: 20px;
	text-align: center;
	font-family: saira-medium;
	font-size: 18px;
	padding: 12px;
	border: 2px solid #553f28;
}

.hiscore-left-side a, .hiscore-middle a {
	color: yellow;
	text-decoration: none;
}

.hiscore-left-side a:hover, .hiscore-middle a:hover {
	text-decoration: underline;
}

.hiscore-left-side td {
	text-align: center;
	font-size: 18px;
	vertical-align: middle;
}

.hiscore-right-player-search {
	background-color: #371B06;
	color: white;
	border-radius: 8px;
	margin-left: 20px;
	text-align: center;
	font-family: saira-medium;
	font-size: 18px;
	padding: 12px;
	border: 2px solid #553f28;
	margin-bottom: 20px;
}

.hiscore-right-player-search input[type=text] {
	font-size: 16px;
	height: 32px;
	width: 80%;
	padding: 2px;
	margin-bottom: 8px;
}

.hiscore-right-player-search input[type=submit] {
	font-size: 16px;
	height: 32px;
	width: 80%;
	padding: 2px;
	margin-bottom: 8px;
	font-family: saira-medium;
	font-weight: 700;
}

.hiscore-middle {
	background-color: #371B06;
	color: white;
	border-radius: 8px;
	text-align: center;
	font-family: saira-medium;
	font-size: 18px;
	padding: 12px;
	border: 2px solid #553f28;
}

.hiscore-middle td {
	color: white;
	vertical-align: middle;
}

.hiscore-middle a {
	color: white;
}

.compare-table {
	width: 45%;
	display: inline-block;
	float: left;
}

.gallery-container {
	color: white;
	font-family: saira-medium;
}

.gallery-container td {
	text-align: center;
	font-size: 24px;
	padding-bottom: 20px;
}

.gallery-container a {
	color: black;
	text-decoration: none;
}

.gallery-container a img {
	filter: brightness(100%);
}

.gallery-container a:hover p {
	text-decoration: underline;
}

.gallery-container a:hover img {
	filter: brightness(80%);
}

.gallery-table, images-table {
    width: 100%;
}
.gallery-table tr, .images-table {
    width: 100%;
}
.gallery-slot, .images-slot {
    margin: 0 auto;
    width: 340px;
    background: white;
    text-align: left;
}
.images-slot {
    width: 224px;
    cursor: pointer;
}
.images-slot:hover p {
    text-decoration: underline;
}
.images-slot:hover img {
    filter: brightness(80%);
}
.gallery-slot img, .images-slot img {
    width: 100%;
    height: 218px;
    object-fit: cover;
}
.images-slot img {
    height: 168px;
}
.gallery-slot p, .images-slot p {
    font-size: 20px;
    margin: 0;
    padding: 4px 8px;
    padding-bottom: 0;
    font-weight: bold;
}
.gallery-slot small, .images-slot small {
    font-size: 14px;
    margin: 0;
    padding-bottom: 8px;
    padding-left: 8px;
}

table {
  border-collapse: collapse;
}


.donation-box {
	text-align: center;
	background: #5a3e1b;
	padding: 20px;
	border-radius: 10px;
	border: 2px solid #a38258;
	max-width: 500px;
	margin: 0 auto;
	margin-bottom: 20px;
}

	.donation-box h1 {
		font-size: 24px;
		color: #e0d0a3;
		text-shadow: 2px 2px 3px #000;
		margin-bottom: 10px;
	}

	.donation-box p {
		font-size: 16px;
		color: #f3e6c9;
		margin-bottom: 20px;
	}

.donation-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

	.donation-form label {
		font-size: 18px;
		font-weight: bold;
		color: #e0d0a3;
		text-shadow: 1px 1px 2px #000;
		margin-bottom: 15px; 
	}

	.donation-form select {
		padding: 10px;
		font-size: 16px;
		background: #5a3e1b;
		color: #f3e6c9;
		border: 2px solid #a38258;
		border-radius: 5px;
		cursor: pointer;
		width: 250px;
		text-align: center;
		margin-bottom: 20px;
	}

	.donation-form button {
		background: #d4af37;
		color: black;
		font-weight: bold;
		border: 2px solid #a38258;
		padding: 12px 20px;
		cursor: pointer;
		transition: all 0.2s;
		border-radius: 5px;
		width: 250px;
		text-align: center;
		margin-top: 50px;
	}

		.donation-form button:hover {
			background: #b79529;
			border-color: #8c6c3a;
		}
.donation-info-box {
	color: #d4c5a2; /* Softer gold/tan text */
	text-align: center;
	font-size: 14px; /* Smaller text */
	font-weight: normal;
	border-radius: 5px;
	max-width: 500px; /* Matches donation box width */
	margin: 0 auto 10px auto; /* Centers and adds spacing */
}

.donation-box h2 {
	color: white;
	font-family: axiforma;
}



.warning-message {
	background-color: #7a1c1c; /* Dark red background */
	color: #ffbfbf; /* Light red text */
	border: 2px solid #b22222; /* Firebrick red border */
	padding: 10px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	border-radius: 5px;
	margin-bottom: 15px;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.vote-container {
	background-color: rgba(0, 0, 0, 0.4);
	color: #d4c5a2;
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 15px;
	text-align: center;
	border-radius: 5px;
	max-width: 550px;
	margin: 0 auto;
}
.vote-buttons {
	display: flex;
	flex-direction: row; /* Align buttons in a row */
	justify-content: center; /* Center them */
	gap: 10px; /* Adds space between buttons */
	flex-wrap: wrap; /* Allows buttons to wrap if needed on smaller screens */
}

.vote-button {
	background-color: #cda34f;
	border: 2px solid #b8860b;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	padding: 12px 20px;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
	transition: background 0.3s;
	flex: 1 1 auto; /* Allows buttons to scale evenly */
	min-width: 180px; /* Prevents buttons from getting too small */
}

	.vote-button:hover {
		background-color: #a07829;
	}


.vote-points {
	display: block;
	font-size: 14px;
	font-weight: normal;
	color: #fff;
	margin-top: 5px;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.85);
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.slides {
  display: none;
  height: 500px;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  padding: 2px 16px;
  color: white;
  font-weight: bold;
}

.active {
  opacity: 1;
}

/* Admin Panel Styling */
.admin-panel {
	background: #1e1e2e; /* Dark background */
	color: #fff;
	padding: 20px;
	border-radius: 10px;
	max-width: 900px;
	margin: 40px auto;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

	/* Admin Panel Headers */
	.admin-panel h1 {
		font-size: 24px;
		margin-bottom: 15px;
		border-bottom: 2px solid #4CAF50;
		padding-bottom: 10px;
	}

	/* Admin Forms */
	.admin-panel form {
		background: #29293d;
		padding: 15px;
		border-radius: 8px;
		margin-bottom: 20px;
	}

	.admin-panel input[type="text"],
	.admin-panel textarea,
	.admin-panel select {
		width: 100%;
		padding: 10px;
		margin-top: 5px;
		margin-bottom: 10px;
		border-radius: 5px;
		border: 1px solid #555;
		background: #1e1e2e;
		color: #fff;
	}

	.admin-panel textarea {
		height: 100px;
		resize: vertical;
	}

	.admin-panel button {
		background: #4CAF50;
		color: white;
		padding: 10px 15px;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		cursor: pointer;
		transition: 0.3s ease;
	}

		.admin-panel button:hover {
			background: #388E3C;
		}

/* News Image Selection */
.image-selection {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
}

	.image-selection label {
		cursor: pointer;
		border: 2px solid transparent;
		padding: 5px;
		transition: 0.3s ease;
	}

		.image-selection label:hover {
			border-color: #4CAF50;
		}

	.image-selection input {
		display: none;
	}

	.image-selection img {
		width: 80px;
		height: 80px;
		border-radius: 5px;
	}

/* Bug Reports Table */
.admin-panel table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 15px;
	color: white;
}

.admin-panel table, .admin-panel th, .admin-panel td {
	border: 1px solid #444;
	padding: 10px;
	text-align: left;
}

.admin-panel th {
	background: #333;
}

.admin-panel tr:nth-child(even) {
	background: #29293d;
}

/* Bug Report Status Dropdown */
.admin-panel select[name="status"] {
	width: auto;
	background: #333;
	color: #fff;
	padding: 5px;
	border-radius: 5px;
}
.image-selection input:checked + img {
	border: 3px solid #4CAF50; /* Green outline for selected */
	box-shadow: 0px 0px 5px rgba(76, 175, 80, 0.8);
}

@media only screen and (max-width: 1282px) {
	/* For tablets: */
	.container {width: 100%;}
	.home-content {width: 100%; margin:0 auto; text-align: center;}
	.home-sidebar {width: 820px;}
	.home-main-content {width: 820px;}
	.logo-big-image {width: 100%; background-size: contain; background-repeat: no-repeat;}
	.dropdown-content {display: block; width: 98%;}
	.header-nav-content a {padding: 0 8px;}
	.header-nav-content a:not(:last-child) {display: none;}
  	a.icon {float: right;  display: block;}
}

@media only screen and (min-width: 1282px) {
	a.icon {display: none;}
	.dropdown-content {visibility: hidden; display:none;}
}