/***************************************/
/***************************************/
/* Requires CSS3 or greater            */
/* Classes designed to work with HTML5 */
/* Assumes Not Using Internet Explorer */
/***************************************/
/***************************************/

/***********************************************************************/
/* Comments containing "!!!" are to highlight styles that have browser */
/* specific behavior.                                                  */
/***********************************************************************/

/*********************/
/* Custom Properties */
/*********************/

/* sizes, common to "light" and "dark" color schemes */

body
{
    --border-width                                 : 1px;
    --border-radius-large                          : 6px;
    --border-radius-small                          : 4px;
    --border-radius-minimum                        : 4px;

    --popup-image-caption-padding                  : 3pt;
    --popup-image-padding                          : 9pt;
    --popup-image-margin                           : 1.5em;
    --popup-image-border-radius                    : calc(max(var(--border-radius-minimum), var(--border-radius-large) - var(--popup-image-padding) + var(--border-width)));
    --button-border-width                          : 1px;
    --button-hover-border-width                    : calc(var(--button-border-width) + 1px);
    --box-shadow-small                             : 5px;
    --box-shadow-small-blur-radius                 : var(--box-shadow-small);
    --box-shadow-large                             : 10px;
    --vertical-space-between-headers               : 3px;
    --animation-duration                           : 250ms;
    --animation-fade-in-grow-translateX            : 0px;
    --animation-fade-in-grow-translateY            : 0px;
    --animation-fade-in-grow-scale                 : 0;

    --img-thumbnail-border-width                   : var(--border-width);
    --img-thumbnail-padding                        : 5px;
    --img-thumbnail-margin-width                   : var(--box-shadow-small);
    --img-thumbnail-border-radius                  : calc(max(var(--border-radius-minimum), var(--border-radius-large) - var(--img-thumbnail-padding)));

    --framed-image-padding                         : 10px;
    --framed-image-border-radius                   : calc(max(var(--border-radius-minimum), var(--border-radius-large) - var(--framed-image-padding)));

    --thumb-width-max                              : 150px;
    --thumb-width-extra                            : calc(2 * (var(--img-thumbnail-border-width) + var(--img-thumbnail-padding) + var(--img-thumbnail-margin-width)));
}

/* "light" and "dark" color scheme */

body
{
    --accent-color-light                           : hsl(0, 100%, 33%);
    --accent-color-dark                            : hsl(0,  33%, 60%);
}

/* "light" color scheme */

:root
{
    color-scheme : light;
}

body
{
    color-scheme                                   : light;

    --main-background-color                        : white;
    --main-color                                   : black;

    --accent-color                                 : var(--accent-color-light);
    --accent-color-alt                             : color-mix(in srgb, var(--main-background-color), var(--accent-color) 35%);
    --accent-color-alt2                            : color-mix(in srgb, var(--main-background-color), var(--accent-color-alt) 12.5%);
    --border-color-dark                            : black;
    --border-color-light                           : LightGray;
    --border-color-light2                          : color-mix(in srgb, var(--main-background-color), var(--border-color-light) 12.5%);
    --box-shadow-color                             : color-mix(in srgb, black, transparent 50%);
    --image-background-color                       : white;
    --focus-visible-outline-color                  : var(--main-color);

    --header-background-color                      : var(--accent-color);
    --header-logo-brightness                       : 100%;
    --thumbnail-background-color                   : var(--image-background-color);
    --thumbnail-box-shadow-color                   : var(--box-shadow-color);
    --thumbnail-hover-color                        : var(--accent-color);
    --thumbnail-extra-text-border-color            : var(--border-color-light);
    --mark-color                                   : var(--accent-color);
    --link-color                                   : var(--accent-color);
    --link-external-image-url                      : url("images/externalLink.svg");
    --h2-background-color                          : var(--border-color-light);
    --h2-background-color2                         : var(--border-color-light2);
    --h2-text-shadow                               : none;
    --h2-alt-background-color                      : var(--accent-color-alt);
    --h2-alt-background-color2                     : var(--accent-color-alt2);
    --h3-h4-border-color                           : var(--h2-background-color);
    --h3-h4-border-color2                          : var(--h2-background-color2);
    --hr-color                                     : var(--accent-color);
    --popup-image-background-color                 : var(--image-background-color);
    --popup-image-box-shadow-color                 : var(--box-shadow-color);
    --popup-image-header-color                     : var(--main-color);
    --popup-image-toggle-nav-button-disabled-color : LightGray;
    --popup-image-caption-background-color         : var(--main-color);
    --popup-image-caption-color                    : var(--main-background-color);
    --popup-image-button-color                     : var(--popup-image-header-color);
    --popup-image-button-color-hover               : red;
    --framed-image-box-shadow-color                : var(--box-shadow-color);
    --framed-image-background-color                : var(--image-background-color);
    --error-message-border-color                   : var(--accent-color);
    --error-message-color                          : black;
    --error-message-background-color               : LightGray;

    --palm-image-background-color                  : white;
    --palm-image-border-color                      : var(--accent-color);
    --palm-image-box-shadow-color                  : var(--box-shadow-color);
    --palm-memo-color                              : var(--main-color);
    --palm-memo-background-color                   : var(--image-background-color);
}

/* "dark" color scheme */

:root.dark
{
    color-scheme : dark;
}

.dark body
{
    color-scheme                                   : dark;

    --main-background-color                        : hsl(0, 0%, 13%);
    --main-color                                   : hsl(0, 0%, 80%);

    --accent-color                                 : var(--accent-color-dark);
    --accent-color-alt                             : var(--accent-color);
    --accent-color-alt2                            : color-mix(in srgb, var(--main-background-color), var(--accent-color) 15%);
    --border-color-dark                            : black;
    --border-color-light                           : Gray;
    --border-color-light2                          : color-mix(in srgb, var(--main-background-color), var(--border-color-light) 15%);
    --box-shadow-color                             : color-mix(in srgb, black, transparent 50%);
    --image-background-color                       : var(--main-color);
    --focus-visible-outline-color                  : white;

    --header-background-color                      : var(--accent-color-light);
    --header-logo-brightness                       : 90%;
    --thumbnail-background-color                   : var(--image-background-color);
    --thumbnail-box-shadow-color                   : var(--box-shadow-color);
    --thumbnail-hover-color                        : var(--accent-color);
    --thumbnail-extra-text-border-color            : var(--border-color-light);
    --mark-color                                   : hsl(0, 0%, 87%);
    --link-color                                   : var(--accent-color);
    --link-external-image-url                      : url("images/externalLinkDark.svg");
    --h2-background-color                          : var(--border-color-light);
    --h2-background-color2                         : var(--border-color-light2);
    --h2-text-shadow                               : 0 0 3px black;
    --h2-alt-background-color                      : var(--accent-color-alt);
    --h2-alt-background-color2                     : var(--accent-color-alt2);
    --h3-h4-border-color                           : var(--h2-background-color);
    --h3-h4-border-color2                          : var(--h2-background-color2);
    --hr-color                                     : var(--accent-color);
    --popup-image-background-color                 : var(--image-background-color);
    --popup-image-box-shadow-color                 : var(--box-shadow-color);
    --popup-image-header-color                     : black;
    --popup-image-toggle-nav-button-disabled-color : DimGray;
    --popup-image-caption-background-color         : var(--main-background-color);
    --popup-image-caption-color                    : var(--main-color);
    --popup-image-button-color                     : var(--popup-image-header-color);
    --popup-image-button-color-hover               : red;
    --framed-image-box-shadow-color                : var(--box-shadow-color);
    --framed-image-background-color                : var(--image-background-color);
    --error-message-border-color                   : var(--accent-color);
    --error-message-color                          : black;
    --error-message-background-color               : DarkGray;

    --palm-image-background-color                  : white;
    --palm-image-border-color                      : var(--accent-color);
    --palm-image-box-shadow-color                  : var(--box-shadow-color);
    --palm-memo-color                              : black;
    --palm-memo-background-color                   : var(--image-background-color);
}

/*********/
/* Fonts */
/*********/

@font-face
{
    font-family  : "Carlito"; /* alternative to Calibri */
    src          : url("fonts/Carlito-Regular.ttf") format("truetype");
    font-style   : normal;
    font-weight  : normal;
    font-display : swap;
}

@font-face
{
    font-family  : "Carlito"; /* alternative to Calibri */
    src          : url("fonts/Carlito-Italic.ttf") format("truetype");
    font-style   : italic;
    font-weight  : normal;
    font-display : swap;
}

@font-face
{
    font-family  : "Carlito"; /* alternative to Calibri */
    src          : url("fonts/Carlito-Bold.ttf") format("truetype");
    font-style   : normal;
    font-weight  : bold;
    font-display : swap;
}

@font-face
{
    font-family  : "Carlito"; /* alternative to Calibri */
    src          : url("fonts/Carlito-BoldItalic.ttf") format("truetype");
    font-style   : italic;
    font-weight  : bold;
    font-display : swap;
}

/**********/
/* Common */
/**********/

:root
{
    overflow-x : auto;
    overflow-y : scroll;
}

body
{
    font-family              : Calibri, Carlito, Arial, Helvetica, Verdana, Sans-Serif;
    background-color         : var(--main-background-color);
    color                    : var(--main-color);
    accent-color             : var(--accent-color);
    margin                   : 0;
    padding-top              : 0;
    padding-right            : 1em;
    padding-bottom           : 1em;
    padding-left             : 1em;
    word-wrap                : break-word;
    -webkit-text-size-adjust : none; /* !!! prevent font resizing on iOS during rotate */
            text-size-adjust : initial;
}

h1, h2, h3, h4, h5, h6
{
    margin-bottom : 3pt;
    break-after   : avoid; /* doesen't work but hopefully in the future */
}

h1 { font-size: 2em;    } /* HTML5 CSS: 2em    */
h2 { font-size: 1.2em;  } /* HTML5 CSS: 1.5em  */
h3 { font-size: 1.1em;  } /* HTML5 CSS: 1.17em */
h4 { font-size: 1em;    } /* HTML5 CSS: 1em    */
h5 { font-size: 0.83em; } /* HTML5 CSS: 0.83em */
h6 { font-size: 0.67em; } /* HTML5 CSS: 0.67em */

h1
{
    text-align    : center;
    margin-bottom : 0.5em;
}

h2
{
    margin-top       : 0;
    margin-right     : -0.2em;
    margin-left      : -0.2em;
    padding-left     :  0.2em;
    padding-right    :  0.2em;
    text-shadow      : var(--h2-text-shadow);
    background-image : linear-gradient(to right, var(--h2-background-color), var(--h2-background-color2));
    border-radius    : var(--border-radius-small);
    z-index          : 1;
}

h2.alt
{
    background-image : linear-gradient(to right, var(--h2-alt-background-color), var(--h2-alt-background-color2));
}

section.sticky
{
    margin-top : 0.5em; /* to fix sticky h2 scrolling issues in some cases */
}

section.sticky h2
{
    position   : sticky;
    top        : var(--vertical-space-between-headers);
    box-shadow : 0 calc(0px - (2 * var(--vertical-space-between-headers))) var(--main-background-color), 0 var(--vertical-space-between-headers) var(--main-background-color); /* !!! extra at top due to some web browsers with scaling issues */
}

h3,
h4
{
    border-width        : 0;
    border-bottom-width : 2pt;
    border-bottom-style : solid;
    border-color        : var(--h3-h4-border-color);
    border-image        : linear-gradient(to right, var(--h3-h4-border-color), var(--h3-h4-border-color2));
    border-image-slice  : 1;
}

hr
{
    height           : 2pt;
    margin-right     : -0.2em;
    margin-left      : -0.2em;
    border-style     : solid;
    border-color     : var(--hr-color);
    border-width     : 1pt;
    background-color : var(--hr-color);
    border-radius    : var(--border-radius-small);
}

hr.tight
{
    margin-top    : 0;
    margin-bottom : 0;
}

span.emoji
{
    display   : inline-block;
    font-size : smaller;
}

span.emoji.flip
{
    transform : scale(-1, 1);
}

mark
{
    font-weight      : bold;
    font-variant     : small-caps;
    background-color : transparent;
    color            : var(--mark-color);
    text-shadow      : 0 0 0.5em;
}

code
{
    font-weight : bold;
}

ul
{
    padding-left : 1.2em;
}

form
{
    margin-top    : 1em;
    margin-bottom : 1em;
}

select
{
    font-size     : smaller;
    border-radius : var(--border-radius-small);
}

a[href^="http"]::after
{
    content      : var(--link-external-image-url);
    display      : inline-block;
    width        : 0.75em;
    height       : auto;
    padding-left : 1pt;
}

a:any-link
{
    color : var(--link-color);
}

a.emoji
{
    text-decoration : none;
    font-size       : smaller;
}

abbr
{
    text-decoration     : none; /* !!! for chromium-based browsers */
    border-bottom-width : 1px;
    border-bottom-style : dotted;
    cursor              : help;
}

img
{
    border : none;
}

img.plain
{
    display   : block;
    margin    : auto;
    height    : auto;
    max-width : 100%;
}

div.errorMessage
{
    padding          : 6pt;
    border-width     : 3px;
    border-style     : solid;
    text-align       : center;
    font-weight      : bold;
    color            : var(--error-message-color);
    border-color     : var(--error-message-border-color);
    border-radius    : var(--border-radius-large);
    background-color : var(--error-message-background-color);
    margin           : auto;
    margin-top       : 1em;
    margin-bottom    : 1em;
    max-width        : 90%;
}

span.nobr
{
    white-space : nowrap;
}

/* for small devices like iPhone #1 */
@media screen and (max-width: 760px)
{
    h1
    {
        font-size : 1.5em;
    }
}

/**********/
/* Header */
/**********/

body
{
    --header-logo-width  : 88px;
    --header-logo-height : 313px;

    margin-left : var(--header-logo-width);
}

header
{
    display             : grid;
    background-image    : url("images/headerBackground@2x.png"); /* downscaling to lower resolution looks better */
    background-size     : 456px 456px;
    background-color    : var(--header-background-color);
    left                : 0;
    top                 : 0;
    width               : var(--header-logo-width);
    height              : 100%;
    position            : fixed;
    z-index             : 10;
    -webkit-user-select : none;
    user-select         : none;
}

header div.logo
{
    background-image            : url("images/headerLogoLarge.svg");
    width                       : var(--header-logo-width);
    height                      : var(--header-logo-height);
    filter                      : brightness(var(--header-logo-brightness));
    cursor                      : pointer;
    -webkit-tap-highlight-color : transparent; /* !!! prevent the blue or gray highlight on iOS when tapping */
}

/* header: hamburger button */

header div.hamburgerButtonContainer
{
    --hamburger-button-bar-width              : 24px;
    --hamburger-button-bar-height             : 4px;
    --hamburger-button-bar-gap                : 4px;
    --hamburger-button-margin                 : 6px;
    --hamburger-button-side-length            : 36px;
    --hamburger-button-height                 : calc((var(--hamburger-button-bar-height) * 3) + (var(--hamburger-button-bar-gap) * 2));
    --hamburger-button-animation-duration     : 100ms;
    --hamburger-button-highlight-color        : rgb(252, 255, 166);
    
    --hamburger-menu-radio-button-side-length : 32px;
    --hamburger-menu-animation-duration       : calc(2 * var(--hamburger-button-animation-duration));
}

header div.hamburgerButtonContainer
{
    display       : unset !important;
    height        : var(--hamburger-button-side-length);
    align-self    : end;
    align-content : center;
    z-index       : 0;
}

header label.hamburgerButton
{
    display                     : flex;
    flex-direction              : column;
    gap                         : var(--hamburger-button-bar-gap);
    margin                      : var(--hamburger-button-margin);
    cursor                      : pointer;
    filter                      : brightness(var(--header-logo-brightness));
    -webkit-tap-highlight-color : transparent; /* !!! prevent the blue or gray highlight on iOS when tapping */
}

header label.hamburgerButton::before,
header label.hamburgerButton::after,
header label.hamburgerButton input
{
    content          : "";
    width            : var(--hamburger-button-bar-width);
    height           : var(--hamburger-button-bar-height);
    background-color : white;
    border-radius    : 9999px; /* give it a nice rounded edge */
    margin           : auto;
    box-shadow       : 0 0 0 1.5px color-mix(in srgb, transparent, black 40%);
}

header label.hamburgerButton input
{
    appearance     : none;
    outline        : none;
    pointer-events : none;
}

header label.hamburgerButton:has(input:focus-visible)::before,
header label.hamburgerButton:has(input:focus-visible)::after,
header label.hamburgerButton input:focus-visible
{
    box-shadow       : 0 0 0 1.5px black, 0 0 0 2.5px white;
    background-color : var(--hamburger-button-highlight-color);
}        

@media not (prefers-reduced-motion: reduce)
{
    header label.hamburgerButton::before,
    header label.hamburgerButton::after
    {
        transition : rotate    var(--hamburger-button-animation-duration) ease-in-out,
                     translate var(--hamburger-button-animation-duration) ease-in-out var(--hamburger-button-animation-duration);
    }

    header label.hamburgerButton input
    {
        transition     : opacity 0s ease-in-out var(--hamburger-button-animation-duration);
    }

    header label.hamburgerButton:has(input:checked)::before,
    header label.hamburgerButton:has(input:checked)::after
    {
        transition : rotate    var(--hamburger-button-animation-duration) ease-in-out var(--hamburger-button-animation-duration),
                     translate var(--hamburger-button-animation-duration) ease-in-out;
    }
}

@media not print
{
    header label.hamburgerButton:has(input:checked)::before
    {
        rotate    : 45deg;
        translate : 0 calc((var(--hamburger-button-height) - var(--hamburger-button-bar-height)) / 2);
    }

    header label.hamburgerButton input:checked
    {
        opacity : 0;
    }

    header label.hamburgerButton:has(input:checked)::after
    {
        rotate    : -45deg;
        translate : 0 calc((var(--hamburger-button-height) - var(--hamburger-button-bar-height)) / -2);
    }
}

/* header: hamburger menu */

header aside.hamburgerMenu
{
    transition      : opacity var(--hamburger-menu-animation-duration) ease-in-out, visibility var(--hamburger-menu-animation-duration) ease-in-out;
    opacity         : 0%;
    visibility      : hidden;
    position        : absolute;
    bottom          : calc(var(--hamburger-button-side-length) / 2);
    left            : calc(var(--header-logo-width) / 2);
    z-index         : -1;
    padding         : 1em;
    color           : white;
    backdrop-filter : brightness(33%) blur(3px);
    width           : calc(fit-content);
    height          : fit-content;
    outline         : 2px solid color-mix(in srgb, white, transparent 50%);
    border-radius   : var(--border-radius-large);
}

@media not print
{
    header label.hamburgerButton:has(input:checked) + aside.hamburgerMenu
    {
        opacity    : 100%;
        visibility : unset;
    }
}  

/* header: miscellaneous */

@media screen
{
    header div.logo:hover,
    header div.logo:focus-visible
    {
        background-position : 50% 0%;
        outline             : none;
    }

    header div.logo:active
    {
        background-position : 100% 0%;
    }
}

/* for 2x retina display screens */
@media screen and (min-resolution: 2dppx)
{
    header
    {
        background-image : url("images/headerBackground@2x.png");
    }
}

/* for 3x retina display screens */
@media screen and (min-resolution: 3dppx)
{
    header
    {
        background-image : url("images/headerBackground@3x.png");
    }
}

/* for 4x retina display screens */
@media screen and (min-resolution: 4dppx)
{
    header
    {
        background-image : url("images/headerBackground@4x.png");
    }
}

/* for small devices like iPhone #1 */
@media print, screen and (max-width: 760px)
{
    body
    {
        --header-logo-width  : 36px;
        --header-logo-height : 196px;
    }

    header div.logo
    {
        background-image : url("images/headerLogoSmall.svg");
    }
}

/* for printing and small devices like iPhone #2 */
@media print, screen and (max-width: 420px)
{
    body
    {
        --header-logo-width-rotated  : var(--header-logo-height);
        --header-logo-height-rotated : var(--header-logo-width);

        margin-left : 0;
        padding-top : var(--header-logo-height-rotated);
    }

    header
    {
        display               : grid;
        grid-template-rows    : var(--header-logo-height-rotated);
        grid-template-columns : var(--header-logo-width-rotated) 1fr;
        width                 : 100%;
        height                : var(--header-logo-height-rotated);
        box-shadow            : 0 var(--vertical-space-between-headers) var(--main-background-color);
    }
    
    header div.logo
    {
        transform-origin : top left;
        transform        : rotate(-90deg) translateX(-100%);
    }

    header div.hamburgerButtonContainer
    {
        grid-column  : 2;
        justify-self : end;
    }

    header aside.hamburgerMenu
    {
        top    : calc(var(--hamburger-button-side-length) / 2);
        left   : unset;
        right  : calc(var(--hamburger-button-side-length) / 2);
        bottom : unset;
    }

    section.sticky h2
    {
        top : calc(var(--header-logo-height-rotated) + var(--vertical-space-between-headers));
    }
}

@media print
{
    header
    {
        position      : static;
        border-radius : var(--border-radius-large);
    }

    section.sticky h2
    {
        position : unset;
    }
}

/* header: color scheme radio buttons */

header form#colorScheme
{
    margin : unset;
}

header form#colorScheme fieldset
{
    display         : inline-flex;
    grid-column-gap : 10px;
    border          : 2px solid;
    border-radius   : var(--border-radius-small);
    padding         : 10px;
}

header form#colorScheme input
{
    /* hides radio buttons and allows for keyboard navigation */
    position       : absolute;
    opacity        : 0;
    pointer-events : none;
}

header form#colorScheme input:checked + div
{
    outline       : 2px solid;
    border-radius : var(--border-radius-small);
}

header form#colorScheme input:focus-visible + div
{
    box-shadow : 0 0 2px 5px var(--hamburger-button-highlight-color);
}

header form#colorScheme input + div
{
    cursor              : pointer;
    background-size     : var(--hamburger-menu-radio-button-side-length) var(--hamburger-menu-radio-button-side-length);
    background-position : center;
    background-repeat   : no-repeat;
    width               : var(--hamburger-menu-radio-button-side-length);
    height              : var(--hamburger-menu-radio-button-side-length);
    padding             : 2px
}

header form#colorScheme input#system + div
{
    background-image : url("images/hamburgerMenuColorSchemeRadioIconSystem.svg");
}

header form#colorScheme input#light + div
{
    background-image : url("images/hamburgerMenuColorSchemeRadioIconLight.svg");
}

header form#colorScheme input#dark + div
{
    background-image : url("images/hamburgerMenuColorSchemeRadioIconDark.svg");
}

/**********/
/* Footer */
/**********/

footer
{
    margin-top : 1em; /* for space above when printing */
}

footer div.links
{
    display               : grid;
    grid-template-columns : 1fr 1fr;
    column-gap            : 1em;
    row-gap               : 0.5em;
    padding-top           :  0.2em;
    padding-right         :  0.2em;
    padding-left          :  0.2em;
    margin-right          : -0.2em;
    margin-left           : -0.2em;
}

footer div.links div.left
{
    grid-column : 1;
    text-align  : left;
}

footer div.links div.right
{
    grid-column : 2;
    text-align  : right;
}

/* for small devices like iPhone #1 */
@media screen and (max-width: 760px)
{
    footer div.links
    {
        grid-template-columns : 1fr;
        grid-template-rows    : auto;
    }

    footer div.links div.left
    {
        text-align  : center;
        grid-column : 1;
        grid-row    : auto;
    }

    footer div.links div.right
    {
        text-align  : center;
        grid-column : 1;
        grid-row    : auto;
    }
}

/****************/
/* Framed Image */
/****************/

figure.framedImage
{
    text-align     : center;
    padding-top    : 1em;
    padding-bottom : 1em;
    margin         : 0;
}

figure.framedImage div.imageFrame
{
    display          : inline-block;
    border-width     : var(--border-width);
    border-style     : solid;
    border-color     : var(--border-color-dark);
    border-radius    : var(--border-radius-large);
    background-color : var(--framed-image-background-color);
    padding          : var(--framed-image-padding);
    margin-bottom    : 5px;
    box-shadow       : var(--box-shadow-small) var(--box-shadow-small) var(--box-shadow-small-blur-radius) var(--framed-image-box-shadow-color);
}

figure.framedImage img
{
    display       : block;
    border-radius : var(--framed-image-border-radius);
    height        : auto;
    max-width     : 100%;
}

figure.framedImage div.imageFrame.noFrame,
figure.framedImage div.imageFrame.noFrame img
{
    border        : none;
    border-radius : 0;
    padding       : 0;
}

/***************/
/* Popup Image */
/***************/

div.backgroundOverlay
{
    visibility         : hidden;
    position           : fixed;
    left               : 0;
    top                : 0;
    width              : 100%;
    height             : 150%;
    z-index            : 70;
    animation-duration : var(--animation-duration);
    animation-name     : none;
    backdrop-filter    : grayscale(100%) brightness(33%) blur(3px);
}

@keyframes bofadeIn
{
    from { backdrop-filter : none; }
}

@keyframes bofadeOut
{
    to { backdrop-filter : none; }
}

div.popupImageAnimation
{
    width               : 100%;
    height              : 100dvh; /* !!! for dynamic viewport height in iOS */
    position            : fixed;
    top                 : 0;
    left                : 0;
    visibility          : hidden;
    opacity             : 1;
    z-index             : 80;
    display             : flex !important;
    align-items         : center;
    justify-content     : center;
    animation-duration  : var(--animation-duration);
    animation-name      : none;
    animation-fill-mode : forwards;
}

@keyframes fadeIn
{
    0%
    {
        transform : translate(var(--animation-fade-in-grow-translateX), var(--animation-fade-in-grow-translateY)) translate(-50%, -50%) scale(var(--animation-fade-in-grow-scale));
        opacity   : 0;
    }
    10%
    {
        transform : translate(var(--animation-fade-in-grow-translateX), var(--animation-fade-in-grow-translateY)) translate(-50%, -50%) scale(var(--animation-fade-in-grow-scale));
        opacity   : 1;
    }
    100%
    {
        transform : translate(0, 0) translate(0, 0) scale(1);
        opacity   : 1;
    }
}

@keyframes fadeOut
{
    from
    {
        transform : scale(1);
        opacity   : 1;
    }
    to
    {
        transform : scale(0);
        opacity   : 0.25;
    }
}

@keyframes recenter
{
    to { left : 0; }
}

@keyframes slideOutToLeft
{
    to { left : -100%; }
}

@keyframes slideOutToRight
{
    to { left : 100%; }
}

@keyframes slideInFromLeft
{
    from { left : -100%; }
    to   { left : 0;     }
}

@keyframes slideInFromRight
{
    from { left : 100%; }
    to   { left : 0;    }
}

@media (prefers-reduced-motion: reduce)
{
    @keyframes fadeIn
    {
        from { opacity : 0; }
        to   { opacity : 1; }
    }

    @keyframes fadeOut
    {
        from { opacity : 1; }
        to   { opacity : 0; }
    }

    @keyframes recenter
    {
        to { left : 0; }
    }

    @keyframes slideOutToLeft
    {
        from { opacity : 1; }
        to   { opacity : 0; }
    }

    @keyframes slideOutToRight
    {
        from { opacity : 1; }
        to   { opacity : 0; }
    }

    @keyframes slideInFromLeft
    {
        from
        {
            opacity : 0;
            left    : 0;
        }
        to
        {
            opacity : 1;
            left    : 0;
        }
    }

    @keyframes slideInFromRight
    {
        from
        {
            opacity : 0;
            left    : 0;
        }
        to
        {
            opacity : 1;
            left    : 0;
        }
    }
}

div.popupImage
{
    /* custom properties */
    --popup-image-header-height  : 0px; /* set in JavaScript */
    --popup-image-caption-height : 0px; /* set in JavaScript */
    --popup-image-canvas-width   : 0px; /* set in JavaScript */
}

div.popupImage
{
    background-color    : var(--popup-image-background-color);
    text-align          : center;
    padding             : 0;
    margin              : var(--popup-image-margin);
    border-width        : var(--border-width);
    border-style        : solid;
    border-color        : var(--border-color-dark);
    border-radius       : var(--border-radius-large);
    cursor              : default;
    box-shadow          : 0 0 var(--box-shadow-large) calc(var(--box-shadow-large) / 2) var(--popup-image-box-shadow-color);
    -webkit-user-select : none;
            user-select : none;
}

div.popupImageFrame
{
    padding     : var(--popup-image-padding);
    padding-top : 0;
    line-height : 0;
}

div.popupImageHeader
{
    display         : flex;
    justify-content : space-between;
    padding-top     : 6pt;
    padding-right   : 0;
    padding-bottom  : 6pt;
    padding-left    : 0;
    font-weight     : bold;
    white-space     : nowrap;
    text-align      : right;
    line-height     : normal;
    width           : var(--popup-image-canvas-width);
}

div.popupImageCopyright
{
    margin-top    : 2px;
    color         : var(--popup-image-header-color);
    overflow      : hidden;
    text-overflow : ellipsis;
    line-height   : 1.2em; /* to prevent emjoi from adjusting the height */
}

div.popupImageCopyright.loading::after
{
    content : " ⏳"; /* hourglass */
}

div.popupImageToggleNavButton,
div.popupImageCloseButton
{
    color         : var(--popup-image-button-color);
    text-align    : center;
    display       : inline-block;
    cursor        : pointer;
    box-shadow    : 0 0 0 var(--button-border-width) var(--border-color-dark);
    padding-left  : 6pt;
    padding-right : 6pt;
    margin-top    : 2px;
    margin-right  : var(--button-border-width);
    margin-bottom : 2px;
    margin-left   : 6pt;
    border-radius : var(--border-radius-small);
}

div.popupImageToggleNavButton::before
{
    content : "< >";
}

div.popupImageToggleNavButton.disabled
{
    color : var(--popup-image-toggle-nav-button-disabled-color);
}

div.popupImageCloseButton
{
    width : 6pt;
}

div.popupImageCloseButton::before
{
    content : "\00d7"; /* &times; */
}

@media screen and (pointer: fine)
{
    div.popupImageToggleNavButton:hover
    {
        box-shadow : 0 0 0 var(--button-hover-border-width) var(--border-color-dark);
    }

    div.popupImageToggleNavButton:active
    {
        box-shadow : inset 0 0 0 var(--button-border-width) var(--border-color-dark), 0 0 0 var(--button-border-width) var(--border-color-dark);
    }

    div.popupImageCloseButton:hover
    {
        color      : var(--popup-image-button-color-hover);
        box-shadow : 0 0 0 var(--button-hover-border-width) var(--popup-image-button-color-hover);
    }

    div.popupImageCloseButton:active
    {
        color      : var(--popup-image-button-color-hover);
        box-shadow : inset 0 0 0 var(--button-border-width) var(--popup-image-button-color-hover), 0 0 0 var(--button-border-width) var(--popup-image-button-color-hover);
    }

    div.popupImageCloseButton:active::before
    {
        content : "\2022"; /* &bull; */
    }
}

div.popupImageCanvasAndNav
{
    position : relative;
}

canvas.popupImageCanvas
{
    max-width     : calc(100vw - (2 * (var(--popup-image-margin) + var(--border-width) + var(--popup-image-padding) + var(--border-width))));
    max-height    : calc(100dvh - (2 * (var(--popup-image-margin) + var(--border-width) + var(--border-width))) - var(--popup-image-padding) - var(--popup-image-header-height) - var(--popup-image-caption-height));
    border-width  : var(--border-width);
    border-style  : solid;
    border-radius : var(--popup-image-border-radius);
    border-color  : var(--border-color-dark);
    box-shadow    : inset 0 0 0 2px var(--border-color-dark); /* keep white from showing through */
    cursor        : grab;
    touch-action  : none;
    display       : block; /* !!! to prevent space below in some cases (iOS) */
}

canvas.popupImageCanvas:active
{
    cursor : grabbing;
}

div.popupImageNavPrev,
div.popupImageNavNext
{
    position         : absolute;
    background-image : url("images/popupImagePrevNextImage.svg");
    background-size  : 96px 64px;
    opacity          : 0.4;
    width            : 32px;
    height           : 64px;
    top              : 50%;
    padding          : 0;
    margin           : 0;
    margin-left      : 0.5em;
    margin-right     : 0.5em;
    cursor           : pointer;
    transform        : translate(0, -50%);
}

div.popupImageNavPrev
{
    left : 0;
}

div.popupImageNavNext
{
    right     : 0;
    transform : translate(0, -50%) scaleX(-1);
}

div.popupImageNavPrev.disabled,
div.popupImageNavNext.disabled
{
    display : none;
}

@media screen and (pointer: fine)
{
    div.popupImageNavPrev:hover,
    div.popupImageNavNext:hover
    {
        background-position : -100% 0%;
        opacity             : 1.0;
    }

    div.popupImageNavPrev:active,
    div.popupImageNavNext:active
    {
        background-position : -200% 0%;
    }
}

div.popupImageCaption
{
    background-color : var(--popup-image-caption-background-color);
    color            : var(--popup-image-caption-color);
    padding-top      : var(--popup-image-caption-padding);
    padding-right    : var(--popup-image-padding);
    padding-bottom   : var(--popup-image-caption-padding);
    padding-left     : var(--popup-image-padding);
    border-radius    : 0 0 var(--border-radius-large) var(--border-radius-large);
    box-shadow       : inset 0 0 0 6px var(--popup-image-caption-background-color), 0 0 0 var(--border-width) var(--popup-image-caption-background-color); /* keep white from showing through */
}

div.popupImageCaption:has(div.popupImageCaptionText:empty)
{
    display : none;
}

div.popupImageCaptionText
{
    line-height : 1.2em;
    max-height  : calc(8 * 1.2em); /* limit the text to 8 lines max */
    overflow    : hidden; /* limit the text that can be shown */
    width       : var(--popup-image-canvas-width);
}

/* for the basic popup image frame for small devices */
@media (max-width: 420px), (max-height: 500px)
{
    div.popupImageNavPrev,
    div.popupImageNavNext
    {
        display : none;
    }

    div.popupImageFrame
    {
        padding : var(--popup-image-padding);
    }

    div.popupImageHeader
    {
        display : none;
    }

    div.popupImageCaption
    {
        display : none;
    }

    canvas.popupImageCanvas
    {
        max-height : calc(100dvh - (2 * (var(--popup-image-margin) + var(--border-width) + var(--popup-image-padding) + var(--border-width))));
    }
}

@media print
{
    div.backgroundOverlay,
    div.popupImageAnimation
    {
        display : none !important;
    }
}

/**************************/
/* Thumbnail & Image Link */
/**************************/

div.thumbnails
{
    text-align    : center;
    margin-top    : 0.5em;
    margin-bottom : 0.5em;
}

div.thumbnail,
figure.imageLink
{
    /* custom properties */
    --thumb-width-real : calc(var(--thumb-width-max) + var(--thumb-width-extra));
}

div.thumbnail
{
    display               : grid;
    grid-template-columns : auto 1fr auto;
    grid-auto-flow        : dense;
    column-gap            : 1em;
    margin-left           : -0.2em;
    margin-right          : -0.2em;
    padding-top           : 1em;
    padding-right         : 0.2em;
    padding-bottom        : 1em;
    padding-left          : 0.2em;
    break-inside          : avoid;
}

div.thumbnail div.image
{
    width : var(--thumb-width-real);
}

div.thumbnail div.imageFrame,
figure.imageLink div.imageFrame
{
    display               : inline-block;
    border-width          : var(--img-thumbnail-border-width);
    border-style          : solid;
    border-color          : var(--border-color-dark);
    border-radius         : var(--border-radius-large);
    background-color      : var(--thumbnail-background-color);
    padding               : var(--img-thumbnail-padding);
    margin                : var(--img-thumbnail-margin-width);
    box-shadow            : var(--box-shadow-small) var(--box-shadow-small) var(--box-shadow-small-blur-radius) var(--thumbnail-box-shadow-color);
    transition            : box-shadow var(--animation-duration);
    -webkit-touch-callout : none; /* !!! prevent iOS devices from press and hold */
}

img.thumbnail
{
    display       : block;
    border-radius : var(--img-thumbnail-border-radius);
    cursor        : pointer;
}

@media screen
{
    div.thumbnail div.imageFrame:focus-visible,
    figure.imageLink div.imageFrame:focus-visible
    {
        outline        : 3px solid var(--focus-visible-outline-color);
        outline-offset : 4px;
    }

    div.thumbnail div.imageFrame:hover,
    figure.imageLink div.imageFrame:hover
    {
        filter     : none;
        box-shadow : 0 0 calc(2 * var(--box-shadow-small)) var(--box-shadow-small) var(--thumbnail-hover-color);
    }

    div.thumbnail div.imageFrame:active,
    figure.imageLink div.imageFrame:active
    {
        transform : scale(0.95);
    }
}

div.thumbnail:not(:has(div.text))
{
    display : inline-block;
    padding : 0.5em;
}

div.thumbnail:not(:has(div.text)) div.image:first-child
{
    text-align : center;
}

div.thumbnail div.image:first-child
{
    grid-column : 1;
    text-align  : right;
}

div.thumbnail div.image:not(:first-child)
{
    grid-column : 3;
    text-align  : left;
}

div.thumbnail div.text
{
    grid-column : 2;
    grid-row    : span 3;
}

div.thumbnail div.text p:first-child
{
    margin-top : 0;
}

div.thumbnail div.text p:last-child
{
    margin-bottom : 0;
}

div.thumbnail div.text div.title
{
    font-weight : bold;
    font-size   : larger;
}

div.thumbnail div.text div.date
{
    font-style : italic;
}

div.thumbnail div.text div.extraText
{
    margin-top       : 0.5em;
    padding-top      : 0.5em;
    border-width     : 0;
    border-top-width : 2pt;
    border-style     : solid;
    border-color     : var(--thumbnail-extra-text-border-color);
}

div.thumbnail div.text div.extraText ul
{
    margin-top    : 0;
    margin-bottom : 0;
}

figure.imageLink
{
    display       : inline-table;
    margin-top    : 0.5em;
    margin-right  : var(--popup-image-margin);
    margin-bottom : 0;
    margin-left   : var(--popup-image-margin);
    min-width     : var(--thumb-width-real);
}

figure.imageLink figcaption
{
    display        : table-caption;
    caption-side   : bottom;
    font-weight    : bold;
    font-size      : larger;
    text-align     : center;
    margin-bottom  : 0.5em;
}

/* for printing and not so wide displays */
@media screen and (max-width: 1000px), print and (max-width: 8.6in)
{
    div.thumbnail
    {
        grid-template-columns : auto 1fr !important;
    }

    div.thumbnail div.image:not(:first-child)
    {
        grid-column : 1;
        text-align  : right;
    }
}

/* for printing and small devices like iPhone #1 */
@media screen and (max-width: 760px), print and (max-width: 5.1in)
{
    div.thumbnail
    {
        grid-template-columns : 1fr !important;
    }

    div.thumbnail div.image:first-child,
    div.thumbnail div.image:not(:first-child)
    {
        grid-column : 1;
        text-align  : center;
        width       : auto !important;
    }

    div.thumbnail div.text
    {
        grid-column : 1;
    }

    div.thumbnail div.text div.title,
    div.thumbnail div.text div.date
    {
        text-align : center;
    }
}

/********************/
/* Palm OS Programs */
/********************/

figure.palm
{
    text-align : center;
    margin     : 0;
    margin-top : 0.5em;
}

figure.palm img
{
    float            : left;
    width            : 160px;
    height           : 160px;
    padding          : 2px;
    border-width     : 3px;
    border-style     : solid;
    border-color     : var(--palm-image-border-color);
    border-radius    : var(--border-radius-large);
    background-color : var(--palm-image-background-color);
    margin           : 5px;
    margin-left      : 0;
    box-shadow       : var(--box-shadow-small) var(--box-shadow-small) var(--box-shadow-small-blur-radius) var(--palm-image-box-shadow-color);
}

figure.palm figcaption
{
    text-align   : left;
    margin-left  : 170px;
    padding-left : 1em;
}

figure.palm h2
{
    margin-bottom : 0.25em;
}

figure.palm h3
{
    margin-top : 0.5em;
}

figure.palm h3:first-child
{
    margin-top : 0;
}

figure.palm ul
{
    margin-top    : 0;
    margin-bottom : 0;
}

/* for small devices like iPhone */
@media screen and (max-width: 760px), print and (max-width: 5.1in)
{
    figure.palm img
    {
        float : none;
    }

    figure.palm figcaption
    {
        margin  : 0;
        padding : 0;
    }
}

/********************/
/* Palm OS Articles */
/********************/

figure.article
{
    margin        : auto;
    padding-left  : 1em;
    padding-right : 1em;
    text-align    : center;
    break-inside  : avoid;
}

ul figure.article
{
    padding     : 1em;
    margin-left : -1.5em; /* must match padding-left in ul */
}

figure.article img
{
    padding          : 2px;
    border-width     : 3px;
    border-style     : solid;
    border-color     : var(--palm-image-border-color);
    border-radius    : var(--border-radius-large);
    background-color : var(--palm-image-background-color);
    box-shadow       : var(--box-shadow-small) var(--box-shadow-small) var(--box-shadow-small-blur-radius) var(--palm-image-box-shadow-color);
}

figure.article img.photo
{
    padding : 0;
}

figure.article figcaption
{
    display       : block;
    text-align    : center;
    margin-top    : 6pt;
    margin-left   : 4em;
    margin-bottom : 0;
    margin-right  : 4em;
    font-weight   : bold;
}

p.thirty
{
    text-align : center;
}

div.code
{
    display : block;
    margin  : 1em;
}

div.memo
{
    padding          : 6pt;
    border-width     : 3px;
    border-style     : solid;
    border-color     : var(--palm-image-border-color);
    border-radius    : var(--border-radius-large);
    color            : var(--palm-memo-color);
    background-color : var(--palm-memo-background-color);
    box-shadow       : var(--box-shadow-small) var(--box-shadow-small) var(--box-shadow-small-blur-radius) var(--palm-image-box-shadow-color);
    margin           : auto;
    width            : 32ch;
    max-width        : calc(90% - (2 * 1em)); /* 1em is body padding for right and left */
}