letter-sticky {
    display:block;
    box-sizing:border-box;
     width:100%;  
    position:sticky;
   top:0dvh;
    background-color:white;
    padding:1em;

}

letter-sticky div {
margin:auto;
    width:100%;
    max-width:1000px;
    display:flex;
        justify-content:center;
    gap:1em;

}


letter-sticky a {
   
       padding:0.5em 0.5em 0.5em 0.5em;
    border-radius:0.2em;
    background-color:black;
    color:white;
    text-decoration:none;
    font-family:'Open Sans';
    font-size:0.8em;
}






















letter-container {
    display:block;
margin:auto;
width:100%;
max-width:1000px;


}

letter-metadata {
display: inline-grid;
  grid-template-columns: auto auto;
  column-gap:0.5em;
  font-family:'Open Sans';
  font-size:1.1em;
}


letter-metadata img {
    width:1.2em;
}



letter-metadata div:nth-child(2n-1) {
text-align:right;
font-weight:bold;
}


c-green {
    color:#3A0;
}
c-red {
    color:chocolate;
}

c-blue {
    color:royalblue;
}

c-grey {
    color:silver;
}

c-olive {
    color:olive;
}

c-purple {
    color:purple;
}



p-l,p-c,p-s,p-d,p-t,p-ld,p-cd,p-sd,p-dd,p-td,p-sn,p-dn,p-tn {
display:block;
margin-bottom:0;
}

p-l,p-c,p-s,p-d,p-t {
    margin-top:0;
}

p-ld,p-cd,p-sd,p-dd,p-td {
    margin-top:1em;
}

p-sn,p-dn,p-tn {
    margin-top:-1.4em;
}

p-sn,p-s,p-sd {
    margin-left:2em;
}

p-dn,p-d,p-dd {
    margin-left:4em;
}

p-tn,p-t,p-td {
    margin-left:6em;
}

p-c,p-cd,p-grey {
    text-align:center;
}


p-grey {
    color:silver;
    display:block;
    font-family:'Open Sans';
    font-weight:bold;
    font-size:0.8em;
    margin:1em;
}

t-1 { margin-left: 2em;}
t-2 { margin-left: 4em;}
t-3 { margin-left: 6em;}
t-4 { margin-left: 8em;}
t-5 { margin-left: 10em;}
t-6 { margin-left: 12em;}
t-7 { margin-left: 14em;}
t-8 { margin-left: 16em;}
t-9 { margin-left: 18em;}



letter-body {
    display:block;
       border-bottom:1px solid silver;
    margin-bottom:1em;
    font-size:1.3em;
    font-family:'Baskervville';
}

letter-info {
    display:block;
    font-family:'Open Sans';
    background-color:white;
    max-width:calc(90vw - 32px);
    position:fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    padding:1.5em 1em 1em 1em;
    width:300px;
    display:none;
    border:1px solid chocolate;
}

letter-info:target {
    display:block;
}

letter-info div {
    position:absolute;
    right:0.5em;
    top:0;
    
}



.a-info-show{
        text-decoration:none;
}
 

letter-info a {
    font-size:1.5em;
    font-weight:bold;
    color:chocolate;
    text-decoration:none;
}    


letter-pagination {

    box-sizing:border-box;
    display:block;
    width:100%;
    max-width:1000px;
    padding:0 2em 0 2em;
    margin:auto;
font-family:'Open Sans';

    
}


letter-pages {
    display:flex;
    flex-wrap:wrap;
    padding:1em 0 1em 0;
border-bottom:1px solid silver;
    
}


letter-pages div {
    padding:0.5em;
}

letter-pages #current{
    padding:0.5em;
    font-weight:100;
    background-color:black;
}



letter-pages a {
    color:black;
    text-decoration:none;
    border-bottom:1px dotted black;
}



letter-pages #current a{
    color:white;
    text-decoration:none;
    border-bottom:1px dotted white;
}



letter-transcriptions {
           font-variant-numeric:lining-nums;
    box-sizing:border-box;
    display:block;
    width:100%;
    max-width:1000px;
    margin:auto;
    padding: 1em 2em 0 2em;


}



@media only screen and (max-width: 800px) {
letter-transcriptions,letter-pagination {font-size: 1.1em;}
} 

@media only screen and (max-width: 750px) {
letter-transcriptions,letter-pagination {font-size: 1em;}
}  

@media only screen and (max-width: 700px) {
letter-transcriptions,letter-pagination {font-size: 0.9em;}
}