html, body {
height:100%;
width:100%;
max-width:1680px;
margin:auto;
background-color: #141000;
color:#babcce ;

font:'Roboto', sans-serif;
font-size: calc(12px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
h1{color: #3d2f00;font-family:Caveat;text-align:center;}
h2{color: #28953e;font-family:Sriracha;}
h3{color: #2d3a3a;text-align: center;}
q {font-size: smaller;}
a {color:#aaa;}
a:visited{color:#bbb;}
.grande {width:100%;max-width:1680px;}
.titreGrande {margin-top:-0.3rem;margin-left:0.5rem;color:#156E15}
blockquote {
color: #aaa;
position: relative;
margin-left: 3em;
margin-bottom: -0.1em;
padding-left: 1em;
border-left: 0.1em solid #3d2f00;
}
q {color: #aaa;margin-left: 4em;font-size: smaller}
summary {cursor:pointer;}
header h1 {margin-top:-0.2rem;}
h1 + p {margin-top:-1.5rem;color:#ffecad}
#menu li {display: inline-block;margin-left: 2em;}
footer li {display: inline-block;margin-left: 2em;}
.page {
text-align: right;
margin-right: 3em;
color: #2d3a3a;
font:bold italic;
}
.page::before{content: "page ";}
sup{color:#2ba84a;}
.note{font-size: smaller;color:#959D9B; }
.note::first-letter{color:#2ba84a;}
/*
art-icles.html
*/
  dl {
    border: 3px double #3d2f00;
    padding: 0.5em;
  }
  dt::after {
    content: "  ";
  }
  dd {
    margin: 0 0 0 110px;
    padding: 0 0 0.5em 0;
  }
  dd::before {
    content: "> ";
    color: #3d2f00;
  }

/* CSS HEX
--rich-black: #040f0f;
--forest-green: #248232;
--forest-green-2: #28953e;
--pigment-green: #2ba84a;
--sea-green: #2c8d46;
--dark-spring-green: #2c7142;
--hunter-green: #2d563e;
--gunmetal: #2d3a3a;
--cadet-grey: #959D9B
--baby-powder: #fcfffc;
*/
sup {color: inherit;}