@import url("../../proflat/theme/color_proflat.css");

html {
	--forum-width: 1280px;
	--navbar-line: #88888826;
	--timing: cubic-bezier(0.32, 0.74, 0.57, 1);
	--effect: all .2s cubic-bezier(0.32, 0.74, 0.57, 1);
	--accent: #0e76bc;
	
	--color01: #0e76bc;
	--color02: #4889c5;
	--color03: #1e91fc;
	--color035: #1e91fc80;
	--color04: #ffffff;
	--color05: #FFFFFF;
	--color06: #f5f5f5;
	--color07: #EEEEEE;
	--color08: #e5e5e5;
	--color09: #dddddd;
	--color10: #CCCCCC;
	--color11: #999999;
	--color12: #666666;
	--color125: #66666680;
	--color13: #333333;
	--color14: #222222;
	--color15: #111111;
	--color16: #000000;
	--color17: #d31141;
	--color18: #FF6600;
	--color19: #A9B8C2;
	--color20: #5D8FBD;	
	color-scheme: light;
}

body {
	display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#page-header {
	display: flex;
	flex-direction: column;
}

#page-header .navbar {
	order: 1;
	position: relative;
	background: transparent;
	padding: 0;
}

#page-header .headerbar {
	order: 0;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.logo {
	padding: 0;
}

.navbar-container, .headerbar-container, .footerbar-container {
	max-width: var(--forum-width);
}

.navbar-container .inner, .headerbar-container .inner, .footerbar-container .inner {
	padding: 0 15px;
}

.headerbar {
    background-color: transparent;
    background-image: none;
    color: var(--color01);
	padding-top: 15px;
    padding-bottom: 15px;
}

.site-description h1,
.site-description p {
	color: var(--color01);
	display: none;
}

.site_logo {
    background-image: url(https://techgaming.nl/wp-content/uploads/2022/09/TechGaming-Logo-500x126-kleur.png);
    background-repeat: no-repeat;
	background-size: contain;
	width: 198px;
	height: 50px;
}

#page-header .navbar::before {
	position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 0;
    content: '';
    pointer-events: none;
    border-bottom: 1px solid var(--navbar-line);
}

#page-header .navbar::after {
	position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    content: '';
    pointer-events: none;
    border-bottom: 1px solid var(--navbar-line);
}

#nav-main > li > a,
#nav-main > li > div.header-profile > a {
	position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    height: 40px;
    padding-right: 20px;
    padding-left: 20px;
    white-space: nowrap;
    color: var(--nav-color);
	border-left: 1px solid var(--navbar-line);
}

#nav-main > li {
	margin-right: 0;
	margin-left: 0;
}

#nav-main > li > a > span::before {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 3px;
    content: '';
    -webkit-transition: width 0s var(--timing), background-color .2s var(--timing);
    transition: width 0s var(--timing), background-color .2s var(--timing);
    background-color: transparent;
}

#nav-main > li > a:hover > span::before {
	width: 100%;
    -webkit-transition: width .2s var(--timing);
    transition: width .2s var(--timing);
    background-color: var(--accent);
}

#nav-main > li > div.header-profile > a {
	gap: 10px;
}

#wrap {
	min-width: min(100%, var(--forum-width));
	max-width: var(--forum-width);
	flex-grow: 1;
	padding: 15px;
	box-sizing: border-box;
}

li.row strong {
	font-weight: bold;
}