/*  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;

	-webkit-print-color-adjust: exact;

	background-color: #424251;
	background: url("https://www.phpbbextnl.be/images/Background.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	       -moz-background-size: cover;
	         -o-background-size: cover;
	            background-size: cover;
}

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


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

.wrap {
	margin: 0 auto;
	max-width: 1152px;
	padding: 13px;

	background: linear-gradient(180deg, #f4f8fa 0%, #e9f0f3 100%);
	border: 2px solid #0080ff;
	border-radius: 15px;

	box-shadow:
		0 0 8px #0080ff,
		0 0 16px #3399ff,
		inset 0 3px 18px rgba(100, 100, 100, 0.25);

	animation: neonPulseFlow 2s ease-in-out infinite alternate;
}


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

.site_logo {
	background-image: url("./images/site_logo.png") !important;
}

.headerbar {
	height: auto !important;
	padding: 12px 5px;
	cursor: pointer;
	color: #ffffff;

	border-radius: 6px;

	background:
		linear-gradient(90deg, rgba(2,31,74,0.95) 0%, rgba(18,62,97,0.9) 53%, rgba(66,110,167,0.85) 100%),
		url("./images/headerbarbackground.png");
	background-position: right center !important;
	background-repeat: no-repeat !important;
	background-blend-mode: multiply !important;

	box-shadow:
		0 2px 6px rgba(0,0,0,0.25),
		0 0 8px #0080ff;

	transition:
		background-color 0.3s ease,
		transform 0.2s ease,
		box-shadow 0.3s ease;

	animation: neonPulseFlow 2s ease-in-out infinite alternate;
}

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

@keyframes neonPulseFlow {
	0% {
		box-shadow: 0 0 6px #0080ff, 0 0 12px #3399ff, inset 0 3px 18px rgba(100,100,100,0.25);
	}
	25% {
		box-shadow: 0 0 9px #3399ff, 0 0 15px #66b3ff, inset 0 3px 18px rgba(100,100,100,0.25);
	}
	50% {
		box-shadow: 0 0 12px #66b3ff, 0 0 20px #3399ff, inset 0 3px 18px rgba(100,100,100,0.25);
	}
	75% {
		box-shadow: 0 0 9px #3399ff, 0 0 15px #66b3ff, inset 0 3px 18px rgba(100,100,100,0.25);
	}
	100% {
		box-shadow: 0 0 6px #0080ff, 0 0 12px #3399ff, inset 0 3px 18px rgba(100,100,100,0.25);
	}
}

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

@property --angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}


/* ==========================================================
   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;
}


/* ==========================================================
   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: 0px 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;
}

/* Zorgt ervoor dat pijl/tekst exact in het midden zit */
.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: #2E5A88;
	background: linear-gradient(180deg, #EAF1F7 0%, #D9E7F3 100%);

	border: 1px solid rgba(46,90,136,0.25);
	border-radius: 4px;

	cursor: pointer;
	user-select: none;
	text-align: center;

	transition:
		background 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease;
}

.button:hover {
	background: linear-gradient(180deg, #E1ECF4 0%, #CCDDEE 100%);
	border-color: rgba(46,90,136,0.4);
	color: #1F3E61;
}

.button:active {
	background: linear-gradient(180deg, #C7DAEC 0%, #BBD0E4 100%);
	border-color: rgba(46,90,136,0.5);
	color: #1F3E61;

	box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}


/* Grote phpBB knoppen */

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;
}

.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 {
	max-width: 1100px;
	margin: 1em auto 0.5em;
	padding: 1.5em 2em;

	color: #ffffff;
	text-align: center;
	font-family: "Inter", sans-serif;
	font-size: 1.1rem;
	line-height: 1.6;
	letter-spacing: 0.3px;

	background:
		linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
		url("https://www.phpbbextnl.be/images/copyrightimage.jpg") center / cover no-repeat fixed;

	border: 1.5px solid rgba(255,255,255,0.25);
	border-radius: 12px;
	backdrop-filter: blur(3px);

	box-shadow: 0 4px 12px rgba(0,0,0,0.3);

	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease,
		border-color 0.3s ease;
}

.copyright:hover {
	transform: scale(1.02);
	box-shadow: 0 6px 16px rgba(0,0,0,0.5);
	border-color: rgba(255,255,255,0.5);
}

.copyright a {
	color: #ffff68 !important;
}


/* ==========================================================
   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;
	}
}