:root {
    color-scheme: light dark;

    --group-background-color: rgb(242, 242, 247);
    --group-content-color: white;
    --group-section-text-color: rgb(128, 128, 134);
    --group-text-color: black;
    --header-separator-color: rgb(208, 208, 212);

    --link-color: rgb(0, 122, 255);

    --group-inset: 20px;
    --group-border-radius: 10px;
    --group-readable-area-width: min(800px, 100vw);


    /* Z-index Position */
    --z-index-main: 0;
    --z-index-section: 1;
    --z-index-section-content: 2;
    --z-index-cell-divider: 2;
    --z-index-cell: 3;
    --z-index-cell-content: 4;
}
@media (prefers-color-scheme: dark) {
    :root {
        --group-background-color: black;
        --group-content-color: rgb(28, 28, 30);
        --group-section-text-color: rgb(142, 142, 148);
        --group-text-color: white;
        --header-separator-color: rgb(44, 44, 48);
    }
}
@media only screen {
    :root {
        --group-inset-vertical: 10px;

        --group-newline: 100%;

        --font-size-content: 100%;
    }
}
@media only screen and (min-height: 480px) {
    :root {
        --group-inset-vertical: 20px;

        --group-newline: 100%;

        --font-size-content: 133%;
    }
}




html, body {
    margin: 0px;
    padding: 0px;

    background-color: var(--group-background-color);
}
body {

    background-color: var(--group-background-color);

    /* unselectable */
    
    /*
    cursor: default;
    user-select: none;
    -webkit-touch-callout: default;
    -webkit-user-select: none;


    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;*/
}





/* Content: unselectable */
.unselectable {
    cursor: default;

    user-select: center;
    /*-webkit-touch-callout: none;*/
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}
.selectableText {
    cursor: auto;
    
    user-select: all;
    -webkit-user-select: all;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

.selectableText.inline {
    display: inline;
}





/* NavigationBar */
header.navigationBar {
    margin: 0px;
    padding: 0px;
    
    background-color: var(--group-content-color);
}

/* NavigationBar: Border */
hr.navigationBar-border {
    margin: 0px;
    padding: 0px;

    height: 1px;
    border: 0px;

    background: var(--header-separator-color);
}

/* NavigationBar: Content */
div.navigationBar-content {
    margin: auto;

    padding-top: max(var(--group-inset-vertical), env(safe-area-inset-top));
    padding-bottom: var(--group-inset-vertical);
    padding-left: max(var(--group-inset), env(safe-area-inset-left));
    padding-right: max(var(--group-inset), env(safe-area-inset-right));

    max-width: var(--group-readable-area-width);
}

/* NavigationBar: Title */
h1.navigationBar-title {
    margin: 0px;
    text-align: center;
    font-family: Helvetica;
    color: var(--group-text-color);
}
@media only screen {
    h1.navigationBar-title {
        margin-left: calc(40% / 2);
        margin-right: calc(40% / 2);
        padding-top: 0px;
        font-size: 20px;
        text-align: center;
    }
}
@media only screen and (min-height: 480px) {
    h1.navigationBar-title {
        margin-left: 0px;
        margin-right: 0px;
        padding-top: calc(var(--group-inset) * 2);
        font-size: 40px;
        text-align: center;
    }
    h1.navigationBar-title.center {
        text-align: center;
    }
    h1.navigationBar-title.left {
        text-align: left;
    }
    h1.navigationBar-title.right {
        text-align: right;
    }
}

/* NavigationBar: Item */
a.navigationItem {
    display: inline-flex;
    flex-direction: row;
    align-items: center;

    font-family: Helvetica;
    font-size: 20px;
    color: var(--link-color);

    text-decoration: none;

    /*-webkit-tap-highlight-color: transparent;*/
}
@media (hover: hover) and (pointer: fine) {
    a.navigationItem:hover {
        margin: -5px;
        padding: 5px;
    
        color: white;
        border-radius: 5px;

        background-color: var(--link-color);
    }
}
a.navigationItem.left {
    float: left;
    text-align: left;
}
a.navigationItem.right {
    float: right;
    text-align: right;
}

/* NavigationBar: BackButton Image */
img.navigationItem-image {
    width: 20px; 
    height: 20px;
}
a.navigationItem img.navigationItem-image.selected {
    display: none;
}
a.navigationItem img.navigationItem-image.unselected {
    display: inherit;
}
@media (hover: hover) and (pointer: fine) {
    a.navigationItem:hover img.navigationItem-image.selected {
        display: inherit;
    }
    a.navigationItem:hover img.navigationItem-image.unselected {
        display: none;
    }
}




/* Main: Content */
main.content {
    max-width: var(--group-readable-area-width);

    /* insets top & bottom */
    margin-top: var(--group-inset-vertical);
    margin-bottom: max(var(--group-inset-vertical), env(safe-area-inset-bottom));


    /* insets: left & right */
    --width-safe: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
    --width-min: min(var(--width-safe), var(--group-readable-area-width));

    --inset-side: calc((100vw - var(--width-min)) / 2);

    margin-left: max(var(--group-inset), env(safe-area-inset-left), var(--inset-side));
    margin-right: max(var(--group-inset), env(safe-area-inset-right), var(--inset-side));
}





/* Section: Table */
section.table {
    display: flex;
    flex-direction: column;

    margin-bottom: 0px;
    padding-bottom: 0px;
}

/* Section: Content */
div.section-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    border-radius: var(--group-border-radius);

    background-color: var(--group-content-color);

    margin-bottom: 0px;
    padding-bottom: 0px;
}

/* Section: Header Title */
h4.section-header {
    margin-left: var(--group-inset);
    margin-top: var(--group-inset-vertical);
    margin-bottom: 10px;

    text-align: left;
    color: var(--group-section-text-color);
    font-family: Helvetica;
    font-weight: normal;
}

/* Section: Footer Title */
h5.section-footer {
    margin-left: var(--group-inset);
    margin-top: calc(var(--group-inset) / 2);
    margin-bottom: 0px;
    padding-bottom: 0px;

    text-align: left;
    color: var(--group-section-text-color);
    font-family: Helvetica;
    font-weight: normal;
}

/* Section: Breakline */
br.section-newline {
    line-height: var(--group-newline);
}

/* Section: Divider */
h2.section-divider {
    margin: var(--group-inset-vertical);
    text-align: center;
    color: var(--group-section-text-color);
    font-family: Helvetica;
}


hr.section-divider {
    margin: 0px;
    margin-top: var(--group-inset-vertical);
    margin-bottom: var(--group-inset-vertical);

    height: 1px;
    border: 0px;

    background: var(--group-section-text-color);
}





/* Cell */
div.cell {
    z-index: var(--z-index-cell);
}
@media (hover: hover) and (pointer: fine) {
    div.cell:hover {
        margin-top: -1px;
        padding-top: 1px;
    
        margin-bottom: -1px;
        padding-bottom: 1px;
    
        background-color: var(--group-content-color);
    }
}

/* Cell: Divider */
hr.cell-divider {
    z-index: var(--z-index-cell-divider);

    margin: 0px;
    margin-left: var(--group-inset);
    padding: 0px;

    height: 1px;
    border: 0px;

    background: var(--header-separator-color);
}





/* Cell-Content: Image */
img.cell {
    display: block;
    object-fit: contain;

    width: 100%;
    height: 100%;
    
    /*max-height: min(var(--group-readable-area-width), 80vh);*/

    border-radius: var(--group-border-radius);

    background-color: var(--group-content-color);
}
@media only screen {
    img.cell {
        max-height: 80vh;
    }
}
@media only screen and (min-height: 480px) {
    img.cell {
        max-height: 100vh;
    }
}




/* Cell-Content: Link */
a.cell {
    z-index: var(--z-index-cell-content);;

    display: block;

    margin: 0px;
    padding-left: var(--group-inset);
    padding-right: var(--group-inset);
    padding-top: var(--group-inset-vertical);
    padding-bottom: var(--group-inset-vertical);

    border-radius: var(--group-border-radius);

    text-align: left;
    text-decoration: none;
    font-size: var(--font-size-content);
    font-family: Helvetica;
    overflow: auto;
    overflow-wrap: break-word;

    color: var(--group-text-color);

    /*-webkit-tap-highlight-color: transparent;*/
}
@media (hover: hover) and (pointer: fine) {
    a.cell:hover {
        background-color: var(--link-color);
        color: white;
    }
}