@font-face {
font-family: 'Della Respira';
src: url('/f/dellarespira-regular.woff2') format('woff2'),
     url('/f/dellarespira-regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
unicode-range: U+000-5FF;
}

body {
background: #FFF7DE;
font-size:100%;
margin:0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height:1.6;
color: #111;
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
display: block;
}

a {
color:#060;
text-decoration:underline;
}

a:hover {
color:#c03;
}

#back-to-top {
background: rgba(0,0,0,.7);
color: #fff;
transition: all 200ms linear;
}

#back-to-top:hover, #back-to-top:focus {
background: rgba(0,0,0,1);
}

/* Grid / flex */

#wrapper {
display: flex;
flex-flow: row wrap;
clear: both;
}

header {
margin-top: .5rem;
}

aside {
flex: 2;
order: 2;
}

main {
flex: 4;
order: 1;
}

.intro {
margin: 1rem 2rem 1rem 3rem;
padding-bottom: 0.1rem;
border: 0;
}

main {
margin: -1rem 3.5rem 2rem 2rem;
padding: 0 1rem 1rem 1rem;
}

aside {
margin: 1rem 2rem;
}

#contents {
position: -webkit-sticky;
position: sticky;
top: .5rem;
padding: 0 1rem 1rem 1rem;
}

section {
margin: 1rem 0 2rem 0;
padding: 1rem 0;
border-bottom: 1px solid #060;
}

p {
font-size: 1.2rem;
margin:.2rem 0 1.5rem 0;
padding:0;
}

.intro p, .closing p, p.ref, p.changes {
font-size: .9rem;
}

p.ref {
font-style: italic;
}

.intro p {
max-width: 70%;
}

h1, h2, #logo {
font-family: 'Della Respira', Baskerville, Georgia, serif;
font-style: normal;
font-weight: normal;
}

#logo {
font-size: 2rem;
margin: 1rem 0 1rem 3rem;
padding: .5rem 2.5rem .5rem 5rem;
background: url(../images/book.svg) no-repeat 0 50%;
background-size:auto 64px;
display: inline-block;
}

h1 {
font-size:2.2rem;
margin: 0 0 .2rem 0;
padding:0;
line-height: 1.3;
}

h2 {
font-size:1.8rem;
margin: 0 0 .2rem 0;
padding:0;
}

aside ul {
padding: 0 0 0 1.1rem;
}

.utillinks {
float: right;
list-style: none;
margin:2rem 0.8rem;
padding: 0;
font-size:1rem;
}

.utillinks li {
display: inline;
}

.utillinks a {
padding:.5rem 1rem .5rem 2rem;
text-decoration: none;
}

.utillinks a:hover, .utillinks a:focus {
text-decoration: underline;
}

.rightlinks {
float: right;
font-size:1.2rem;
margin:1rem 2rem;
}

#backlink {
background: url(../images/back.svg) no-repeat 0 50%;
padding-left: 2.5rem;
background-size:auto 20px;
}

.btn {
margin:0 0 0 1.5rem;
padding:.5rem .7rem;
border:0;
color:#fff;
font-size:1rem;
background:#2E7D32;
text-transform:uppercase;
display:inline-block;
}

.btn:hover {
background:#1B5E20;
text-decoration:none;
}

figcaption {
font-size: .9em;
text-transform: uppercase;
margin: .7rem 0;
text-align: center;
line-height: 1.5em;
}

figure.imgc, figure.imgc img {
margin: 0 auto 1.3rem auto!important;
display: block!important;
}

#foot {
padding:1.5rem;
font-size: 90%;
text-align:center;
margin: 2.5rem 0 0;
}

#foot a {

}


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

#logo {
margin-left: 2rem;
}

.intro {
margin: 1rem 2rem;
}

.intro p {
max-width: 100%;
}

main {
margin-right: 0;
margin-left: 1rem;
margin-top: -2rem;
}

aside {
margin-top: 0;
}

.utillinks {
font-size: .85rem;
}

aside h2 {
font-size: 1.3rem;
}

}

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

header {
text-align: center;
}

.utillinks {
float: none;
margin-top: 0;
font-size: 1rem;
}



}



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

.intro {
margin: 0 1rem 2rem 1rem;
padding: 1rem 1rem 0.1rem 1rem;
}

aside, main {
flex: 1 100%;
margin: 0 1rem 2rem 1rem;
}

aside {
order: 1;
}

main {
order: 2;
margin-top: -5rem;
}

#logo {
font-size: 5.5vw;
margin-left: 1rem;
padding-left: 4rem;
padding-right: 1rem;
background-size: auto 50px;
}

.utillinks {
text-align: left;
font-size: 4.5vw;
margin: -1rem 2rem 1rem 2rem;
}

.utillinks li {
display: block;
}

#backlink {
padding: .5rem .8rem .5rem 2.5rem;
background-size:auto 20px;
}

h1 {
font-size: 7.5vw;
}

h2 {
font-size: 7vw;
}

p {
font-size: 5vw;
}

.intro p, .closing p, p.ref, p.changes {
font-size: .9rem;
}

#foot {
font-size: 3vw;
}

}
 


@media print {

.rightlink, .utillinks, aside, .intro, .closing, footer span, #back-to-top {
display: none;
}

body {
background: #fff;
color: #000;
}

#logo {
margin: 0;
padding-left: 0;
background: none;
}

main {
margin: 0;
padding: 0;
}

p {
font-size: 1rem;
margin: 1.5rem 0;
}

a {
color:#000;
text-decoration:none;
}

section {
border-bottom: 1px dotted #000;
}

}