@import "cols.css";


body {

	margin: 0 !important;
	padding: 0 !important;
}

body > * {

	position: relative;
	z-index: 100;
}

/* ------------------------------------------ HEADER ------------------------------------------ */


body > header {

	margin-top: 0;
	padding-top: 0;
	
	overflow: hidden;
}


body > header {

	text-align: center;
	
	margin-left: auto;
	margin-right: auto;
}

body > header a .sitename {
	
	display: none;
}


body > header {

	z-index: 200;
}

body > header > :first-child {
	
	z-index: 250;
}

body > header > * {

	margin-left: auto;
	margin-right: auto;
}

body > header > :first-child a:before {
	
	display: block;
}

body > header > :first-child {

	margin-top: 0;
	margin-bottom: 0;
	overflow: hidden;
	line-height: 1rem;
}

body > header > :first-child > * {
	
	display: block;
}

body > header a {
	
	text-decoration: none;
}

body > header .sitedesc {
	
	font-size: 1.5rem;
	line-height: 2.5rem;
	position: relative;
	top: -0.5rem;
}

body > header nav {

	margin-top: 1rem;
	margin-bottom: 1rem;
	
	margin-left: auto;
	margin-right: auto;
	
	overflow: hidden;
}


body > header nav button span {

	display: none;
}
body > header nav ul {
	
	list-style : none;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	
	padding: 0;
	margin: 0;
}

body > header nav ul li {
	
	margin-left: 0;
	margin-right: 0;
}

body > header nav ul li a {

	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 2rem;
}

body > header #banner {

	width: 100%;
}
	
body > header > :first-child a:before {

	content: url("banner-330w.png");
}

body > header img, 
body > header nav {

	width: 100%;
}






/* ------------------------------------------ FOOTER ------------------------------------------ */



footer {

	text-align: center;
	overflow: hidden;
	
	padding-top: 10rem;
	padding-bottom: 1rem;
}

footer nav {
	
	display: none;
}

#serverlist {
	
	margin-top: 4rem;
	
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#serverlist > * {

	margin-left: 1rem;
	margin-right: 1rem;
}

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


main {

	margin-top: 0;
	margin-bottom: 2rem;
}

main h1 {
	
	font-size: 2.5rem;
	text-align: center;
}


main h2 {
	
	font-size: 1.66rem;
}

main h3 {
	
	font-size: 1.33rem;
	margin-top: 0.75rem;
	margin-bottom: 0.25rem;
}

article {
	
	box-sizing: border-box;

	border-top-width: 0.5rem;
	border-bottom-width: 0.5rem;

	margin-top: 3rem;
	
	padding-left: 0;	
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 2rem;
		
	margin-left: auto;
	margin-right: auto;
	
	overflow: hidden;
}

article h1 {
	
	overflow: hidden;
	padding-top: 0.5rem;
	padding-bottom: 1rem;
}

article h1 span {
	
	display: block;
}

article > :first-child, 
article > :first-child :first-child {

	margin-top: 0;
}

article > :not(:first-child) {
	
	margin-left: 1rem;
	margin-right: 1rem;
}

body.install article section {
	
	margin-top: 3rem;
	margin-bottom: 3rem;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

article img {
	
	max-width: 100%;
	height: auto;
}

/*
article table.keymapping tr > td:first-of-type {
	
	text-align: right;
}
*/


article table {

	margin-left: auto;
	margin-right: auto;
}

article table td, 
article table th {
	
	border-width: 0.125rem;
	padding: 0.5rem;
}

.adresse, .politesse {
	
	text-align: center;
}

.signature {
	
	text-align: right;
}



/* ------------------------------------------ GALLERIES ------------------------------------------ */

.gallery {
	
	display: grid;
	grid-column-gap: 1rem;
	grid-row-gap: 1rem;
	overflow: hidden;
}

.gallery > * {

	margin: 0;
}

.gallery figcaption {
	
	text-align: center;
	font-style: italic;
}

@media (min-width: 56rem) {

	.gallery_2_1 > :nth-child(2n + 1) {
		
		grid-column: 1;
	}

	.gallery_2_1 > :nth-child(2n + 2) {
		
		grid-column: 2;
	}
}

@media (min-width: 42.25rem) {

	.gallery_3_2_1 > :nth-child(2n + 1) {
		
		grid-column: 1;
	}

	.gallery_3_2_1 > :nth-child(2n + 2) {
		
		grid-column: 2;
	}
}

@media (min-width: 56rem) {

	.gallery_3_2_1 > :nth-child(3n + 1) {
		
		grid-column: 1;
	}

	.gallery_3_2_1 > :nth-child(3n + 2) {
		
		grid-column: 2;
	}

	.gallery_3_2_1 > :nth-child(3n + 3) {
		
		grid-column: 3;
	}
}

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


	
address.server {

	padding-bottom: 0.125rem;
	display: flex;
	justify-content: center;
}

address.server > * {

	border-width: 0.125rem;

	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

address.server dfn {

	border-top-left-radius: 0.25rem;
	border-bottom-left-radius: 0.25rem;
}

address.server span:last-of-type {

	border-top-right-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;

	border-right-width: 0.0627rem;
}

address.server .server-port {

	border-left-width: 0.0627rem;
}

/*
address.server span:last-of-type:before {
	
	content: " : ";
}
*/


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


.warn {

	padding: 1rem;
	border-radius: 0.25rem;
}

kdb, .mono {

	border-width: 0.125rem;
	border-radius: 0.25rem;
	padding: 0.125rem 0.5rem;
}


.pubkey-and-copy-button {
	
	display: flex;
}

.pubkey-and-copy-button input {

	flex-grow: 1;
	
	border-width: 0.125rem;
	border-style: solid;
	padding: 0.5rem;
}

.pubkey-and-copy-button button {

	border: 0;
	padding: 0.5rem;
}

/* ------------------------------------------ RESPONSIVE ------------------------------------------ */

body > header nav button {
	
	display: none;
}

@media screen and (max-width: 35.374rem) {

	body > header nav {
	
		position: fixed;
		top: 0; 
		left: 0;
		
		z-index: 300;
		margin: 0;
		
		background-color: transparent;
		transition-duration: 0.5s;
		transition-property: background-color;
		transition-timing-function: ease-out;
	}
	
	body > header nav button {
		
		position: fixed;
		top: 0; 
		left: 0;
		z-index: 300;
		
		width: 2rem;
		height: 2rem;
		
		display: block;
		border: 0;
		
		padding: 0;
		margin: 1rem 0 0 1rem;
	}

	body > header nav button:after {

		content: "";
		display: block;
		width: 100%;
		height: 100%;
		
		position: relative;
		top: 0; 
		left: 0;
		z-index: 300;
		
		margin: 0;
		border: 0;
	}
	
	body > header nav ul {
		
		position: fixed;
		top: 4rem; 
		left: 0;
		
		z-index: 150;
		
		height: 0;
		opacity: 0;
		display: block;
		
		overflow: hidden;
		
		transition-duration: 1s;
		transition-property: opacity;
		transition-timing-function: ease-out;
	}
	

}



article {
	
	border-left-width: 0;
	border-right-width: 0;
}

@media screen and (min-width: 28.5rem) {

	body > header > *, 
	article {
	
		border-left-width: 0.5rem;
		border-right-width: 0.5rem;
	
		max-width: calc(4 * (var(--col-width) + var(--col-gap)));
	}
}

@media screen and (min-width: 35.375rem) {

	body > header > *, 
	article {
	
		max-width: calc(5 * (var(--col-width) + var(--col-gap)));
	}
	
	body > header > :first-child a:before {

		content: url("banner-550w.png");
	}

}
@media screen and (min-width: 42.25rem) {

	body > header > *, 
	article {
	
		max-width: calc(6 * (var(--col-width) + var(--col-gap)));
	}

}

@media screen and (min-width: 56rem) {

	body > header > *, 
	article {
	
		max-width: calc(8 * (var(--col-width) + var(--col-gap)));
	}
	
	body > header > :first-child a:before {

		content: url("banner-660w.png");
	}
	
	body > header .sitedesc {

		font-size: 1.75rem;
	}

	body > header nav {
	
		max-width: calc(6 * (var(--col-width) + var(--col-gap)));
	}
}

@media screen and (min-width: 83.5rem) {
	
	body > header > *, 
	article {
	
		max-width: calc(9 * (var(--col-width) + var(--col-gap)));
	}
	
	body > header > :first-child a:before {

		content: url("banner-770w.png");
	}
	
		
	body > header .sitedesc {

		font-size: 2rem;
	}

	body > header nav {
	
		max-width: calc(7 * (var(--col-width) + var(--col-gap)));
	}
}