:root {
    /* 
        --fs = font size 
        --c = color
    */
    --c-text: #CCC;
    --c-background: #22272e;
    --c-interactive: #FF7A33;
    --c-button-font-hover: #FFF;
    --c-highlight: #33FF81;
    --c-banner: #14181c;
    --c-banner-text: #FFF;
    --c-nonContentElements: #5f6874;
    --fs-sub-banner:
    clamp( 1.5rem, 4.5vw, 2rem);
    --fs-navigationHeading:
    clamp( 1.3rem, 4vw, 1.6rem);
    --fs-navigationContents:
    clamp(1.2rem, 3.2vw, 1.3rem);
    --fs-body:
    clamp(1.125rem, 3vw, 1.3rem);
    --fs-banner:
    clamp(2rem, 9vw, 3.5rem);
    --fs-smallText:
    clamp(0.8rem, 2.6vw, 1rem);
    --width-banner:
    min(100%, 800px);
    --width-main:
    min(100%, 700px);
}

/* atkinson-hyperlegible-regular - latin */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../fonts/atkinson-hyperlegible-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/atkinson-hyperlegible-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/atkinson-hyperlegible-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/atkinson-hyperlegible-v7-latin-regular.svg#AtkinsonHyperlegible') format('svg'); /* Legacy iOS */;
    font-display: swap;
}

/* cinzel-decorative-700 - latin */
@font-face {
    font-family: 'Cinzel Decorative';
    font-style: normal;
    font-weight: 700;
    src: local(''),
         url('../fonts/cinzel-decorative-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/cinzel-decorative-v12-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/cinzel-decorative-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/cinzel-decorative-v12-latin-700.svg#CinzelDecorative') format('svg'); /* Legacy iOS */;
    font-display: swap;
}

body {
    font-family: atkinson hyperlegible,Helvetica,sans-serif;
    font-size: var(--fs-body);
    margin: 0 auto!important;
    width: var(--width-banner);
    counter-reset: pl;
    color: var(--c-text);
    background-color: var(--c-background);
    overflow-x: hidden !important;
    min-height: 88vh;
    min-width: 240px;
    position: relative;
    padding-bottom: 7rem;
}

figure.blogImage {
    margin: 8px 0 18px;
    padding-left: 16px;
    padding-right: 16px;
}
figcaption {
    text-align: center;
    font-size: var(--fs-smallText);
}

img.blogImage {
    max-width: 100%;
}

.blogArticle_Date {
    font-size: var(--fs-smallText);
    margin-top: 0.6rem;
    text-align: end;
}

pre {padding-left: 3rem;}

main{
    max-width: var(--width-main);
    width: fit-content;
    margin: auto;
    padding-bottom: 5rem;
    padding-top: 2.5rem;
}

@media only screen and (hover: none) and (pointer: coarse){
    body {
        min-height: 70vh; /*to accomodate the address bar and tab bar on Android*/
    }
    main {
        padding-top: 0;
    }
}
@media only screen and (max-width: 299px) {
    main>p {
        margin-right: 0.8rem;
    }
    li.pl {
        margin-right: 0.8rem;
    }
    
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 550px) {
    .grid-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

header > div {
    width:fit-content;
}

div.socialMediaIcons {
    text-align: end;
    position: relative;
    margin: auto;
}

div.socialMediaIcons > a {
    height: clamp(24px, 8vw, 36px);
    outline:none;
    display: inline-block;
}

div.socialMediaIcons > a:hover {
    background-color: none;
}

.socialMediaIcon {
    width:  clamp(24px, 8vw, 48px);
    height:  clamp(24px, 8vw, 48px);
    background-color: transparent;
   
}
.socialMediaIcon > path{
    fill: var(--c-interactive);
}

.socialMediaIcons > a:hover path {
    fill: var(--c-highlight);
}
.socialMediaIcons > a:focus svg {
    background-color: var(--c-highlight);
    outline-color: var(--c-background)
}
.socialMediaIcons > a:focus path {
    fill: var(--c-background);
}

.socialMediaIcons > a:hover:focus svg {
    background-color: var(--c-highlight);
    fill: var(--c-backgroundarkblue);
    outline: 3px solid var(--c-highlight);
}

a.skip-link {
    left: -9999px;
    padding: 0.8rem;
    position: absolute;
    background: var(--c-highlight);
    color: var(--c-background);
    outline: none;
    user-select: none;
}

a.skip-link:active, a.skip-link:focus {
    left: 0;
    top: 0;
    z-index: 1500;
}

div.breadcrumbTrailContainer {
    position: fixed;
    display: flex;
    background-color: var(--c-background);
    width: var(--width-banner);
    border-bottom: 5px var(--c-nonContentElements) solid;
    z-index: 1000;
    height: 33px;
    flex: auto;
    user-select: none;
}

.breadcrumb__back {
    FONT-WEIGHT: 800;font-weight: 400;
    font-size: .875rem;
    line-height: 1.9rem;
    margin: auto auto auto 0;
    padding-left: 1.5em;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.breadcrumb__back:before {
    content: '<';
    font-family:  courier;
    font-weight: 900;
    font-size: 1rem;
    display: inline-block;
    height: 1.5em;
    left: 0;
    position: absolute;
    top: 0;
    width: 10px
}

footer,header {
    background-color: var(--c-banner);
    height: fit-content;
    color: var(--c-banner-text);
    padding: 2px 0px;
    font-family: Georgia,"times new roman",serif;
}

header {
    padding-top: 2.5em;
}

header,nav.collectionContentsNav {
    border-bottom: 5px solid var(--c-nonContentElements)
}

footer {
    border-top: 5px solid var(--c-nonContentElements);
    display: flex;
    width: var(--width-banner);
    justify-content: center;
    position: absolute;
    bottom: 0;
    user-select: none;
}

footer li {
    display: block;
    border-right: 1px solid var(--c-nonContentElements);
    padding: .5em 1em;
    float: left;
    margin-top: .25em;
    margin-bottom: .25em
}

footer a {
    color: var(--c-interactive)
}

footer li:last-child {
    border-right: none
}

footer ul {
    padding-inline-start:0;margin-block-start:0;margin-block-end:0}

footer div {
    margin: auto;
    font-family: atkinson hyperlegible,Helvetica,sans-serif
}

h1,h2 {
    margin: 0;
    padding: 0 10px;
}

h1 {
    font-family: cinzel decorative,Georgia,times new roman,Times,serif;
    font-size: var(--fs-banner);
}

h2 {
    padding-bottom: .4em;
    font-size: var(--fs-sub-banner);
}

h3 {
    font-size: var(--fs-navigationHeading);
    margin-top: var(--fs-navigationHeading);
}

/* the following styles are largely taken from the NHS design system */
details{
    width: min(600px, 90vw);
    margin: 1.2rem auto 1rem;
    border-left: 3px solid transparent;
}

details[open]{
    border-left: 3px solid var(--c-nonContentElements);
}

details p{
    padding-left: 2rem;
}

summary>h3, summary>h4{
    display: contents;
}



summary {
    color: var(--c-interactive);
    cursor: pointer;
    text-decoration: underline;
    padding-left: 0.5rem;
}

summary:before {
    bottom: 0;
    content: '';
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    border-width: 7px 0 7px 12.124px;
    border-left-color: inherit;
}

summary:focus, a:focus:not([class]), a.skip-link:focus, a.breadcrumb__backlink:focus{
    background-color: var(--c-highlight);
    fill:  var(--c-background);
    color: var(--c-background);
    outline: 4px solid transparent;
    text-decoration: none;
}

details>summary:hover, a:hover:not([class]), a.skip-link:hover, a.breadcrumb__backlink:hover{
    text-decoration-line: none;
    color: var(--c-highlight);
}

summary:focus:hover, a:focus:hover:not([class]), a.skip-link:focus:hover, a.breadcrumb__backlink:focus:hover{
    color: var(--c-background);
    text-decoration-line: underline;
}

details[open]>summary:before {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
    border-width: 12.124px 7px 0 7px;
    border-top-color: inherit
}

summary::-webkit-details-marker {
    display: none
}

summary:before {
    display: none !important
}

main h4{ /*allow extra space before h3 on the about page*/
    margin-top: 0rem;
}

main h3, main h4 {
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--c-banner-text);
    font-family: Georgia,times new roman,Times,serif;
}

Main p{
    padding-left: 1.5rem;
    padding-right: 5px;
    margin-top: 0.5rem;
    margin-bottom: var(--fs-navigationHeading);
}

form {
    margin: 1.4rem auto;
    width: 100%;
    max-width: 250px;
    position: relative;
}

input{
    width: 100%;
    border: 2px solid var(--c-interactive);
    background-color: var(--c-banner);
    color: var(--c-highlight);
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
}

label {
    font-family: Georgia,times new roman,Times,serif;
    font-weight: 500;
}

button.dictionarySearch {
    width: 40px;
}

button {
    border: 1px solid var(--c-interactive);
    background: var(--c-interactive);
    text-align: center;
    color: var(--c-background);
    cursor: pointer;
}

.searchBarContainer {
    display: flex;
    margin: 0 10px 10px;
}

span.keepTogether {
    white-space: nowrap;
}

input, button, input:-webkit-autofill::first-line {
    font-size: var(--fs-navigationContents);
    padding: 5px;
}

button:hover  {
    background: var(--c-highlight);
}

button:focus  {
    border-color: var(--c-highlight);
    outline: 3px solid var(--c-highlight);
    z-index: 100;
}
button:hover:focus {
    background: var(--c-highlight);
    border-color: var(--c-highlight);
    outline: 3px solid var(--c-highlight);
    
}
input:-webkit-autofill:focus,
input:focus{
    outline: 2px solid var(--c-highlight);
    border-color: var(--c-highlight);
    z-index: 100;
}

div.dictionaryEntryHeader {
    display: flex;
    justify-content: space-around;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    align-items: flex-end;
}

div.dictionaryEntryHeader>form {
    margin: 2px 0 2px auto;
}

@media only screen and (max-width: 599px) {
    div.dictionaryEntryHeader>form {
        margin: 2px auto 2px auto;
    }
}

div.dictionaryEntryHeader>h3 {
    margin: 1rem auto 0.4rem 0;
    padding-right: 1rem;
    padding-left:16px;
}

h4.dictionarySectionHead {
    text-decoration: underline;
    padding-left: 16px;
}

.wordDefinitionHelp {
    font-size: var(--fs-smallText);
    font-style: italic;
}

div.collectionSummary>h3, div.collectionSummary>p, div.blogArticle>h3, div.blogArticle>p{
    margin: 0.4rem 0;
}

div.blogIntro {
    display: inline-flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: flex-end;
}


ol {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 1em
}

ol#poemBody ~ p {
    font-style: italic;
    font-family: georgia;
    font-size: calc(var(--fs-body)*0.8);
    margin-bottom: 0;
}

li {
    padding: .5em 0 0;
    page-break-inside: avoid
}

li.pl{ /*i.e. pl = poem line*/
    page-break-after: avoid;
    counter-increment: pl;
    display: flex;
    justify-content: space-between;
    padding-left: 2em;
    padding-right: 0.3em;
    text-indent: -2em;    /* Hanging indent for continuation lines */
}


li.pl:nth-of-type(5n)::after, li.pl:first-of-type::after{ /*i.e. 1st and every 5th poem line*/
    content: counter(pl);
    float: right;
    
    font-family: Courier;
    padding-top: calc(var(--fs-body)*0.1);
    font-size: calc(var(--fs-body)*0.8);
    padding-left: 3em; /* To prevent overlap with poetry line */
    text-align: right; /* tested up to 999 lines for overlap with text - might need rework if poems start getting above 1,000!*/
}

li.lastLineOfStanza{
    page-break-after: auto;
}

li.lastStanzaOfPart{
    padding-bottom: 2em; 
    margin-bottom: 2em;
    border-bottom: 1px solid var(--c-nonContentElements);
}

li.pl:last-of-type{ /*i.e. poem line*/
    border-bottom: none;
    margin-bottom: 0;
}

a{
    color: var(--c-interactive);
}

a.callToAction {
    display: block;
    background-color: var(--c-interactive);
    color: var(--c-background);
    padding: 0.5rem;
    width: fit-content;
    margin-right: 0;
    margin-left: auto;
    bottom: 0.5em;
    right: 0.5em;
    font-weight: 600;
    position: absolute;
    text-decoration: none;
    outline: none;
    border: 3px solid var(--c-background);
}

a.callToAction:hover {
    background: var(--c-highlight);
    color: var(--c-background);
    border: 3px solid var(--c-interactive);
    text-decoration: underline
}

a.callToAction:focus {
    background: var(--c-highlight);
    color: var(--c-background);
}

a.callToAction:focus:hover {
    border: 3px solid var(--c-highlight);
}



nav ul{
    user-select: none;
}

nav ul, main ul{
    margin-top: 0;
    margin-bottom: 1.5em;
    padding-left: clamp(3em, 13vw, 4em);
}

nav ul>li, main ul>li{
    list-style: none;
}

nav ul>li:before, main ul>li:before{
    content: '\2014';
    position: absolute;
    margin-left: clamp(-32px, -6vw, -24px);
}

div.collectionSummary, div.blogArticle{
    margin: 1em;
    box-shadow: var(--c-banner) 0 0 10px;
    border: 2px solid var(--c-nonContentElements);
    padding: 0.1em 0.5em 0.2rem 0.5em;
    max-width: 85%;
    /* max-height: 10rem; */
}

.navNext{
    text-align: right;
}

.navPrev{
    text-align: left;
    
}
.navPrev>*, .navNext>*{
    padding: 0 10px;
}

.ordinalNav_Date {
    font-size: var(--fs-smallText)
}

div.callToAction {
    position: relative;
    padding-bottom: 3.5rem;
}

div.collectionSummary>h3>a {
    font-family: Georgia,times new roman,Times,serif;
    font-size: var(--fs-navigationHeading);
}

div.horizontalRule{ /* This puts a hidden input containing underscores, 
                        acting as the horizontal rule for users who 
                        copy and paste from the browser into another application */
    height: 1px;
    width: 1px;
    color: var(--c-text);
    border: none;
    overflow: hidden;
}

div.rhymeWord-container{
    justify-content: space-around;
    display: inline-flex;
    flex-wrap: wrap;
    margin-left: min(10vw, 5%);
    margin-right: min(10vw, 5%);
    width: 90%;
    margin-bottom: 1rem;
}

div.rhymeWord-container > div {
    flex-basis: clamp(130px, 20vw, 150px);
    padding: 4px 0;
}

@media print
{    
    nav {
        display: none !important;
    }
}

/*===============================
HAMBURGER MENU STYLING
from https://unused-css.com/blog/css-only-hamburger-menu/
/*===============================*/



.hamburger-container {
    width: 28px;
    left: var(--width-banner);
    display:  flex;
    align-items: center;
    border: 2px solid var(--c-interactive);
}
  
/* We don't need the checkbox to be visible, but we can't set it to display: none because this will break keyboard navigation. Instead set the opacity to 0 and the position to absolute so it doesn't push the rest of the content down */
.hamburger-container .checkbox {
    opacity: 0;
    position: absolute;
}

/* Show an outline when the hamburger is selected using the keyboard. Older browsers don't support :focus-visible, so we will just use :focus here. */
.hamburger-container .checkbox:focus ~ .hamburger {
    background-color: var(--c-highlight);
    outline: 3px solid var(--c-highlight);
}

.hamburger-container .checkbox:hover ~ .hamburger {
    background-color: var(--c-highlight);
    outline-width:5px;
}

/* Hide any focusable elements in the drawer by default to aid keyboard navigation. We use visibility so it makes the elements unfocusable, but doesn't affect the layout. We can also add a "transition" to visibility, which will make it show instantly when we open the drawer, but take half a second to hide it when we close the drawer. */
.hamburger-container .drawer a,
.hamburger-container .drawer button,
.hamburger-container .drawer input{
    visibility: hidden;
}

/* Make the focusable elements in the drawer visible when it is open. */
.hamburger-container .checkbox:checked ~ .drawer a,
.hamburger-container .checkbox:checked ~ .drawer button,
.hamburger-container .checkbox:checked ~ .drawer input{
    visibility: visible;
}

div#hamburgerPageBlocker {
    width: 100%;
    height: 100%;
    position: fixed;
    max-height: 0;
    transition: opacity 0.5s, max-height 0s 0.5s; 
    opacity: 0;
    top: 0;
    left: 0;
    z-index:1100;
    background-color: #14181c;
}

.hamburger-container .checkbox:checked ~ div#hamburgerPageBlocker {
    opacity: 0.7;
    max-height: 100vh;
    transition: opacity 0.5s, max-height 0s;
}

.hamburger-container .checkbox:checked ~ .drawer {
    transform: translateX(0%) 
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(1) {
    transform: translateY(7.7px) rotate(45deg);
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(2) {
    opacity: 0;
}

.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(3) {
    transform: translateY(-8.4px) rotate(-45deg);
}

.hamburger {
    width: 20px;
    height: 18px;
    position: relative;
    display: block;
    transition: transform 0.5s ease;
    z-index: 2000;
    cursor: pointer;    
    padding: 5px 4px 6px 4px;
    background-color: var(--c-interactive);
}

.hamburger:hover {
    background-color: var(--c-highlight);
}
  
.hamburger .slice{
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--c-background);
    transition: all 0.5s ease;
    font-size: 0;
}

.hamburger .slice:not(:first-child) {
    margin-top: 5px;
}

.drawer {
    position: fixed;

    top: 0;
    right: 0;z-index: 1500;
    width: max-content;
    padding: 70px 70px 120px 120px;
    background: black;
    transform: translateY(-100%) translateX(100%);
    transition: transform 0.5s ease;
    border-bottom: 3px solid var(--c-nonContentElements);
    border-left: 3px solid var(--c-nonContentElements);
    box-shadow: var(--c-banner) 0 0 10p;
    border-bottom-left-radius: 30rem;
    border-top-left-radius: 10rem 7rem;
    border-bottom-right-radius: 7rem 10rem;}


.drawer .nav-list {
    padding: 0;
    list-style: none;
    margin-top: 30px;
    padding-left: 2.5rem;
}

.drawer .nav-list .nav-list-item {
    padding-bottom: 10px;
}

/* Make the hamburger menu drawer full-width on mobile */
@media (max-width: 400px) {
    .drawer {
        width: 100vw;
        left: 0;
        border-radius: 0;
        padding: 16px;
        transform: translateY(-100%);
    }
}