body {
    padding:0; margin:0;
    width:100%; height:100%;
    overflow:hidden;

    /* Layout Sizes */
    --navigation-row-height: 4rem;
    --navigation-element-min-width: var(--navigation-row-height);
    --spacing-gap:1rem;
    --list-min-width: 50vw;
    --card-max-width: 90vw;
    --card-min-width: 20rem;
    --card-min-height: 50vh;
    background-color: var(--page-background-color);

    font-family:"Trebuchet MS", sans-serif;
}
body.light-theme {
    --page-background-color: rgb(252,255,250);
    --tab-background-color: rgb(233, 241, 222);
    --high-contrast-background-color: rgb(105, 110, 97);
    --publish-alert-alert: rgb(255, 24, 24);
    --publish-button-accent: rgb(151, 196, 255);
    --edit-exit-alert: var(--publish-alert-alert);
    --edit-apply-alert: var(--publish-button-accent);
    --font-color: black;
    color: var(--font-color);
}
body.dark-theme {
    --page-background-color: rgb(80,80,80);
    --tab-background-color: rgb(105, 110, 97);
    --high-contrast-background-color: rgb(233, 241, 222);
    --publish-alert-alert: rgb(255, 24, 85);
    --publish-button-accent: rgb(169, 191, 255);
    --font-color: white;
    color: var(--font-color);
}
body.sansSerifFont {
    --page-font: "Trebuchet MS", sans-serif;
    font-family: "Trebuchet MS", sans-serif;
    letter-spacing:0;
    font-size:1.0rem;
}
body.serifFont {
    font-family:"Times New Roman", serif;
    letter-spacing:0.02rem;
    font-size:1.04rem;
}
div {
    box-sizing: border-box;
    margin:0; padding:0;
    flex-grow: 1;
    flex-shrink: 1;
}
.spacing-gap-sizer {
    width: var(--spacing-gap);
    height: var(--spacing-gap);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    border:0; margin:0; padding:0; outline:0;
    position: fixed; /* always on screen hopefully for always pixels rect */
    left:0; top:0;
}
.main-container {
    position: absolute;
    left:0; top:0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}
.navigation-row {
    width: 100%;
    height: var(--navigation-row-height);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    flex-grow:0;
}
.navigation-element {
    min-width: var(--navigation-element-min-width);
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-basis: var(--navigation-element-min-width);
}
@media (max-width:600px) {
    .navigation-element.logo {
        display: none;
    }
    .navigation-element.spacer {
        display: none;
    }
}
.navigation-element.logo {
    margin-left:var(--spacing-gap);
    max-width: var(--navigation-element-min-width);
}
.navigation-element.logo > img {
    width:100%;
    height:100%;
}
.navigation-element.spacer {
    flex-basis: var(--navigation-element-min-width);
}
.navigation-element.tab {
    background-color: var(--tab-background-color);
    filter: brightness(0.8);
    box-shadow: 0 0 0 0 var(--tab-background-color);
    transition: box-shadow 0.09s, brightness 0.09s;
    margin-top: var(--spacing-gap);
    margin-bottom: calc( var(--spacing-gap) / 2 );
    margin-left: calc( var(--spacing-gap) / 2 );
    margin-right: calc( var(--spacing-gap) / 2 );
    height: calc( var(--navigation-row-height) - ( var(--spacing-gap) * 1.5 ) );
    border-top-left-radius:var(--spacing-gap);
    border-top-right-radius:var(--spacing-gap);
    cursor: pointer;
}
.navigation-element.tab.active {
    box-shadow: 0 calc( var(--spacing-gap) / 2 ) 0 0 var(--tab-background-color);
    filter: brightness(1.0);
}
.navigation-element.publish {
    position: relative;
    margin-right: var(--spacing-gap);
}
.navigation-element.publish > .publish-notice {
    position: absolute;
    left:0; top:0;
    width: 100%;
    height: var(--spacing-gap);
    font-size: 0.67rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
}
.navigation-element.publish > .publish-button {
    position: absolute;
    left:0; top: var(--spacing-gap);
    text-align: center;
    height: calc( var(--navigation-row-height) - ( var(--spacing-gap) * 1.5 ) );
    width: 100%;
    border-radius: var(--spacing-gap);
    background-color: var(--publish-button-accent);
    border: 0; outline: 0; box-shadow: unset;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.navigation-element.publish > .publish-alert {
    position: absolute;
    right:0; top:calc( var(--spacing-gap) * 0.67);
    height: var(--spacing-gap);
    width: var(--spacing-gap);
    border-radius: var(--spacing-gap);
    background-color: var(--publish-alert-alert);
    box-shadow: 0 0 var(--spacing-gap) 0 var(--publish-alert-alert);
}

.panels {
    width: 100%;
    height: calc( 100% - var(--navigation-row-height) );
    position: relative;
}
.panel {
    position:absolute;
    left:var(--spacing-gap); top:0;
    width: calc( 100% - ( 2 * var(--spacing-gap) ) );
    height: calc( 100% - (2 * var(--spacing-gap) ) );
    border-radius: var(--spacing-gap);
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--tab-background-color);
}

@media (max-width:600px) {
    .panel {
        left: 0;
        width: 100%;
        border-top-left-radius: 0;
    }
}
.panel.active {
    display: flex;
}

.topper-expanded-logo {
    max-height: 5rem;
    display: block;
}
@media (orientation:landscape) {
    .topper-expanded-logo {
        display: none;
    }
}
.list {
    position: relative;
    min-width: var(--list-min-width);
    height: 100%;
    overflow-y: scroll;
    margin:var(--spacing-gap);
    padding:var(--spacing-gap);
    border-radius: 0;
    border-top-left-radius: var(--spacing-gap);
    border-bottom-left-radius: var(--spacing-gap);
    background-color: var(--page-background-color);
}
.list > .list-link {
    display: block;
    color: var(--font-color);
    background-color: var(--tab-background-color);
    border-radius: var(--spacing-gap);
    padding: calc( var(--spacing-gap) / 2 ) var(--spacing-gap);
    margin: 0;
    margin-bottom: calc( var(--spacing-gap) / 2 );
    text-align: center;
    cursor: pointer;
}
.list > .list-link.add {
    background-color: var(--publish-button-accent);
    color: var(--font-color);
    cursor: pointer;
}
.card-close {
    z-index:1000;
    position: absolute;
    left:0; top:0; bottom:0; right:0;
    width: 100vw; height:100vh;
    background-color: rgba(0,0,50,0.25);
    display: none;
}
.card-close.active {
    display: block;
}
.card {
    z-index: 2000;
    --card-background-color: var(--page-background-color);
    background-color: var(--card-background-color);
    --card-border-color: var(--high-contrast-background-color);
    position: absolute;
    margin: auto;
    top:0;
    min-width: var(--card-min-width);
    max-width: var(--card-max-width);
    height: var(--card-min-height);
    overflow-y: scroll;
    border: calc( var(--spacing-gap) / 2 ) solid var(--high-contrast-background-color);
    border-radius:0;
    border-bottom-left-radius: var(--spacing-gap);
    box-shadow: 0 0 calc( 2 * var(--spacing-gap) ) 0vw var(--high-contrast-background-color);
    display: none;
}
.card.active {
    display: block;
}
.card-line.hidden {
    display: none;
}
.card-line {
    box-sizing: border-box;
    width: calc( 100% - 2rem );
    margin: var(--spacing-gap);
    padding: var(--spacing-gap);
    position: relative;
    border: 1px solid var(--card-border-color);
    border-radius: calc( var(--spacing-gap) / 2 );
    display: block;
    --card-toggler-width: 4rem;
    --card-toggler-height: 2rem;
    --card-edit-button-width: 6rem;
    --card-edit-button-height: 2rem;
    min-height: calc( var(--card-edit-button-height) + ( var(--spacing-gap) * 2 ) );
}
.card-line.long-textblock {
    position: relative;
    height: fit-content;
    min-height: 30vh;
}
.card-line.long-textblock span {
    width: calc( 100% - ( var(--card-edit-button-width) + ( 2 * var(--spacing-gap) ) ) );
    white-space: pre-wrap;
    height: fit-content;
}
.card-line > i {
    position: absolute;
    left:0.5rem;
    top:-1rem;
    background-color: var(--card-background-color);
    margin:0;
    padding:0.25rem;
}
.card-line > span {
    flex-grow: 1;
}
.card-line > button {
    position: absolute;
    right: var(--spacing-gap);
    top: var(--spacing-gap);
    width: var(--card-edit-button-width);
    height: var(--card-edit-button-height);
    padding:var(--spacing-gap/2) var(--spacing-gap/4);
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.card-line > button > img {
    width:1rem; height:1rem;
}
.card-line > div.toggler {
    flex-grow: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    position: absolute;
    right: var(--spacing-gap);
    top: var(--spacing-gap);
    width: var(--card-toggler-width);
    height: var(--card-toggler-height);
    border-radius: 1rem;
    transition: box-shadow 0.3s;
    cursor: pointer;
}
.toggler.on {
    background-color: var(--publish-button-accent);
    box-shadow: 2rem 0 0 0 darkgray inset;
}
.toggler.off {
    background-color: var(--high-contrast-background-color);
    box-shadow: -2rem 0 0 0 darkgray inset;
}
.card-ui.close {
    position:absolute;
    width: calc(var(--spacing-gap)*4);
    height:calc(var(--spacing-gap)*4);
    border-radius: 0;
    border-top-left-radius: var(--spacing-gap);
    border-top-right-radius: var(--spacing-gap);
    background-color: var(--high-contrast-background-color);
    color: white;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index:3000;
}
.card-ui.close.active {
    display: flex;
}

.editor-container {
    z-index: 4000;
    position: absolute;
    left:0; top:0; right:0; bottom:0;
    width:100%;
    height:100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.25);
    display: none;
}
.editor-box {
    position: absolute;
    left:100px; top:100px;
    width:100px; height:100px;
    background-color: white;
    overflow: visible;
    box-shadow: 0 0 5rem 0 rgba(0,0,0,0.5);
}
.editor-exit {
    position:absolute;
    right:-0.5rem;
    top:-0.5rem;
    background-color: var(--edit-exit-alert);
    color: white;
    width:1rem;
    height:1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.editor-check {
    position:absolute;
    bottom:-1rem;
    left:0;
    background-color: var(--edit-apply-alert);
    color: white;
    width:100%;
    height:1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.editor-value {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    white-space: pre-wrap;
    overflow-y: scroll;
    border: 0;
    margin: 0; padding: 0;
    outline: none;
    font-family: inherit;
    resize: none;
}