/* Modifications perso */

:root {
	--background-image: url("./images/background.jpg");
	--headerbar-image: url("./images/banner.png");
	--logo-image: url("./images/logo.jpg");
}

.damaio {
	--headerbar-image: none;
	--background-image: none;
}

.prosilver_ne {
	--background-image: url("./images/background2.jpg");
	--headerbar-image: url("./images/background2.jpg");
}

.prosilver_fr {
	--headerbar-image: none;

	& .icon.online {
		display: none
	}

	@media (min-width: 700px) {
	& .post .postprofile dd,
	& .post .postprofile dt {
		margin-inline: 5px;
	}

	& .postprofile dd:not(.profile-rank) {
		border: 1px solid rgba(64, 64, 64, .2);
		padding: 3px;
		margin-top: 2px;
		border-radius: 5px;
	  }
	}
}

/* Image de fond
---------------------------------------------------------------------------- */
html,
body {
	background-size: cover;
	background-image: var(--background-image);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* headerbar
---------------------------------------------------------------------------- */
.headerbar {
	background-image: var(--headerbar-image);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}

/* Logo
---------------------------------------------------------------------------- */
.site_logo {
	background-image: var(--logo-image);
	--logo-width: 170px;
	--logo-height: 126px;
	width: var(--logo-width);
	height: var(--logo-height);
	background-size: contain;

}

/* Centrage du logo */
.site-description {
	float: none;
	text-align: center;
	width: auto;
}

.logo {
	float: none;
}

.site-description h1 {
	position: absolute;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
}

.site-description p {
	margin: 0 0 1em;
}

.search-header {
	margin-top: -80px;
}

@media (max-width: 700px) {
	.logo {
		display: initial;
	}

	.site_logo {
		--ratio: 2;
		width: calc(var(--logo-width) / var(--ratio));
		height: calc(var(--logo-height) / var(--ratio));
	}

	.site-description h1 {
		display: none;
	}

}

#nPerfSpeedTest {
	display: initial !important;
	max-width: 600px;
	width: 100%;
	aspect-ratio: 3/2;
}

.postprofile {
	--diode-color: red;
}

.online .postprofile {
	--diode-color: #32d800;
}

.postprofile [class^="username"]::after {
	content: '';
	display: inline-block;
	background-color: var(--diode-color);
	width: 1em;
	height: 1em;
	border-radius: 50%;
	margin-left: 0.5em;
	vertical-align: bottom;
}

@media (prefers-reduced-motion: no-preference) {
	.online .postprofile [class^="username"]::after {
		animation: clignote 1.3s infinite;
	}
}

@keyframes clignote {
	0% {
		opacity: 0.1;
	}

	50% {
		opacity: 1;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
	}

	100% {
		opacity: 0.1;
	}
}

.online {
    background-image: none;
}

<meta property="og:image" content="https://www.bel-com.be/images/divers/belcom.jpg" />
<meta property="og:image:secure_url" content="https://www.bel-com.be/images/divers/belcom.jpg" />
<meta property="og:image:type" content="/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

}

/* Forum icons & Topic icons */
.global_read						{ background-image: url("./images/announce_read.svg"); }
.global_read_mine					{ background-image: url("./images/announce_read_mine.svg"); }
.global_read_locked					{ background-image: url("./images/announce_read_locked.svg"); }
.global_read_locked_mine			{ background-image: url("./images/announce_read_locked_mine.svg"); }
.global_unread						{ background-image: url("./images/announce_unread.svg"); }
.global_unread_mine					{ background-image: url("./images/announce_unread_mine.svg"); }
.global_unread_locked				{ background-image: url("./images/announce_unread_locked.svg"); }
.global_unread_locked_mine			{ background-image: url("./images/announce_unread_locked_mine.svg"); }

.announce_read						{ background-image: url("./images/announce_read.svg"); }
.announce_read_mine					{ background-image: url("./images/announce_read_mine.svg"); }
.announce_read_locked				{ background-image: url("./images/announce_read_locked.svg"); }
.announce_read_locked_mine			{ background-image: url("./images/announce_read_locked_mine.svg"); }
.announce_unread					{ background-image: url("./images/announce_unread.svg"); }
.announce_unread_mine				{ background-image: url("./images/announce_unread_mine.svg"); }
.announce_unread_locked				{ background-image: url("./images/announce_unread_locked.svg"); }
.announce_unread_locked_mine		{ background-image: url("./images/announce_unread_locked_mine.svg"); }

.forum_link							{ background-image: url("./images/forum_link.svg"); }
.forum_read							{ background-image: url("./images/forum_read.svg"); }
.forum_read_locked					{ background-image: url("./images/forum_read_locked.svg"); }
.forum_read_subforum				{ background-image: url("./images/forum_read_subforum.svg"); }
.forum_unread						{ background-image: url("./images/forum_unread.svg"); }
.forum_unread_locked				{ background-image: url("./images/forum_unread_locked.svg"); }
.forum_unread_subforum				{ background-image: url("./images/forum_unread_subforum.svg"); }

.sticky_read						{ background-image: url("./images/sticky_read.svg"); }
.sticky_read_mine					{ background-image: url("./images/sticky_read_mine.svg"); }
.sticky_read_locked					{ background-image: url("./images/sticky_read_locked.svg"); }
.sticky_read_locked_mine			{ background-image: url("./images/sticky_read_locked_mine.svg"); }
.sticky_unread						{ background-image: url("./images/sticky_unread.svg"); }
.sticky_unread_mine					{ background-image: url("./images/sticky_unread_mine.svg"); }
.sticky_unread_locked				{ background-image: url("./images/sticky_unread_locked.svg"); }
.sticky_unread_locked_mine			{ background-image: url("./images/sticky_unread_locked_mine.svg"); }

.topic_moved						{ background-image: url("./images/topic_moved.svg"); }
.pm_read,
.topic_read							{ background-image: url("./images/topic_read.svg"); }
.topic_read_mine					{ background-image: url("./images/topic_read_mine.svg"); }
.topic_read_hot						{ background-image: url("./images/topic_read_hot.svg"); }
.topic_read_hot_mine				{ background-image: url("./images/topic_read_hot_mine.svg"); }
.topic_read_locked					{ background-image: url("./images/topic_read_locked.svg"); }
.topic_read_locked_mine				{ background-image: url("./images/topic_read_locked_mine.svg"); }
.pm_unread,
.topic_unread						{ background-image: url("./images/topic_unread.svg"); }
.topic_unread_mine					{ background-image: url("./images/topic_unread_mine.svg"); }
.topic_unread_hot					{ background-image: url("./images/topic_unread_hot.svg"); }
.topic_unread_hot_mine				{ background-image: url("./images/topic_unread_hot_mine.svg"); }
.topic_unread_locked				{ background-image: url("./images/topic_unread_locked.svg"); }
.topic_unread_locked_mine			{ background-image: url("./images/topic_unread_locked_mine.svg"); }

}

/*  Animated notifications */
@import url("custom.css");
.badge {
    background-color: #d6160f;
    color: #eee!important;
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;

}


/* Animated notifications */
.badge {
    background-color: #d6160f;
    color: #eee !important;

    animation: blinker 1s ease-in-out infinite alternate;
}

@keyframes blinker {
    from { opacity: 1; }
    to { opacity: 0.3; }
}