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

}