:root{
    /*color variables*/
    --neutral-95:light-dark(#f8f8f8, #111);
    --neutral-90:light-dark(#f0f0f0, #161616);
    --neutral-80:light-dark(#dfdfdf, #202020);
    --neutral-60:light-dark(#aaa, #666);
    --neutral-50:#808080;
    --neutral-40:light-dark(#585858, #989898);
    --neutral-20:light-dark(#202020, #dfdfdf);

    /*special page background color which is always a bit darker than neutral 80, which is meant for the page foreground*/
    --neutral-bg:light-dark(#aaa, #111);
    /*lower contrast version*/
    --neutral-bg-low:light-dark(#d0d0d0, #161616);

    --vibrant-cool-20:light-dark(#428, #87d);
    --vibrant-cool-80:light-dark(#87d, #428);

    --vibrant-warm-20:light-dark(#804, #e78);
    --vibrant-warm-80:light-dark(#e78, #804);

    --vibrant-warmer-20:light-dark(#630,#fc9);
    --vibrant-warmer-80:light-dark(#fc9,#630);            

    /*size variable*/
    --standardSize:40px;
}

*{
    transition:all 0.25s;
    box-sizing:border-box;
}

html {
    color-scheme: light dark;
    background-color:var(--neutral-bg);
    overflow-x:hidden;
}

body{
    margin:0px auto;
    margin-top:var(--standardSize);
    margin-bottom:calc(var(--standardSize)*4);
    border-radius:calc(var(--standardSize)/2);
    overflow:hidden;
    max-width:calc(var(--standardSize)*30);
    font-family:Arial, Helvetica, sans-serif;
    background-color:var(--neutral-80);
    color:var(--neutral-20);
}
body *:first-child{
    margin-top:0px;
}
body *:last-child{
    margin-bottom:0px;
}

/*--------------------------building blocks of the page--------------------------*/

section.padded{
    padding:var(--standardSize);
    padding-bottom:0px;
}
section.padded:last-child{
    padding-bottom:var(--standardSize);
}

section.underlined::after{
    content:"";
    display:block;
    width:100%;
    margin-top:var(--standardSize);
    border-top:1px solid var(--neutral-60);
}

/*------quote or callout boxes------*/
blockquote{
    background:var(--neutral-95);
    display:inline-block;
    border:1px solid var(--neutral-bg);
    margin:0px;
    margin-bottom:var(--standardSize);
    padding:var(--standardSize);
    border-radius:calc(var(--standardSize)/4);
}

blockquote.caution{
    background: radial-gradient(circle at 0% 0%, var(--vibrant-warmer-80) 0%, var(--neutral-90) 40%, var(--neutral-95) 80%);
}

blockquote.warning{
    background: radial-gradient(circle at 0% 0%, var(--vibrant-warm-80) 0%, var(--neutral-90) 40%, var(--neutral-95) 80%);
    border-color:var(--vibrant-warm-20);
}

/*------options for captioned image------*/
figure{
    max-width:100%;
    width:fit-content;
    background-color:var(--neutral-95);
    border-radius:calc(var(--standardSize)/4);
    margin:0px;
    margin-bottom:var(--standardSize);
}

figure img{
    max-height:40vh;
    max-width:100%;
    object-fit:contain;
    border-radius:calc(var(--standardSize)/4);
}

figure.large{
    width:100%;
}
figure.large img{
    width:100%;
    max-height:none;
}

figcaption{
    color:var(--neutral-40);
    padding:calc(var(--standardSize)/4);
}

figure.float{
    float:right;
    max-width:50%;
    margin-left:var(--standardSize);
    margin-bottom:var(--standardSize);
}

/*------image sizes------*/
img.cover{
    width:100%;
    max-height:75vh;
    object-fit:cover;
}

img.large{
    max-height:70vh;
    max-width:100%;
    object-fit:contain;
    border-radius:calc(var(--standardSize)/4);
    overflow:hidden;
    margin-bottom:var(--standardSize); 
}

img.standard{
    display:block;
    max-height:40vh;
    max-width:100%;
    object-fit:contain;
    border-radius:calc(var(--standardSize)/4);
    overflow:hidden;
    margin-bottom:var(--standardSize);
}

img.cover:last-child,
img.large:last-child,
img.standard:last-child{
    margin-bottom:0px;
}

/*------option to float an image on its own with no caption------*/
img.float{
    float:right;
    max-height:40vh;
    max-width:50%;
    margin-left:var(--standardSize);
    margin-bottom:var(--standardSize);
    object-fit:contain;
    border-radius:calc(var(--standardSize)/4);
    overflow:hidden;
}


/*--------------------------formatting types of text--------------------------*/
h1,h2,h3,h4,h5,h6{
    text-wrap:balance;
    max-width:69ch;
    line-height:1.15;
    margin-top:0px;
    margin-bottom:1em;
}

p{
    line-height:1.5;
    text-wrap:balance;
    max-width:69ch;
    margin-top:0px;
    margin-bottom:1.5em;
}

li{
    line-height:1.5;
    text-wrap:balance;
    max-width:69ch;
    margin-bottom:0.5em;
}
ul,ol{
    padding-left:calc(var(--standardSize)/2);
}

a{
    color:var(--vibrant-cool-20);
}

@supports (text-wrap:pretty){
    h1,h2,h3,h4,h5,h6,p,li{
        text-wrap:pretty;
    }
}

.note{
    opacity:0.8;
    font-size:0.9em;
}


/*--------------------------Footer items--------------------------*/
.cervineOnlineTag{
    display:block;
    position:fixed;
    z-index:15;
    bottom:var(--standardSize);
    right:var(--standardSize);
    height:calc(var(--standardSize)*2);
    width:calc(var(--standardSize)*2);
    text-decoration:none;
    mix-blend-mode:luminosity;
}
.cervineOnlineTag img{
    width:calc(var(--standardSize)*2);
}


/*--------------------------Hover items--------------------------*/
@media (hover){
    a:hover{
        color:var(--vibrant-warmer-20);
    }
}


/*--------------------------Breakpoince--------------------------*/
@media only screen and (max-width:1200px){
    body{
        margin-top:0px;
        border-radius:0px;
        border:0px solid transparent;
    }
}

@media only screen and (max-width:600px){
    :root{  
        --standardSize:20px;
    }

    img.float,
    figure.float{
        max-width:100%;
        margin:0px;
        margin-bottom:var(--standardSize);
        float:none;
    }
}