:root {
    --main-txt-color: rgba(0, 0, 0, 0.9); /* black with reduced opacity is better than gray tones for accessibility */
    --main-txt-color-dark: rgba(255, 255, 255, 0.87); /* white with reduced opacity is better than gray tones for accessibility */
    --main-bg-color: #fffff8;
    --main-bg-color-dark: #121215;
    --main-link-color: #46b;
    --second-link-color: #84b;
    --main-link-color-dark: #8ad;
    --second-link-color-dark: #a8d;
    --btt-bg-color: rgba(221, 221, 204, 0.9); /* same as #ddc with opacity */
    --btt-txt-color: #998;
    --btt-bg-color-dark: rgba(85, 85, 89, 0.87); /* same as #555559 with opacity */
    --btt-txt-color-dark: #333336;
}

html {
    font: 16px/1.6 ABeeZee, sans-serif;
    -webkit-text-size-adjust: none; /* prevent auto text zooming on mobile when switch to landscape */
    text-size-adjust: none;
}

body {
    width: 90%;
    max-width: 600px;
    margin: 40px auto;
    padding-left: 5%;
    padding-right: 5%;
    color: var(--main-txt-color);
    background-color: var(--main-bg-color);
}
body > header, body > footer {
    text-align: center
}
body > header > blockquote {
    font-size: 0.8rem;
    border-top: 1px solid var(--main-txt-color);
    border-bottom: 1px solid var(--main-txt-color);
    padding: 0.6rem;
    margin: 0;
}
body > header > nav {
    border: none;
    margin: 0.2rem 0;
}
header > blockquote > p, header > blockquote > footer {
    text-align: center
}
header > blockquote > p {
    font-size: 0.9rem;
    font-style: italic;
    margin: 0 auto; /* the 'auto' for left and right enables centering when max width is reached */
    max-width: 350px; /* so quotes wrap more nicely on larger screens */
}
header > blockquote > footer {
    font-size: 0.8rem;
    margin-top: 0
}

body > header > nav, body > footer {
    font-size: 0.8rem;
}
body > footer {
    margin-top: 4rem;
    border-top: 1px solid var(--main-txt-color);
}

h1, h2, h3 {
    font-family: LondrinaSolid, cursive;
    line-height:1.2;
    font-weight: normal;
}
h1 {
    margin-top: 2.7rem;
    margin-bottom: 1.2rem;
}
h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

h3 + p { /* bylines on translations page -- if use h3 anywhere else, will have to adapt this (p.byline, frex) */
    font-size: 0.9rem;
    margin-top: 0;
}
h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

a {
    color: var(--main-link-color);
    text-decoration-line: underline; /* text-decoration single line shorthand not working in Safari */
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15rem;
}
a:link {
    text-decoration-color: var(--main-link-color);
}
a:hover {
    font-weight: bolder;
}
a:visited {
    color: var(--second-link-color);
    text-decoration-color: var(--second-link-color);
}

figure {
    text-align: center;
    margin-bottom: 2em
}
img {
    max-width: 100%; /* to scale with screen size */
    height: auto
}
figcaption {
    font-size: 0.8rem;
    font-style: italic
}
img.float-left { /* my pic on home page */
  float: left;
  width: 150px;
  margin: 0 15px 10px 0;
  display: inline-block;
}

/* inline clickable notes */
input[type=checkbox] ~ span {
    display:none; 
}
/* This permanently hides the checkbox itself  */
input[type=checkbox] {
    display:none;  
}
/* This styles the footnote text which appears 
when the label is clicked  */
input[type=checkbox]:checked ~ span {
    display:inline-block; 
    font-size: 0.85rem;
    padding:1rem 3rem;
    cursor:default;
}
/* This styles the footnote label */
input[type=checkbox] ~ label {
    display:inline;
    cursor:pointer;
    color: var(--main-link-color);
    text-decoration:none;
}


/* back-to-top button */
/* appearance depends on font & font size, so hardcode this */
a.back-to-top {
    font-family: Arial, Helvetica, sans-serif; /* if change these, will need to adjust next three settings too */
    font-size: 32px;

    line-height: 1;
    padding: 0.5rem 0.5rem 0; 
    
    position: fixed;
    bottom: 10px;
    right: 10px;
    border-radius: 5px;
  /*  aspect-ratio: 1;*/ /* this actually seems to make it *less* square */
  /*  width: auto; */
    
    background: var(--btt-bg-color);
    color: var(--btt-txt-color);
    font-weight: bold;
    text-decoration-line: none;
  }


@media (prefers-color-scheme: dark) {
    body {
        color: var(--main-txt-color-dark);
        background: var(--main-bg-color-dark);
    }
    

    body > header > p {
    border-bottom: 1px solid var(--main-txt-color-dark);
    }
    body > footer {
        border-top: 1px solid var(--main-txt-color-dark);
    }

    a:link {
        color: var(--main-link-color-dark); 
        text-decoration-color: var(--main-link-color-dark);
    }
    a:visited {
        color: var(--second-link-color-dark);
        text-decoration-color: var(--second-link-color-dark);
    }
    a.back-to-top {
        background: var(--btt-bg-color-dark);
        color: var(--btt-txt-color-dark);
    }

    figure {
        background: var(--main-bg-color); /* for transparent pngs, so they still work well */ 
    }

}