:root {

	--marron: hsl(25.5, 67.8%, 40.2%);
	--marron-fonce: hsl(25.5, 67.8%, 20.1%);
	--nuage-1: hsl(60, 100%, 97.6%);
	--nuage-2: hsl(48, 20%, 80.4%);
	--bleu-ciel: hsl(215.3, 91.1%, 78%);
	--orange: #ff4000;
	--rouge: rgb(255, 110, 110);
}

@font-face {

	font-family: Cantarell;
	src: url("/fonts/Cantarell-Regular.otf") format("opentype");
}

@font-face {

	font-family: SourceCodePro;
	src: url("/fonts/SourceCodePro-Regular.otf") format("opentype");
}

html, body {
	
	font-family: Cantarell, "Liberation Sans", Helvetica, Arial;
}

.sr-only {
	
	display: none !important;
}


body > header nav button {
	
	background-color: transparent;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;

}
	
body > header nav button:after {

	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-position: center center;
	background-size: cover;
}

header nav ul li a {
	
	text-decoration: none;
}

header .sitedesc {
	
	font-weight: bold;
}

footer [role="contentinfo"] {

	opacity: 0.666;
}



/* ------------------------------------------ CONTENTS ------------------------------------------ */



article {

	border-style: solid;
	border-color: var(--marron-fonce);
	background-image: 
		linear-gradient(hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0.5) 100%), 
		url("sprites/default_pine_wood.png");
	background-size: cover, 2rem;
	background-position-y: 0, -0.75rem;
	color: black;
}

body.guide article {

	border-color: transparent;
	background-image:
		linear-gradient(hsla(0, 0%, 100%, 0.6) 0%, hsla(0, 0%, 100%, 0.61) 100%), 
		url("sprites/default_gravel.png");
	background-size: cover, 25.5rem;
}


article h1 {

	background: var(--marron-fonce);
	color: white;
}

body.guide article h1 {

	background: #222;
	color: white;
}



a, a:visited {
	
	color: blue;
}


#successMsg {
	
	opacity: 0;
}

code {

	background-color: black;
	color: white;
	padding: 0.25rem 0.5rem;
}

/* ------------------------------------------ TABLEAUX ------------------------------------------ */


table {
	
	border-collapse: collapse;
}

table thead {
	
	background: black;
	color: white;
}

tbody > tr:nth-of-type(odd) {
	
	background-color: #ededed;
}

tbody > tr:nth-of-type(even) {
	
	background-color: white;
}

table td, 
table th {
	
	border-style: solid;
	border-color: black;
}

table td.nombre,
table th.nombre {
	
	text-align: right;
}



/* ------------------------------------------ SERVEURS ------------------------------------------ */



address, dfn {

	font-style: normal;
}

address.server > * {

	font-family: SourceCodePro, "DroidSans Mono", Cantarell, "Liberation Sans", Helvetica, Arial;

	border-style: solid;
	background-color: var(--orange);
	border-color: var(--orange);
	
	color: white;
}

address.server dfn {

	background-color: white;
	color: black;
}

address.server .server-port {

	border-left-color: white;
}

address.server span:first-of-type {

	border-right-color: white;
}

address.server span:last-of-type {

	border-right-color: var(--orange) !important;
}




/* ------------------------------------------ BOITES ------------------------------------------ */



.warn {

	background-color: var(--rouge);
}

.warn:before {

	content: "⚠ ";
	float: left;
	font-size: 3em;
}

kdb, .mono {

	font-family: SourceCodePro, "DroidSans Mono", Cantarell, "Liberation Sans", Helvetica, Arial;
	
	border-style: solid;
	
	border-color: rgba(200,200,200,0.5);
	background-color: hsl(0, 0%, 98%);
	color: black;
}

.pubkey-and-copy-button input {

	border-color: var(--marron-fonce);
}
	
.pubkey-and-copy-button button {

	background-color: var(--marron-fonce);
	color: white;
	font-weight: bold;
}

q {

	font-style: italic;
}

q:before {
	
	padding-right: 0.25em;
}

q:after {
	
	padding-left: 0.25em;
}