:root{
    --sans-serif-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}


html {
    font-size:  14px;
}


body {
    background-color: oklab(0.98 -0.01 -0.01 /0.28);
    font: 1.2em var(--sans-serif-font-family);
}

header {
    display: flex;
    flex-direction: row;
    flex: 1;
}

h1 {
    position: absolute;
    top: 2rem;
    left: calc(100% - 75vw);
    text-align: center;
    font-family: 'Sonsie One', 'Arial Narrow', Arial, sans-serif;
    font-size: calc(100% - -3.75vw);
    color: #097FC8;
    text-shadow: 2px 2px #FFF;
}

h1 span {
    color: #4682b4;
}

/* h2, h3{
    font-family: 'Sonsie One', 'Arial Narrow', Arial, sans-serif;
} */

a {
    color: #333;
}

nav {
    position: absolute;
    top: calc(100% - 71px);
    width: 100%;
    max-width:1024px;
    opacity: 0.6;
    background-color: aliceblue;
    display: flex;
    height: 46px;
    flex-direction: column;
}

nav ul {
    display: flex;
    flex: 1;
    list-style: none;
}

nav ul li {
    flex: 1 0 auto;
    padding-inline: 5px;
}

nav ul li:last-child {
    flex:3;
}

blockquote {
    font: 1.25rem/1rem Arial;
    margin: 1px;
    color: #333;
}

main {
    display: flex; flex:1;
}

picture {
    width: inherit;
}

img {
    width: calc(100%  - 0vw );    
}

section {
    display: flex;flex-direction: column; align-items: center; flex: 1;
}

article {
    flex: 1;
    max-width: 1024px;
    width: calc(100% - 2vw);
}

details{
    margin-block: 1rem;
}

details summary {
    font-size: 1.2rem;
    cursor: pointer;
}

details summary h3 {
    display: inline;
}

details summary div.imgholder {
    float: right;
    
}

details p {
    margin-bottom: 0.5rem;
}

details summary::after{
    content: "+ read entire article";
}

details[open] summary::after{
    content: " ";
}

details[open] > button {
    content: "- view summary only ";
    border: 0;
    background-color: transparent;
    font-size: 1.2rem;
    cursor: pointer;
}

.spacer {
    flex: 0 1 auto; width: 10%;
}

.nav-spacer {
    flex: 2;
}

.contentArea {
    margin:  auto; 
}

.contentContainer {
    display: flex; flex-direction: column;
}

.header-container {
    /* flex: 1 0 auto; */
    position: relative;
    container-type: inline-size;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.footer-container {  
    position: relative;
    container-type: inline-size;
    margin: 0 auto;  
    display: flex;
    align-items: center;
    flex-direction: column;
}



.view-app {
    padding-bottom: 10px;
}


@media (max-width: 382px) {
    h1 {
        left: calc(100% - 80vw);
        top: 0.5rem;
    }

    nav ul li {
        flex: 1 0 auto;
        white-space: break-spaces;
        height: 45px;
        text-align: center;
        top: 4px;
        position: relative;
        left: -34px;
        font-size: 1.1rem;
        align-self: center;
    }

    nav ul {
        max-height: 22px;
        max-width: 50vw;
    }
    
}


@media (max-width: 520px) {
    h1 {
        top: 1rem;
        font-size: calc(100% - -2.75vw);
    }
}


@media (max-width: 620px){
    
    details summary div.imgholder {
        float: right;
        width: 40%;
    }
}

@media (min-width: 800px){
    h1 {
        left: calc(100% - 67vw);
        font-size: calc(100% - -3.25vw);
    }
}