/* phpBB3 Style Sheet
--------------------------------------------------------------
Style name:         prosilver Special Edition
Based on style:     prosilver (the default phpBB 3.3.x style)
Original author:    Tom Beddard ( http://www.subblue.com/ )
Modified by:        phpBB Limited ( https://www.phpbb.com/ )
-------------------------------------------------------------- */

@import "downloadpagina.css";

/* ==========================================================
   BASIS
========================================================== */

html,
body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	line-height: normal;
	margin: 0;
	padding: 12px 0;
	word-wrap: break-word;
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
	-webkit-print-color-adjust: exact;
	background:
		radial-gradient(circle at 20% 25%, rgba(0, 140, 255, 0.25), transparent 45%),
		radial-gradient(circle at 80% 75%, rgba(0, 200, 255, 0.18), transparent 50%),
		radial-gradient(circle at 50% 50%, rgba(0, 100, 200, 0.15), transparent 60%),
		linear-gradient(135deg, #0a1626 0%, #13233a 50%, #0a1626 100%);
	background-attachment: fixed;
	background-size: 150% 150%;
	animation: bgShift 20s ease-in-out infinite alternate;
}

@keyframes bgShift {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

*, *::before, *::after {
	box-sizing: inherit;
}

body.simple {
	min-height: 100vh;
	padding: 0 5px;
}

@media (max-width: 920px) {
	html,
	body {
		background-attachment: scroll;
		background-position: center top;
	}
}

/* ==========================================================
   WRAPPER
========================================================== */

#wrap,
.wrap {
	margin: 0 auto;
	max-width: 1152px;
	padding: 13px 13px 24px;
	min-height: 100vh;
	background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(245,250,255,0.92) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 128, 255, 0.3);
	border-radius: 16px;
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255,255,255,0.8),
		inset 0 -2px 8px rgba(0, 120, 255, 0.08),
		0 0 12px rgba(0, 128, 255, 0.25);
	animation: wrapGlow 3s ease-in-out infinite alternate;
}

@keyframes wrapGlow {
	0% {
		box-shadow:
			0 10px 30px rgba(0, 0, 0, 0.25),
			inset 0 1px 0 rgba(255,255,255,0.8),
			inset 0 -2px 8px rgba(0, 120, 255, 0.08),
			0 0 8px rgba(0, 128, 255, 0.2);
	}
	100% {
		box-shadow:
			0 12px 35px rgba(0, 0, 0, 0.3),
			inset 0 1px 0 rgba(255,255,255,0.9),
			inset 0 -2px 10px rgba(0, 140, 255, 0.12),
			0 0 16px rgba(0, 128, 255, 0.35);
	}
}

/* ==========================================================
   HEADER
========================================================== */

.headerbar {
	margin-bottom: 0 !important;
	padding: 14px 10px !important;
	color: #ffffff !important;
	border-radius: 0 !important;
	background: linear-gradient(135deg, rgba(0,14,36,0.98) 0%, rgba(6,34,64,0.95) 42%, rgba(28,70,120,0.90) 100%);
	box-shadow:
		0 4px 16px rgba(0,0,0,0.45),
		inset 0 0 22px rgba(255,255,255,0.03) !important;
	animation: neonGlow 8s ease-in-out infinite !important;
}

.headerlink-wrap {
	padding-bottom: 6px !important;
	background: linear-gradient(to bottom, rgba(18, 60, 105, 0.92), rgba(22, 72, 122, 0.94)) !important;
	border-radius: 0 !important;
	border-top: 1px solid rgba(255,255,255,0.06);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.02),
		0 3px 10px rgba(0,0,0,0.35) !important;
}

@media (max-width: 699px) {
	.headerbar,
	.headerlink-wrap {
		border-radius: 0 !important;
	}
}

.topic-seo-summary {
	margin: 8px 0 16px;
	padding: 10px 14px;
	border-left: 4px solid #4c6f91;
	background: #f5f7fa;
	color: #4f5f6f;
	font-size: 14px;
	line-height: 1.6;
	border-radius: 6px;
}

/* ==========================================================
   ANIMATIES
========================================================== */

@keyframes neonGlow {
	0%, 100% {
		box-shadow:
			0 4px 16px rgba(0,0,0,0.45),
			inset 0 0 22px rgba(255,255,255,0.03),
			0 0 6px rgba(0,80,180,0.18);
	}
	50% {
		box-shadow:
			0 4px 16px rgba(0,0,0,0.45),
			inset 0 0 22px rgba(255,255,255,0.03),
			0 0 10px rgba(0,120,255,0.28);
	}
}

/* ==========================================================
   DROPDOWN ANIMATIE
========================================================== */

.dropdown {
	opacity: 1;
	transform: scaleY(1);
	transform-origin: top;
	transition-property: opacity, transform, overlay, display;
	transition-duration: 0.4s;
	transition-behavior: allow-discrete;
}

.dropdown-up .dropdown {
	transform-origin: bottom;
}

@starting-style {
	.dropdown {
		opacity: 0;
		transform: scaleY(0);
	}
}

/* ==========================================================
   BREADCRUMBS
========================================================== */

.breadcrumbs .crumb {
	float: left !important;
	font-weight: bold !important;
	background: linear-gradient(to bottom, rgba(235,242,250,0.9), rgba(179,198,218,0.68)) !important;
	border-radius: 8px !important;
	padding: 4px 12px !important;
	margin: 5px 5px 0 0 !important;
	line-height: 1.5 !important;
	overflow: hidden !important;
	word-wrap: normal !important;
}

#tabs a {
	font-size: 12.5px;
}

#tabs .tab > a,
.tabs .tab > a,
#tabs li > a,
.tabs li > a {
	padding: 7px 9px !important;
	font-size: 11px !important;
	line-height: 1.1 !important;
}

/* ==========================================================
   MOBILE FIXES
========================================================== */

@media only screen and (max-width: 920px),
       only screen and (max-device-width: 920px) {
	.breadcrumbs {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		align-items: center;
	}

	.breadcrumbs ul,
	.breadcrumbs ol {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding: 0 !important;
		margin: 0 !important;
		list-style: none !important;
	}

	.breadcrumbs .crumb {
		float: none !important;
		display: inline-flex !important;
		align-items: center;
		max-width: 100%;
		padding: 4px 10px !important;
		margin: 0 !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#tabs a {
		font-size: 12.5px;
	}

	#tabs .tab > a,
	.tabs .tab > a,
	#tabs li > a,
	.tabs li > a {
		padding: 7px 9px !important;
		font-size: 11px !important;
		line-height: 1.1 !important;
	}

	#tabs li.responsive-tab,
	.tabs li.responsive-tab {
		float: left !important;
		margin: 0 !important;
	}

	#tabs li.responsive-tab a,
	.tabs li.responsive-tab a {
		min-width: 44px !important;
		text-align: center !important;
		padding: 7px 12px !important;
	}
}

/* ==========================================================
   PROFIEL HEADER
========================================================== */

.header-profile {
	display: inline-grid;
	grid-auto-flow: column;
	align-items: center;
	background: linear-gradient(145deg, #dbe4ee, #c8d4e3);
	border: 0.75px solid rgba(0, 0, 0, 0.08);
	border-radius: 7px;
	padding: 0 5px !important;
	box-shadow:
		inset 0 0 0 0.5px rgba(255,255,255,0.45),
		0 1px 1px rgba(0,0,0,0.08);
	cursor: pointer;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.header-profile > * {
	align-self: center;
}

.header-profile:hover {
	background: linear-gradient(145deg, #e4edf7, #d3dfec);
	box-shadow:
		inset 0 0 0 0.5px rgba(255,255,255,0.65),
		0 2px 2px rgba(0,0,0,0.12);
}

/* ==========================================================
   BUTTONS
========================================================== */

.button {
	display: inline-block;
	padding: 3px 8px;
	font-size: 13px;
	font-weight: 600;
	font-family: "Open Sans", "Segoe UI", Roboto, sans-serif;
	color: #254a73;
	background: linear-gradient(180deg, #e0ebf5 0%, #cddfee 100%);
	border: 1px solid rgba(37,74,115,0.3);
	border-radius: 4px;
	cursor: pointer;
	user-select: none;
	text-align: center;
	box-shadow:
		0 1px 0 rgba(255,255,255,0.6) inset,
		0 1px 2px rgba(0,0,0,0.08);
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.button:hover {
	background: linear-gradient(180deg, #d6e5f2 0%, #c0d6ea 100%);
	border-color: rgba(37,74,115,0.45);
	color: #1b3654;
	box-shadow:
		0 0 0 3px rgba(74,144,217,0.15),
		0 2px 6px rgba(0,0,0,0.12);
}

.button:active {
	background: linear-gradient(180deg, #bdd3e7 0%, #adc6de 100%);
	border-color: rgba(37,74,115,0.55);
	color: #162c44;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

a.button1,
input.button1,
a.button2,
input.button2,
input.button3 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	padding: 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: #ffffff !important;
	background: linear-gradient(135deg, #4E7EAF 0%, #2B507A 100%);
	border: 1px solid #2B507A;
	border-radius: 4px;
	box-shadow:
		0 1px 4px rgba(46,90,136,0.2),
		inset 0 1px 1px rgba(255,255,255,0.15);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.1s ease;
}

a.button1:hover,
input.button1:hover,
a.button2:hover,
input.button2:hover,
input.button3:hover {
	background: linear-gradient(135deg, #5B8EBF 0%, #366390 100%);
	box-shadow:
		0 2px 6px rgba(46,90,136,0.25),
		inset 0 1px 2px rgba(255,255,255,0.2);
}

a.button1:active,
input.button1:active,
a.button2:active,
input.button2:active,
input.button3:active {
	background: linear-gradient(135deg, #3D6C9C 0%, #24456C 100%);
	transform: translateY(1px);
	box-shadow:
		inset 0 2px 4px rgba(0,0,0,0.15),
		0 1px 2px rgba(46,90,136,0.2);
}

/* ==========================================================
   INPUTS
========================================================== */

.inputbox {
	background-color: #f8f9fa;
	--angle: 0deg;
	border: 1px solid;
	border-image: conic-gradient(from var(--angle), #ff0000, #067506, #f0f00a, #b67a0b, #d45c91, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) 1;
	animation: rotate 3s linear infinite;
}

@keyframes rotate {
	to { --angle: 360deg; }
}

.search-header {
	box-shadow: 0 0 10px #505C65;
}

/* ==========================================================
   FORUM ELEMENTEN
========================================================== */

.navbar {
	background-color: #DCDEE2;
}

.forabg,
.forumbg {
	background-color: #444444;
	background-image: linear-gradient(to bottom, #333333 0%, #444444 4%, #333333 10%, #444444 29%, #505C65 38%, #505C65 100%);
	background-repeat: repeat-x;
}

li.row,
li.row:hover,
li.row.bg3,
li.row.bg3:hover {
	background-color: #dddddd;
}

.post {
	position: relative;
	padding: 5px 10px;
	margin-bottom: 7px;
	background-repeat: no-repeat;
	background-position: 100% 0;
	border: 3px solid #DCDEE2;
	border-radius: 7px;
}

/* ==========================================================
   JUMPBOX
========================================================== */

.jumpbox-cat-link {
	color: #ffffff;
	background-color: #505C65;
	background-image: linear-gradient(to bottom, #333333 0%, #444444 4%, #76828B 10%, #444444 29%, #505C65 38%, #505C65 100%);
	background-repeat: repeat-x;
}

.jumpbox-sub-link {
	background-color: #E8ECEE;
}

/* ==========================================================
   CODEBLOCKS
========================================================== */

.codebox {
	background-color: #ecf5ff;
	border-color: #9eafba;
}

.codebox p {
	border-bottom-color: #bfcbd2;
}

.codebox code {
	display: block;
	overflow: auto;
	max-height: 200px;
	padding: 12px 5px;
	font: 0.9em Monaco, "Andale Mono", "Courier New", Courier, monospace;
	line-height: 1.3em;
	color: #00350e;
}

/* ==========================================================
   COPYRIGHT BLOK
========================================================== */

.copyright {
	position: relative;
	overflow: hidden;
	max-width: 1100px;
	margin: 1em auto 0.5em;
	padding: 1.5em 2em;
	color: #e6f0ff;
	text-align: center;
	font-family: "Inter", sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;
	letter-spacing: 0.3px;
	background: linear-gradient(180deg, rgba(15, 30, 60, 0.88) 0%, rgba(10, 20, 40, 0.94) 100%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(0, 128, 255, 0.3);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 12px rgba(0,128,255,0.18);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.copyright::before {
	content: "";
	position: absolute;
	top: 0;
	left: 20%;
	right: 20%;
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(180,220,255,0.7), transparent);
	opacity: 0.7;
}

.copyright::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 50% 0%, rgba(0,128,255,0.1), transparent 65%);
	opacity: 0.6;
}

.copyright:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 18px rgba(0,128,255,0.35);
	border-color: rgba(0,128,255,0.5);
}

.copyright a {
	color: #9ec9ff !important;
	text-decoration: none;
	font-weight: 500;
	text-shadow: 0 0 4px rgba(138,180,255,0.25);
	transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease;
}

.copyright a:hover {
	color: #ffffff !important;
	text-shadow: 0 0 6px rgba(138,180,255,0.6), 0 0 12px rgba(0,128,255,0.4);
	transform: translateY(-1px);
}

.copyright br {
	line-height: 2.2;
}

/* ==========================================================
   ICONS
========================================================== */

.contact-icon {
	background: none;
}

.contact-icon::before {
	font-family: FontAwesome;
	font-weight: normal;
	font-size: 16px;
	line-height: 1;
	display: inline-block;
	width: 1.2em;
	text-align: center;
}

.pm-icon:before { content: '\f003'; }
.email-icon:before { content: '\f0e0'; }
.jabber-icon:before { content: '\f086'; }
.phpbb_icq-icon:before { content: '\f086'; }
.phpbb_wlm-icon:before { content: '\f17a'; }
.phpbb_aol-icon:before { content: '\f19a'; }
.phpbb_website-icon:before { content: '\f0ac'; }
.phpbb_youtube-icon:before { content: '\f167'; }
.phpbb_facebook-icon:before { content: '\f09a'; }
.phpbb_skype-icon:before { content: '\f17e'; }
.phpbb_twitter-icon:before { content: '\f099'; }
.phpbb_yahoo-icon:before { content: '\f19e'; }
.phpbb_github-icon:before { content: '\f09b'; }

/* ==========================================================
   SPECIAL STATUS KLEUREN
========================================================== */

.sticky-steve { background-color: #0074ac !important; background-image: none !important; }
.announce-steve { background-color: #008080 !important; background-image: none !important; }
.global-steve { background-color: #a80000 !important; background-image: none !important; }

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 768px) {
	.copyright {
		font-size: 1rem;
		padding: 1.2em 1.5em;
	}
}

@media (max-width: 480px) {
	.copyright {
		font-size: 0.95rem;
		padding: 1em;
		border-radius: 10px;
	}
}

@media only screen and (max-width: 920px),
       only screen and (max-device-width: 920px) {
	html,
	body {
		background-color: #444444;
	}

	body {
		padding-left: 5px;
		padding-right: 3px;
	}

	#wrap {
		width: auto;
	}
}

@media only screen and (max-width: 860px),
       only screen and (max-device-width: 860px) {
	#wrap {
		width: auto;
	}
}