:root {
--color-white: white;
--color-black: black;
--color-dodger-uniform-blue: #005A9C;
--color-clear-blue: #0084D1;
--color-text: #17202A;
--color-snow: #F3F7FA;
--color-RebeccaPurple: #663399;

/*
--color-light-grey: #C3BCB6;
--color-dark-grey: #81776F;
--color-fox-medium-brown: #A24F05;
--color-fox-brown-light: #C58632;
--color-fox-dark-brown: #3C2415;
--color-fox-dark-blue: #223344;
*/
}

* {
margin: 0;
padding: 0;
border: 0;
}

body {
word-wrap: break-word;
margin: 0 auto;
max-width: 960px;
padding-bottom: 3em;
background-color: var(--color-white);
/* background-image: url('background.jpg'); */
/* https://www.pexels.com/fr-fr/photo/photographie-bokeh-des-lumieres-1141678/ */
}

main {
background-color: var(--color-white);
padding-bottom: 1.5em;
}

h1 {
background-color: var(--color-dodger-uniform-blue);
border-bottom : 0.15em solid var(--color-clear-blue);
margin: 0 auto;
margin-bottom: 0.5em;
}

h1, h2, h3 {
font-family: 'Droid Serif', serif;
/* font-family: 'Garamond', serif; */
font-weight: 700;
}

h1, h2 {
color: var(--color-white);
padding: 0.2em;
}

h2, h3 {
margin-top: 1em;
}

h2 {
background-color: var(--color-dodger-uniform-blue);
text-transform: uppercase;
margin-top: 3em;
}

h3 {
color: var(--color-text);
padding-left: 1em;
margin-bottom: 0.2em;
}

#works > p:first-of-type {
margin-top: 1em;
}

p, li {
color: var(--color-text);
font-family: 'Droid Sans', 'Inter UI', sans-serif;
line-height: 150%;
}

::selection {
background-color: var(--color-dodger-uniform-blue);
color: var(--color-white);
}

p, ul {
margin-right: 1em;
margin-left: 2em;
}

ul p {
padding: 0;
}

a {
text-decoration: none;
border-bottom: 0.1em dotted var(--color-dodger-uniform-blue);
color: var(--color-text);
}

a:visited {
color: var(--color-RebeccaPurple);
}

a:visited:hover {
background-color: var(--color-RebeccaPurple);
}

a:hover, a:active, a:focus {
color: var(--color-white);
background-color: var(--color-dodger-uniform-blue);
}

img {
float: left;
margin-left: 2em;
margin-right: 1em;
margin-bottom: 0.2em;
vertical-align: text-top;
border: 0.1em dashed var(--color-dodger-uniform-blue);
}

a + a img {
margin-left: auto;
}

ul {
list-style-position: inside;
}

li {
color: var(--color-text);
list-style: none;
}

li::before {
content: "\2714";
color: var(--color-dodger-uniform-blue);
display: inline-block;
width: 1em;
}

ul p, li p {
margin-left: 0;
}

strong {
color: var(--color-dodger-uniform-blue);
}

.place, .place a {
color: var(--color-dodger-uniform-blue);
}

.place a:hover, .place a:focus, .place a:active {
color: var(--color-white);
}

.firm {
text-transform: uppercase;
font-family: 'Droid Serif', serif;
font-weight: 700;
}

.column {
column-count: 2;
column-gap: 0.5em;
vertical-align: top;
}

.nobreak {
break-inside: avoid;
}

span:lang(en) {
font-style : italic;
}

h3 span:lang(en) {
font-style : normal;
}

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

.column {
column-count: 1;
}

}

@media print {

@page {
margin: 1cm;
}

body {
border-left: none;
padding-bottom: 0;
}

header {
padding-top: 0;
margin-bottom: 0;
}

main {
column-count: 2;
margin-top: 1em;
}

h1, h2 {
color: var(--color-dodger-uniform-blue);
padding: 0;
}

h2, h3 {
margin-top: 10pt;
}

h1 {
font-size: 28pt;
margin: 0;
}

h2 {
font-size: 20pt;
break-before: never;
margin-left: 0;
margin-right: 0;
}

h3 {
font-size: 12pt;
margin-left: 0;
margin-bottom: 0;
padding-left: 0;
}

p, ul {
font-size: 9.5pt;
margin-left: 0;
}

ul {
page-break-inside: avoid;
}

a {
text-decoration: none;
border-bottom: none;
}

section {
margin-top: 0;
display: block;
}

.noprint, #works {
display: none;
}

/*

a[href^="http"]:not([href*="bengo.fr"]):after {
    content: " (" attr(href) ")";
}

*/

}

@font-face {
font-family: 'Inter UI';
font-style:  normal;
font-weight: 400;
src: url("fonts/Inter-UI-Regular.woff2") format("woff2"),
     url("fonts/Inter-UI-Regular.woff") format("woff");
}

@font-face {
font-family: 'Droid Serif';
font-style:  normal;
font-weight: 400;
src: url("fonts/DroidSerif-Regular.woff") format("woff");
}

@font-face {
font-family: 'Droid Sans';
font-style:  normal;
font-weight: 400;
src: url("fonts/DroidSans-Regular.woff") format("woff");
}

@font-face {
font-family: 'icomoon';
font-weight: 400;
font-style: normal;
src: url('fonts/icomoon.woff') format('woff'),
     url('fonts/icomoon.ttf') format('truetype');
}

[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
margin-right: 0.5em;
}