@charset "UTF-8";

/** specific cpu  */
@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
	url('/themes/cpu26/fonts/RobotoCondensed-Regular.woff2') format('woff2'),
	url('/themes/cpu26/fonts/RobotoCondensed-Regular.ttf') format('truetype');
	font-display : fallback;
}
@font-face {
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 700;
	src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
	url('/themes/cpu26/fonts/RobotoCondensed-Bold.woff2') format('woff2'),
	url('/themes/cpu26/fonts/RobotoCondensed-Bold.ttf') format('truetype');
	font-display : fallback;
}
@font-face {
	font-family: 'Roboto Condensed';
	font-style: italic;                                            
	font-weight: 400;                                              
	src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'),
	url('/themes/cpu26/fonts/RobotoCondensed-Italic.woff2') format('woff2'),
	url('/themes/cpu26/fonts/RobotoCondensed-Italic.ttf') format('truetype');
	font-display : fallback;
}

@font-face {
	font-family: 'Roboto Condensed';
	font-style: italic;
	font-weight: 700;
	src: local('Roboto Condensed Bold Italic'), local('RobotoCondensed-BoldItalic'),
	url('/themes/cpu26/fonts/RobotoCondensed-BoldItalic.woff2') format('woff2'),
	url('/themes/cpu26/fonts/RobotoCondensed-BoldItalic.ttf') format('truetype');
	font-display : fallback;
}

:root {
	color-scheme: dark;
}


body/*:root*/ {
	--fond-bleu : #009EDA;
	--fond-vert : #4BB249;
	--fond-jaune : #F1CB29;
	--fond-orange : #DA6241;
	--fond-rouge: #D12625;

	scroll-margin: 100px;
	color-scheme: light dark;
	--cpu-font-family : "Roboto Condensed", Lato, "Open Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
	--cpu-font-size : 16px; /* should be inverted  */
	--cpu-line-height : 1;
	--background-neutral : #eee;
	--background-sidebar : #ddd;
	--background-item : #ccc;
	--color-neutral : #222;
	--background-img : url('/themes/cpu26/img/background_graphy-light.png');
	--background-main : #fff;
	--background-comment : #eff;
	--link : #00a;
	--link-focus : #00f;
	--link-side : black;
	--background-link-side : #11f0f0;
	--quote : #626262;
	--calque-out : white;
	--illus-width : 200px;
	--h2-factor : 3;
	--h3-factor : 2;

	--cpu-height : 64px;
	--cpu-font-small-size : calc(var(--cpu-font-size) * 0.8);
	--cpu-elapse-width : 160px;
	--cpu-min-padding : 16px;
	--cpu-inner-shadow : inset 0px 5px 10px -5px black;
	--cpu-color-transitions : 0s;
	--cpu-background-transitions : 0s;
	--cpu-background : transparent;
	--cpu-color : var(--link);
	--cpu-playing-background : var(--background-sidebar);
	--cpu-playing-color : var(--link-focus);
	--cpu-focus-background : var(--calque-out);
	--cpu-focus-color : var(--link-focus);
	--cpu-error-background : #a00 ;
	--cpu-error-color : #ff7 ;
	--cpu-popup-background : var(--link-focus);
	--cpu-popup-color : var(--background-sidebar);
	--cpu-cue : var(--link);
	--cpu-timeline-limits : #f00;
}

@media (prefers-color-scheme: dark) {
	body /*:root*/ {
		--color-neutral : #ddd;
		--background-neutral : #111;
		--background-sidebar : #222;
		--background-item : #333;
		--background-img : url('/themes/cpu26/img/background_graphy-dark.png');
		--background-main : #000;
		--background-comment : #122;
		--link : #F1CB29;
		--link-focus : #eee;
		--background-link-side : #ee0f0f;
		--link-side : white;
		--quote : #666;
		--calque-out : black;
	}
}


/* Fallback */
audio[controls] {
	display : block;
	width : 100%;
}



/** --------------------------------------------------
		Start
--------------------------------------------------- */
/* largeur des paddings et border compris dans "width" */
*,
*:after,
*:before {
	box-sizing: border-box; }

html {
	text-size-adjust: 100%;
	margin: 0;
	padding: 0; 
	scroll-behavior:smooth;
}

body {
	margin: 0;
	padding: 0; 
	background: var(--background-neutral) var(--background-img);
	color: var(--color-neutral);
	font-size: var(--cpu-font-size);
	line-height: 1.5;
	font-family: var(--cpu-font-family); 
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cpu-font-family);
	line-height: 1.2;
	text-wrap: balance;
}

a {
	background: transparent;
}

:focus, a:hover {
	outline: var(--link) 2px solid;
}

cpu-audio:focus {
	outline : none;
}

@media (prefers-reduced-motion: no-preference) {
	:focus, a:hover {
		transition: outline-offset .25s ease;
		outline-offset: 5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:focus, a:hover {
		outline-offset: 5px;
	}
}

a:active /*, a:hover */{
	outline: none;
}

a img {
	border: none; 
}

figure, figure iframe, figure img {
	max-width : 100%;
	text-align : center;
}

q, cite {
	font-style: italic;
}

sup, sub {
	font-size: .75em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em; }

sub {
	bottom: -0.25em; }

abbr {
	font-variant: small-caps;
}

abbr[title] {
	border-bottom: 1px dotted;
	cursor: help; }

b, strong {
	font-weight: bold;
	font-size: 0.9375em; }

small {
	font-size: 80%;
}

dfn {
	font-style: italic;
}

hr {
	box-sizing: content-box;
	height: 0;
}

mark {
	background: #ff0;
	color: #000;
}

/*
code, pre, samp {
	font-family: monospace, serif;
	font-size: 1em; }
*/
pre {
	white-space: pre-wrap;
}

fieldset {
	margin: 0;
	padding: 0;
	border: none; }

input, button, select {
	vertical-align: middle; }

button, input, select, textarea {
	font-family: inherit;
	font-size: 100%;
	margin: 0; 
	color : var(--color-neutral);
	background : var(--background-main);
	border: 2px solid var(--color-neutral);
	padding : 2px 4px;
}

button, input {
	line-height: normal;
}

button {
	cursor: pointer;
}

button[disabled] {
	cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
	padding: 0;
	border: none; }

input[type="search"] {
	-webkit-appearance: none;
	appearance: none; 
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

table {
	border-collapse: collapse;
	margin-bottom: 1.5em;
}

td, th {
	padding: 1px;
	vertical-align: top;
	text-align: left;
}

td:first-child, th:first-child {
	empty-cells: hide;
}


/* HTML5 for old browsers */
article, aside, figcaption, figure, footer,
header, hgroup, main, nav, section {
	display: block;
}

details {
	summary {
		cursor : pointer;
		h3 {
			display : inline;
		}
	}
	summary::marker {
		content : "▷ ";
	}
}

details::details-content {
	margin-left : var(--cpu-font-size);
}


details[open] summary::marker {
	content : "▽ ";
}

audio, canvas, video {
	display: inline-block;
}

audio {
	width : 100%;
}

figure {
	margin: 0;
}

[hidden], template {
	display: none;
}

svg:not(:root) {
	overflow: hidden;
}

/* Headings reset */
h1, h2, h3, h4, h5, h6 {
	font-weight : bold; /* for paint before having loaded roboto */
	margin: 0;
}


/* Typographie */

h1 {
	font-size: 3em;
	line-height: 1.2; }

h2 , .verybig {
	font-size : calc(var(--h2-factor) * var(--cpu-font-size));
	line-height: 1.2;
	margin-bottom: 0.5em;
}

h3 , .notsobig {
	font-size : calc(var(--h3-factor) * var(--cpu-font-size));
	margin-top: 0.5714286em;
	margin-bottom: 0.4285714em;
}

h4 {
	font-size: 1.3125em;
	margin-top: 1.1428571em;
	margin-bottom: 0.7619048em;
}

h5 {
	font-size: 1.125em;
	margin-top: 1.5555556em;
}

h6 {
	font-size: 1em;
	margin-bottom: 0;
}

a {
	color: var(--link);
	text-decoration: none;
}


hr {
	border: 0;
	height: 1px;
	background: #333;
	background-image: linear-gradient(left, #dcdcdc, var(--quote), #dcdcdc); }

blockquote, q {
	font-style: italic; }

blockquote {
	line-height: 1.33;
	quotes: '\201C' '\201D';
	margin-top: 1.7777778em; }

blockquote:before,
blockquote:after {
	margin-top: 0;
	font-size: 2em;
	display: block;
	line-height: .25;
	margin-bottom: 0; }

blockquote:before {
	content: open-quote;
}

blockquote:after {
	content: close-quote;
	text-align: right; }

q, cite, quote  { 
	quotes:"\201c" "\201d" "\00ab\00a0" "\00a0\00bb"
}

code, pre, samp {
	background-color: #555;
	color: #EFD540;
	font-family: "Andale Mono", AndaleMono, monospace;
	font-size: 0.875em;
	padding: .1em .2em; }


kbd {
	background: #eee;
	border-color:#ccc #aaa #888 #bbb;
	border-style:solid;
	border-width:2px 3px 3px 2px;
	padding:0 2px;
	color:#000000;
	display:inline-block;
	min-width:15px;
	text-align:center;
	white-space:nowrap;
	box-shadow:0 0 5px rgba(0,0,0,0.5);
}

pre {
	padding: .5em 1em; 
}

	
p, ul, ol {
	margin-top: 1em;
	margin-bottom: .5em; }

ul ul, ul ol, ol ol, ol ul {
	margin-top: .5em; }

.center {
	text-align : center;
}


.post-date,
.post-cat,
.post-tags-list
{
	padding-left: 22px;
	background-repeat: no-repeat;
	background-position: 0 50%;
	padding-right: .5em; }

.post-cat {
	background-image: url('/themes/cpu26/img/icon_category.png'); }

.post-tags-list {
	background-image: url('/themes/cpu26/img/icon_tags.png');
	padding-left: 22px !important; }


/** --------------------------------------------------
		layout elements
--------------------------------------------------- */

#main {
	background-color: var(--background-main);
	padding: 1em .5em 2em; }

#main, .link_und {
	a {
		text-decoration: underline solid 1px #777;
	}
	a:hover, a:active , a:focus  {
		text-decoration: underline solid 1px var(--link);
	}
}




#page {
	max-width: 60em;
	margin: 0 auto;
	padding: 0; 
}

.header {
	position: relative;
	padding: .25em 0;
}


	
#skip-links {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	text-align: right; 
	height : 0;

	li {
		list-style-image: none;
		list-style-type: none;
		margin-left: 0;
		display: inline-block;
		vertical-align: middle;
		white-space: nowrap;
		padding-left: 0.5em;
		padding-right: 0.5em;
		font-size: 0.75em;
		line-height: 1;
		padding-bottom: .5em;
	}

}

#skip-links:focus-within {
	height : auto;
}


.blogcustom__title {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}


.sidebar {
	padding-top: 2em;
	background: var(--background-sidebar);
	color: var(--link-side);
	flex: 0 0 33%;
}

.blognav__title,
.blogextra__title {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px; }


.widgets {
	h3, h4 {
		font-size: 1em;
		color: var(--color-neutral);
		font-weight: bold;
	}

	h3 {
		text-transform: uppercase;
	}

	h4 {
		margin-top: 1.5em;
		margin-bottom: 0;
	}

	a {
		display : block;
	}

	a:link, a:visited {
		/** TODO use a global CSS var  **/
		/*color: var();*/
		border: none;
	}
	/* .sidebar .serie-current, */
	a:hover, a:focus, a:active,
	summary:hover, summary:focus, summary:active {
		/** TODO use a global CSS var  **/
		background-color: var(--background-link-side); 
		text-decoration: none !important;
	}

	.widget {
		padding: 1em;
		font-size: .875em;
		line-height: 1.71429; 
		& > ul {
			list-style: none;
			padding-left: 0; 
			li {
				list-style-image: none;
				list-style-type: none;
				margin-left: 0; 
			}
		}
	}

	ul {
		margin: 0; 
		li {
			display: block;
			/*padding: .25em*/;
			border-bottom: 1px solid gainsboro;
		}
	}

	li ul {
		margin-left: -.25em;
	}
	li li {
		border-top: 1px solid gainsboro;
	}
	li li:last-child {
		border-bottom: none;
	}
}


#q {
	width: 60%; }

.series-posts .current {
	background-color: var(--background-main);
	padding: .25em;
}

.category-current {
	margin-left: -2em;
	background-color: var(--background-main); }

.category-current ul {
	background-color: var(--color-neutral);
}


/* *** navigation *** */
.navlinks {
	color: white;
	margin: 0;
}

/* *** content info *** */
#content-info {
	margin-bottom: 1em;
	padding: 0;
	font-size: 0.875em; }

#content-info ul {
	margin-top: 0.5714286em;
	padding-left: 0; }

.content-info__feed {
	display: inline-block;
	vertical-align: top;
	list-style-type: none; 
	li {
		display: inline;
		margin-right: 1.5em;
	}
}

.content-info__sub-cat {
	margin-top: 2em; 
	h3 {
		font-weight: bold;
	}
}

/**
		POST
------------------------------- */
.post {
	margin: 0 auto; 
}

.post-day-date {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 0.8571429em;
}

.post-meta {
	padding: 0.5em 0;
	margin-bottom: 0em;
	clear: both;
}

.post-info {
	margin: .5em 0;
}

.full .post-info,
.short .post-info,
.post-cat,
.post-tags-list {
	margin: .5em 0;
	display: inline;
	vertical-align: baseline;
}

.minimal {
	margin: 0;
	padding : 0;
	display : flex;
	& > a {
		margin :  0;
		display : flex;
		flex-direction: column;
		width : 100%;
		& h3 {
			margin : 0 ;
			width : 100% ;
		}
	}
}

.post-tags-list {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	 }

.post-tags-item {
	list-style-image: none;
	list-style-type: none;
	margin-left: 0;
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
	vertical-align: top; 
	a:after {
		content: "."; 
	}
}

.post-info-co {
	margin: .5em 0;
}

.post-title {
	text-align: center;
	a, a:link, a:visited {
		border-bottom-color: white; 
	}
	a:hover, a:focus, a:active {
		background-color: transparent; 
	}
}


.post-content, .post-feedback, .post-attachments, #same_serie, #add-a-comment > * {
	margin : 0 auto 1em;
	max-width: 42em;
}


.post-attachments {
	position: relative;
	padding: 0 2.5em .25em;
	border: 1px solid gainsboro;
	box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.2); }

.post-attachments:before {
	content: url('/themes/cpu26/img/icon_attachments.png');
	content: url('/themes/cpu26/img/icon_attachments.svg');
	display: block;
	position: absolute;
	margin-top: -.33em;
	margin-left: -2em; }

.post-attachments-title {
	padding-top: .75em;
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
	color: var(--quote); }

.post-attachments-list {
	padding-left: 1em;
	margin-top: .5em; }

#add-a-comment {
	/* opacify to get it displayable */
	background : var(--background-comment);
	z-index : 1000;
	min-width : 80%;
	min-height : 80%;
	align-content: center;
	form {
		margin : 0 auto;
	}
}

#add-a-comment::backdrop {
	background : #7777; /* placeholder value. Should use normal brackground but opacified */
}

.comments-list {
	list-style: none;
	padding-left: 0; 
	& li {
		list-style-image: none;
		list-style-type: none;
		margin-left: 0; 
	}
}

.comment {
	overflow: hidden;
	padding: .1em 1.5em .1em 4em;
	margin-bottom: 2em;
	border-radius: .25em;
	box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.2); 
	background-color: var(--background-comment); }


.comment-number {
	display: block;
	float: left;
	width: 2.5em;
	height: 2.5em;
	margin-left: -3.5em;
	margin-right: 1em;
	margin-top: -.5em;
	border-radius: 50%;
	background-color: var(--background-main);
	z-index: 1000;
	line-height: 2.5em;
	text-align: center; }


.field {
	label {
		display: inline-block;
		width: 10em;
	}
	input {
		width: 100%;
	}
	textarea {
		display: block;
		width: 100%;
	}
}

.form-help, .remember {
	font-size: 0.875em; }

#pr, #credits {
	background-color: var(--background-neutral);
	padding: .5em;
	border: 2px solid #6c7c7c;
	margin-bottom: 2em;
}

.error {
	background-color: var(--link);
	color: white;
	padding: .25em .5em;
}

/* Button Style */
.buttons {
	text-align: right;
}

button[command=close] {
	background-color: #778f96;
	border: 1px solid #5d757d;
	display: inline-block;
	cursor: pointer;
	color: black;
	text-decoration: none;
}

button.submit:hover,
button.submit:focus,
button.preview:hover,
button.preview:focus {
	cursor: pointer;
	background-color: #5d757d;
}

button.submit:active, button.preview:active {
	position: relative;
	top: 1px;
}




/** --------------------------------------------------
		Modules
--------------------------------------------------- */

#content-info h2,
.content-info__feed {
	margin-right: 3.5em;
}


.banner {
	display : flex;
	flex-direction: row;
	background : var(--background-neutral);
}

h1 {
	display : none;
}

#logo {
	display : inline-block;
	flex: 0 0 64px;
	padding : 0;
	margin : 0;
	border-bottom : none !important;
	height : 64px;
}

.header {
	background : var(--background-neutral);
	line-height: normal;
	padding-top : 20px;
	position: sticky;
	top: -20px;
	z-index : 9;
	margin-bottom : 1em;
	box-shadow : 0 0 12px black;
}

.banner * {
	line-height: normal;
	box-sizing: initial;
}

menu, menu ul {
	display : flex;
	vertical-align : top;
	padding : 0;
	margin : 0;
	width : 100%;
	li {
		flex : 1 0 auto;
		list-style : none;
		overflow:hidden;
		vertical-align : middle;

		a {
			display : block;
			width : 100%;
			padding : 4px;
			color : white;
			vertical-align : bottom;
			text-align : center;
			font-weight: bold;
			text-decoration : none;
		}

		a:hover, a:focus {
			color : black;
			background : white
		}
	}
}

#ondemiroir_domain {
	flex: 1 1 auto;
	height : 64px;
	font-size : 3em;
	position : relative;
	overflow : hidden;
}


#motto, #header-control {
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 64px;
}

#motto {
	font-size : var(--cpu-font-size);
	padding : 8px;
	overflow : hidden;
	text-overflow: ellipsis;
}

#header-control {
	display: flex;
	top : -80px;
	align-items: center;
	min-width: 100%;
	min-height: 64px;
	background: var(--background-item);
}

#header-control cpu-controller {
	flex : 1 1 auto;
}

body.cpu-audio-with-webcomponents.delegated #header-control, body.cpu-audio-with-webcomponents #header-control:focus-within {
	top : 0px;
}

/** CUT HERE END  */


.fond_bleu {
	background : var(--fond-bleu);
}
.fond_vert {
	background : var(--fond-vert);
}
.fond_jaune {
	background : var(--fond-jaune);
}
.fond_orange {
	background : var(--fond-orange);
}
.fond_rouge {
	background : var(--fond-rouge);
}


.noir {
	color : black;
}

.banner-article {
	padding : calc(var(--cpu-font-size) * 0.8) ;

	& > * {
		background : var(--background-item);
	}

	.encloser {
		display : flex;
		flex-direction: row;
		align-items : center;
		gap: 10px;
		> div {
			flex : 1 0 75%;
		}
	}

	picture {
		flex : 0 1 min( var(--illus-width), 25vb );

		img {
			width :  100%;
			aspect-ratio: 1 / 1;
			display : grid; /* nécessaire pour virer le comportement inline */
		}
	}
}

.banner-link a {
	text-decoration : none !important;
	/* bloc à 100 du parent */
	width: 100%;
	height: 100%;
	display: block;
}

.banner-link:has(a:focus, a:hover) {

	a:focus, a:hover {
		outline : none;
	}

	& > * {
		background : var(--calque-out);
	}
}


.banner-article.minimal {
	padding : 0em;

}
.posts-listed:not(:first-child) {
	padding-top: 0em;
}

.banner-article.full{
	/*--illus-width : calc(var(--illus-width) * 2);*/
	--illus-width : 400px;	
}
.banner-article:has(:playing) {
	background-color: red; /* rouge antenne, forcément */
}


.banner-article.short{
	--illus-width : 150px;
}

.banner-article.title {
	--illus-width : 150px;
}

.banner-article.minimal {
	--illus-width : 150px;
}
.banner-article.img-on-right .encloser {
	flex-direction: row-reverse;
	padding-right : 0;
	padding-left : 1em;

}


.no-images img { display : none }


.blognav__widgets, .blogextra__widgets {
	li {
		display: flex;
		padding: 0;
		ul {
			margin-left: 0;
			padding: 0;
		}
	}
}

.sidebar a:link, .sidebar a:visited {
	flex: auto;
	padding: 0.25em;
}


.breadcrumb {
	display : flex;
	list-style: none;
	padding : 0;

	li {
		list-style: none;
		padding : 0 5px;
		flex : 0 1 auto;
	}
	li:first-child {
		padding-left : 0px;
	}
	li:last-child {
		padding-right : 0px;
	}
}


.breadcrumb_categories:not(:first-child) {
	display: none;
}

.pagination {
	text-align : center;
}

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; 
}
.spacer {
	flex : 1 0 auto !important; /* OUI, JE SAIS */
}

.only-small {
	display : none;
}


*/
.dc-page .encloser {
	display : block;
	h2 {
		margin-bottom : 0
	}
}


#search {
	padding-top : 5.5em;
}

#searchbox {
	display : flex;
	position : relative;
	input {
		flex : 1 0 auto;
		border-radius : 0;
	}
	button {
		flex : 0 0 auto;
		color: black;
		background-color: #778f96;
		border: 1px solid #5d757d;
		border-radius : 0;
		padding: .25em .5em;
	}
}



.blogextra__widgets article h3 {
	color: var(--link);
	text-transform: none;
}


/** assistant **/

#bulle, #clippy {
	display : none;
}
.show_clippy #bulle, .show_clippy #clippy {
	display : block;
	position : absolute;
}

.show_clippy #bulle {
	left : 100px;
	top : 50px;
	max-width: 300px;
	background: #ffa;
	color: black;
	font-size : 15px;
	border: black 1px solid;
	padding: 10px;
	border-radius: 20px 20px 20px 0px
}

.show_clippy #clippy {
	left : 0px;
	top : 100px;
	width : 124px;
	height : 93px;
	object-fit:  none;
}

#bulle a {
	color : #007 !important;
}


@media (max-width: 640px) {
	:root , .interface {
		/*--cpu-font-size : 13px;*/
		--cpu-height : 48px;
		--cpu-elapse-width : 140px;
		--cpu-min-padding : 4px;
	}
}

@media (max-width: 480px) {
	:root , .interface {
		--cpu-elapse-width : 70px;
	}

	.show_clippy #clippy {
		transform : scale(0.5);
	}

	.show_clippy #bulle {
		left : 0px;
	}
}


@media screen and (max-width: 420px) {

	body {
		--illus-width : 50px;
	}

	.only-small {
		display : inline;
	}

	.not-small,
	.tags ul,
	.categories ul ul {
		display : none;
	}

	.flex-entries {
		display : flex;
		flex-direction: column;
		gap: 4px;
	}

	.site-title {
		font-size: 1.8em;
	}

	.comment-number {
		margin-top: 0;
	}

	.comment-content {
		margin-left: -3.5em;
		margin-right: -1em;
	}

	.comment-form  {
		padding: .75em .5em .1em; 
	}

	#main {
		padding: .5em;
	}

	#skip-links {
		text-align: center;
		font-size: 0.625em;
		line-height: 2.4em;
	}

}

@media (min-width: 421px) {
	.flex-entries {
		display : flex;
		flex-wrap : wrap;
		gap : 8px;
		article {
			flex : 0 1 calc(50% - 4px);
			a {
				padding-right : 1em;
			}
		}
	}

	.flex {
		display : flex;
	}

	.flex.wrap {
		flex-wrap : wrap;
	}

	.flex article {
		flex : 1 1 20em;
		margin : 2px;
	}

	.post-day-date:after,
	.post-day-date:before {
		display: inline-block;
		height: 1px;
		content: " ";
		background-color: gainsboro;
		text-shadow: none;
		width: 20%;
		margin-bottom: .33em;
	}

	.post-day-date:after {
		margin-left: 2em;
	}

	.post-day-date:before {
		margin-right: 2em;
	}

	.dc-archive .content-inner {
		margin-left: 3em;
		margin-right: 3em;
	}

}

@media screen and (max-width: 640px) {
	#ondemiroir_domain {
		font-size: 1.5em;
	}

	.header {
		padding-bottom: 0;
	}

	.header__nav {
		margin-left: -.5em;
		margin-right: -.5em; 
		li {
			display: block;
			margin-right: 0;
			border-bottom: 1px solid white;
		}
	}

	.flex-entries {
		flex-direction: column;
	}

	.banner-article, .banner-article.img-on-right {
		.encloser {
			flex-direction: column;
		}

		.short {
			--illus-width : 100px;
		}
		picture {
			max-width : var(--illus-width);
			/*flex: 0 0 min( var(--illus-width), 25vb );*/
		}
	} 
}

@media screen and (min-width: 641px) and (max-width: 1200px) {

	#sidebar {
		display : flex;
		padding-left: 1em;
		padding-right: 1em;
		box-sizing: border-box;
		word-wrap: break-word;  
	}

	#blognav , #blogextra {
		flex: 0 0 49%;
		vertical-align: top; 
	}

}

@media screen and (max-width: 1200px) {
	body {
		--illus-width : 150px;
		--h2-factor : 2;
		--h3-factor : 1.5;
	}
}

@media screen and (min-width: 1201px) {
	body {
		--cpu-font-size : 18px;
	}

	#wrapper {
		display : flex;
	}

}

@media screen and (min-width: 1201px) and (max-width: 2000px) {
	#page {
		max-width: 80em;
	}

	#main {
		flex : 0 0 75%;
		padding-left: 1em;
		padding-right: 1em;
		box-sizing: border-box;
		word-wrap: break-word;
	}

	#sidebar {
		flex: 0 0 25%;
		padding-left: 1em;
		padding-right: 1em;
		box-sizing: border-box;
		word-wrap: break-word;
	}

	#blogextra details::details-content, details.series-posts::details-content {
		content-visibility: visible;
	}
	#blogextra details, details.series-posts {
		summary::marker {
			content : "" !important;
		}
	}
}
@media screen and (min-width: 2001px) {
	body {
		--cpu-font-size : 20px;
		--cpu-line-height : 1;
	}

	#page {
		max-width: 103em;
	}

	.header {
		flex: 0 0 66.7%;
		padding-bottom: 0;
	}

	#main {
		flex: 0 0  66.7%;
		padding-left: 1em;
		padding-right: 1em;
		box-sizing: border-box;
		word-wrap: break-word;
	}

	#sidebar {
		flex: 0 0 33.3%;
		display : flex;
		padding-left: 1em;
		padding-right: 1em;
		box-sizing: border-box;
		word-wrap: break-word;  
	}

	#blognav, #blogextra {
		flex: 0 0 49%;
		vertical-align: top;

		details::details-content {
			content-visibility: visible;
		}
		summary::marker {
			content : "" !important;
		}
	} 
		
}

@media (prefers-contrast: more) {
	body, #main, #motto, #header-control {
	 --cpu-background:#fff;
	 --cpu-color:#000;
	 --cpu-playing-background:#fff;
	 --cpu-playing-color:#000;
	 --cpu-error-background:#fff;
	 --cpu-error-color:#000;
	 --cpu-popup-background:#000;
	 --cpu-popup-color:#fff ;
	 --cpu-focus-background:#000;
	 --cpu-focus-color:#fff;
	 --cpu-cue:#000;
	 --cpu-timeline-limits:#000;
	 --cpu-elapse-width:160px;                   
	 --cpu-min-padding:16px;
	 --cpu-inner-shadow:none;
	 --cpu-color-transitions:0s;
	 --cpu-background-transitions:0s
	}

	*, *::placeholder {
	  color : #000 !important;
	  background : #fff !important;
	  text-shadow : none !important;
	  border-color : #000 !important;
	}

	a:hover , a:focus , a:active,
	button:hover , button:focus , button:active,
	{
	  outline : 2px solid #000 !important;
	  color : #fff !important;
	  background : #000 !important;
	}
}