:root{
	--page-color:#ccf;
	--page-background:#001;
    --header-height:40px;
    --header-color:#inherit;
    --header-background:none;
    --footer-height:24px;
    --navbar-height:40px;
    --navbar-dropdown-width:256px;
    --navbar-dropdown-color:var(--page-color, inherit);
    --navbar-dropdown-background:var(--page-background, inherit);
}
html, body {
    margin:0;padding:0;
    color:var(--page-color, #fff);background:var(--page-background, #000);
    font-family:monospace;
    font-size:16px;
}
html {box-sizing:border-box;}
*, *:before, *:after {box-sizing: inherit;}
a {color:inherit;}
header {
	font-size:24px;
    color:var(--header-color, #000);background:var(--header-background, #aaa);
    height:var(--header-height, 40px);
    border-bottom:dotted 1px;
}
nav.navbar {height:var(--navbar-height);overflow:hidden;display:flex;justify-content:space-between;}
nav.navbar > div {min-width:var(--navbar-height);}
nav.navbar > div:first-of-type {text-align:left;padding:4px;}
nav.navbar > div:nth-of-type(2) {flex-grow:1;}
nav.navbar > div:nth-of-type(2) svg {width:auto;height:auto;border:solid 2px;}
nav.navbar > div:nth-of-type(2) a {display:inline-block;width:100%;height:100%;}
nav.navbar > div:last-of-type {text-align:right;}

nav.navbar span.unicode-icon {display:inline-block;--border:dotted 1px;width:40px;height:40px;text-align:center;font-weight:bold;font-size:40px;line-height:100%;}
nav.navbar span.icon-u-normal {margin-right:1em;line-height:100%;font-size:20px;}
nav.navbar span.icon-u-normal2 {display:inline-block;width:24px;height:24px;overflow:hidden;margin-right:1em;text-align:center;line-height:100%;font-size:18px;
	position:relative;top:4px;
	-color:#000;background:navy;
	border:solid 1px;border-radius:50%;}
nav.navbar spa.icon-u-normal:after {content: " ";}

nav.navbar a {color:inherit;text-decoration:none;}
nav.navbar a.navbar-button {display:inline-block;width:var(--navbar-height);height:var(--navbar-height);overflow:hidden;}
nav.navbar svg {width:100%;var(--navbar-height);height:100%;var(--navbar-height);}
nav.navbar > div {display:flex;}
nav.navbar > div:first-of-type {-text-align:left;}
nav.navbar > div:nth-of-type(2) {flex-grow:1;}
nav.navbar > div:nth-of-type(2) svg {width:auto;height:auto;border:solid 2px;}
nav.navbar > div:nth-of-type(2) a {display:inline-block;width:100%;height:100%;}
nav.navbar > div:last-of-type {}
nav.navbar ul, nav.navbar li {list-style:none;display:inline-block;margin:0;padding:0;}
nav.navbar .navbar-dropdown {display:none;position:fixed;right:0;top:var(--navbar-height);width:100%;bottom:0;z-index:1001;overflow:hidden;
	text-align:left;font-size:16px;border-left:solid 1px;}
nav.navbar .navbar-dropdown {color:var(--navbar-dropdown-color, #000);background:var(--navbar-dropdown-background, #aaa);}
nav.navbar .navbar-dropdown.open {display:block;}
nav.navbar .navbar-dropdown li {display:block;height:var(--navbar-height);line-height:var(--navbar-height);padding-left:8px;}
nav.navbar .navbar-dropdown li:hover {background-color:var(--color);color:var(--color-background);}
nav.navbar .navbar-dropdown li a {text-decoration:none;display:inline-block;width:100%;height:100%;}
nav.navbar .navbar-dropdown li a svg {margin-right:8px;width:auto;height:auto;}
@media screen and (min-width:800px) {
    nav.navbar .navbar-dropdown {width:var(--navbar-dropdown-width);}
}


header > div {}
header dl  {margin:0;}
footer {
	position:fixed;left:0;bottom:0;width:100%;height:var(--footer-height, 40px);z-index:1000;text-align:left;font-size:small;}
footer nav a {margin:4px;}
footer nav a:not(:last-child):after {content:" |";}
main {max-width:768px;margin:auto;}
section {margin:25px;}
ection {
    margin-top:128px;
}
section.apropos-hebergeur {margin-top:64px;font-size:medium;text-align:right;}
section.debug {margin-top:128px;font-size:medium;border:dotted 1px;}
div.decompte {margin:64px auto;padding:16px;text-align:center;color:var(--page-background);background:var(--page-color);}


/*******************************************************************************
 * 
 *******************************************************************************/

article {
	display:inline-block;width:360px; vertical-align:top;
	background:#202020;
	margin:16px;padding:8px;
}
article div.title {text-align:center;}
article div.author {text-align:right;}
article div.body {white-space:pre;}


/*******************************************************************************
 * 
 *******************************************************************************/

	div.domains {text-align:center;}
	a.domain {margin:32px;
		display:inline-block;width:320px;height:40px;overflow:hidden;vertical-align:top;
		font-size:1.8em;-text-transform:uppercase;text-align:center;text-decoration:none;background:gray;
		-font-family:monospace;
	}

/*******************************************************************************
 * 
 *******************************************************************************/

@keyframes rotating {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}


div.plan {
	margin:64px;padding:16px;
	position:relative;
	display:inline-block;
	width:256px;height:256px;overflow:auto;
	background:#dda;color:#000;
}



div.plan:nth-child(1) {transform:rotate3d(1, -1, -2 ,10deg);border:solid 3px;}
div.plan:nth-child(2) {transform:rotate3d(1, 3, -2 , 320deg) translate(5px, -5px);}
div.plan:nth-child(3) {transform:rotate3d(1, 0, -2 ,10deg);}

div.plan:hover {
	animation: rotating 0.24s linear infinite,  rotating22 5s linear infinite;
}