:root {
    --body-margin: 8px;
    --header-bottom-margin: 0.25rem;
    --body-button-height: 2.5rem;

    /* Colors */
    --main-bg-color: black;
    --color-gray: #22335577;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-pale-canary: #ffff99;
    --color-pale-canary-alt: #c4c48f;
    --color-pale-canary-alt2: #aaaa80;
    --color-golden-tanoi: #ffcc66;
    --color-neon-carrot: #ff9933;
    --color-eggplant: #664466;
    --color-lilac: #cc99cc;
    --color-anakiwa: #99ccff;
    --color-mariner: #3366cc;
    --color-bahama-blue: #006699;
    --color-bahama-blue-alt: #567e92;
    --color-blue-bell: #9999cc;
    --color-melrose: #9999ff;
    --color-hopbush: #cc6699;
    --color-chestnut-rose: #cc6666;
    --color-orange-peel: #ff9966;
    --color-atomic-tangerine: #ff9900;
    --color-danub: #6688cc;
    --color-indigo: #4455bb;
    --color-lavender-purple: #9977aa;
    --color-cosmic: #774466;
    --color-red-damask: #dd6644;
    --color-medium-carmine: #aa5533;
    --color-bourbon: #bb6622;
    --color-sandy-brown: #ee9955;
    --color-periwinkle: #ccddff;
    --color-dodger-blue: #5599ff;
    --color-dodger-blue-alt: #3366ff;
    --color-blue: #0011ee;
    --color-navy-blue: #000088;
    --color-husk: #bbaa55;
    --color-pale-husk: #b9ae77;
    --color-rust: #bb4411;
    --color-tamarillo: #882211;
    --color-red-alert: #ff0000;
    --momentum-color: var(--color-dodger-blue);
    --threat-color: var(--color-hopbush);

    --color-command-division: #992222;
    --color-science-division: #446699;
    --color-operations-division: #aa8844;

    --color-ent-era: #4477aa;
    --color-tos-era: #bb9944;
    /* --color-tng-era: #BB1100; */
    --color-tng-era: var(--color-rust);


    --color-tan: #886644;
    --color-bourbon-2: #834c00;
    --color-blue-gray: #555577;
    --color-bahama-blue-dark: #004477;
    /* --color-dull-brown: #574029; */
    --color-dull-brown: #63492f;
    --color-husk-dark: #886600;
    --color-golden-tanoi-dark: #eebb55;

    /* here are some greener colors I added */
    --color-bahama-teal: #5fa3a3;
    --color-olive-husk: #8b9a5f;
    --color-mint-husk: #7aa67a;
    --color-danub-seafoam: #4c9f90;

    --nominal-digit-width: 0.28;
    --pt-font-size: 14;

    --color-pale-orange: #dbbd6b;
    --color-pale-anakiwa: #add6ff;
}

/* #region font faces */
@font-face {
    font-family: lcars;
    src: url("../fonts/lcars.ttf");
    /* src: url(Okuda.otf); */
    /* font-stretch: ultra-expanded; */
    /* font-stretch: ultra-expanded; */
}

@font-face {
    font-family: lcars-symbol;
    src: url("../fonts/lcars.ttf");
    unicode-range: U+f003;
}
/* #endregion font faces */



/* #region colors */

.pale-canary-alt-bg {
    background-color: var(--color-pale-canary-alt) !important;
}

.golden-tanoi-bg {
    background-color: var(--color-golden-tanoi) !important;
}

.lilac-bg {
    background-color: var(--color-lilac) !important;
}

.anakiwa-bg {
    background-color: var(--color-anakiwa) !important;
}

.melrose-bg {
    background-color: var(--color-melrose) !important;
}

.danub-bg {
    background-color: var(--color-danub) !important;
}

.husk-bg {
    background-color: var(--color-husk) !important;
}

/* #endregion colors */


/* #region primary containers */
body {
    background: var(--main-bg-color);
    color: #ffffff;
    font-family: lcars, Times, serif;
    font-size: 14pt;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;

    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    /* border: solid white; */
}

.page-header-frame {
    height: 4.1rem;
}

.body-row {
    display: flex;
    flex-direction: row;
    flex: none;
    overflow: auto;
}

/* Adjust the max-digits and/or font-size as needed to effect child nodes */
* {
    --numeric-auto-font-size: calc(var(--pt-font-size) * 1pt);
    --numeric-auto-width: calc(var(--nominal-digit-width) * var(--max-digits) * var(--pt-font-size)/10 * 1rem);
    box-sizing: border-box;
}
/* #endregion primary containers */



/* #region label and font styles */
.label {
    justify-content: flex-end;
    /* font-size: 100%; */
    text-transform: uppercase;
    display: inline;
}
/* #endregion label and font styles */



/* #region Buttons, buttons, buttons... */
.bar-button {
    position: relative;
    text-transform: uppercase;
    font-family: lcars, Times, serif;
    font-weight: lighter;
    font-size: 120%;
    color: var(--main-bg-color);
    text-align: right;
    cursor: pointer;

    height: 2.8rem;
    min-width: var(--sidebar-width);

    padding: 0;
    padding-right: 0.3rem;
    padding-left: 0.3rem;
    padding-top: 1.3rem;
    margin: 0;
    margin-bottom: 0.3rem;
    margin-right: 0.4rem;

    box-shadow: none;
    border: 0;
    border-radius: 0;
    flex: none;

    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
}

.body-button {
    position: relative;
    text-transform: uppercase;
    font-family: lcars, Times, serif;
    font-size: 16pt;
    color: var(--main-bg-color);
    text-align: right;
    line-height: 1.2rem;
    box-sizing: border-box;
    cursor: pointer;

    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    /* justify-self: stretch; */
    /* flex: 1 1 auto; */

    /* min-width: 6rem; */
    width: 8.5rem;
    height: var(--body-button-height);

    border: none;
    padding: 0;
    padding-right: 0.3rem;
    padding-left: 0.3rem;
    padding-bottom: 0.1rem;
    margin: 0;
    /* margin-bottom: 0.4rem;
    margin-right: 0.4rem; */
}

.bar-button,
.body-button {
    --brightness-shift: 1;
    --normal-brightness: 100%;
    --hover-brightness: 110%;
    --active-brightness: 120%;
    filter: brightness(calc(var(--normal-brightness) * var(--brightness-shift)));
    cursor: pointer;
}

.body-button > label,
.body-button > .label {
    flex: 1 1 auto;
}
button.body-button {
    background: coral;
}
.body-button.rounded {
    border-radius: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.body-button:focus {
    outline: none;
    filter: brightness(105%);
}


/* Button-like behaviors */
.bar-button:hover,
.body-button:hover {
    filter: brightness(calc(var(--hover-brightness) * var(--brightness-shift)));
}
.bar-button:active,
.body-button:active {
    filter: brightness(calc(var(--active-brightness) * var(--brightness-shift)));
}
/* #endregion Buttons, buttons, buttons... */




/* #region Bars */
.horizontal-bar {
    display: flex;
    flex-direction: row;
}
.sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-full-width);
}
.sidebar.left {
    align-items: flex-start;
    justify-self: flex-start;
}
.sidebar.right {
    align-items: flex-end;
    justify-self: flex-end;
}
.horizontal-bar,
.sidebar {
    --sidebar-width: 7.5rem;
    --corner-added-width: 2rem;
    --horizontal-bar-height-rem: 1.5;
    --corner-lip-height: 2rem;
    --corner-height: calc(var(--horizontal-bar-height-rem) * 1rem + var(--corner-lip-height));
    --corner-radius: 1.8rem;
    --inner-corner-radius: 1.8rem;
    --horizontal-bar-text-color: var(--horizontal-bar-main-color);
    --sidebar-full-width: calc(var(--sidebar-width) + var(--corner-added-width));
    --horizontal-bar-height: calc(var(--horizontal-bar-height-rem) * 1rem);
    --bar-button-height: 2.8rem;
}

.bar {
    position: relative;
    color: var(--main-bg-color);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.sidebar .bar {
    width: var(--sidebar-width);
    text-transform: uppercase;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-end;
}
.horizontal-bar .bar {
    height: var(--horizontal-bar-height);
    vertical-align: text-top;
    flex-direction: row;
    align-items: flex-start;
    background-color: var(--horizontal-bar-main-color);
}
.horizontal-bar .bar.left-end {
    width: 1.5rem;
    border-top-left-radius: 5rem;
    border-bottom-left-radius: 5rem;
    background-color: var(--horizontal-bar-accent-color);
}


.sidebar.left .bar {
    text-align: right;
}
.sidebar .bar-button {
    min-width: unset;
    width: var(--sidebar-width);
}


.horizontal-bar .corner,
.sidebar .corner {
    position: relative;
    min-width: var(--sidebar-full-width);
    width: var(--sidebar-full-width);
    height: var(--corner-height);
    display: flex;
    flex-direction: column;
    flex: none;
    z-index: inherit;
    background-color: var(--horizontal-bar-main-color);
}

.horizontal-bar .corner::after,
.sidebar .corner::after {
    content: "";
    display: block;
    position: absolute;
    min-width: var(--corner-added-width);
    /* height: calc(var(--corner-height) - var(--horizontal-bar-height)); */
    height: var(--corner-lip-height);
    background: var(--main-bg-color);
}

.horizontal-bar .corner.top-left,
.sidebar .corner.top-left {
    border-top-left-radius: var(--corner-radius);
    justify-content: flex-end;
    /* flex: 0 1 auto; */
}
.horizontal-bar .corner.top-left::after,
.sidebar .corner.top-left::after {
    right: 0;
    bottom: 0;
    border-top-left-radius: var(--inner-corner-radius);
}

.horizontal-bar .corner.top-right,
.sidebar .corner.top-right {
    border-top-right-radius: var(--corner-radius);
    justify-content: flex-end;
    flex: 0 1 auto;
}
.horizontal-bar .corner.top-right::after,
.sidebar .corner.top-right::after {
    left: 0;
    bottom: 0;
    border-top-right-radius: var(--inner-corner-radius);
}

.horizontal-bar .corner.bottom-left,
.sidebar .corner.bottom-left {
    border-bottom-left-radius: var(--corner-radius);
    align-self: flex-end;
    align-items: flex-end;
    justify-content: flex-start;
}
.horizontal-bar .corner.bottom-left::after,
.sidebar .corner.bottom-left::after {
    right: 0;
    top: 0;
    border-bottom-left-radius: var(--inner-corner-radius);
}

.horizontal-bar .corner.bottom-right,
.sidebar .corner.bottom-right {
    border-bottom-right-radius: 3.8rem;
    align-self: flex-end;
    align-items: flex-end;
    justify-content: flex-start;
}
.horizontal-bar .corner.bottom-right::after,
.sidebar .corner.bottom-right::after {
    left: 0;
    top: 0;
    border-bottom-right-radius: 3.8rem;
}


.horizontal-bar .title,
.horizontal-bar .bar .title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    background: var(--main-bg-color);
    /* color: white; */
    margin: 0;
    /* margin-left: 0.8rem; */
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    /* padding-bottom: 0.2rem; */
    /* font-size: 21.7pt;
    top: -3px; */
    font-size: calc(var(--horizontal-bar-height-rem) * 1.0333 * 14pt);
    top: calc(-1.5 * var(--horizontal-bar-height-rem) * 1pt);
    height: calc(1.2 * var(--horizontal-bar-height));
    padding-bottom: 0;
    white-space: nowrap;
    color: var(--horizontal-bar-text-color);
}

.horizontal-bar.left {
    justify-content: flex-start;
}


.horizontal-bar .bar-button {
    width: auto;
    min-width: 4rem;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    height: var(--horizontal-bar-height);
    line-height: 100%;
    font-size: calc(min(var(--horizontal-bar-height-rem) * 1.0333 * 11pt, 16pt));
}

.bar-button:focus {
    outline: none;
    border: none;
}


.horizontal-bar .bar.right-end {
    width: 1.75rem;
    flex: none;
    border-top-right-radius: var(--corner-radius);
    border-bottom-right-radius: var(--corner-radius);
    background-color: var(--horizontal-bar-accent-color);
}

/* Defines a horizontal bar for displaying buttons */
.button-bar {
    display: flex;
    flex-direction: row;
    flex: none;
    column-gap: 0.2rem;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    box-sizing: border-box;
    width: fit-content;
}
/* #endregion Bars */



/* #region brackets */
.bracket {
    --border-radius: 1.5rem;
    /* height: 100%; */
    height: auto;
}
.bracket.left {
    width: 1.5rem;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    border-width: 0.75rem 0 0.75rem 0.25rem;
    margin-right: 0.75rem;
}
.bracket.right {
    width: 1.5rem;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-width: 0.75rem 0.25rem 0.75rem 0;
    margin-left: 0.75rem;
}
.bracket.hollow {
    background-color: var(--main-bg-color) !important;
    border-style: solid;
}
/* #endregion brackets */


/* #region select all children overrides */
.body-button *:hover {
    cursor: pointer;
}
.horizontal-bar.bottom,
.horizontal-bar.bottom > * {
    align-items: flex-end;
}
/* #endregion select all children overrides */



/* #region label overrides */
.horizontal-bar .bar .label {
    color: var(--horizontal-bar-text-color);
}
/* #endregion label overrides */



/* #region sizing, spacing, and justification */
.space-above {
    margin-top: var(--header-bottom-margin);
}
.space-below {
    margin-bottom: var(--header-bottom-margin);
}
/* #endregion sizing, spacing, and justification */

.quick-nav-panel-wrapper {
    margin-left: 0.5rem;
}
quick-nav-dropdown {
    /* Only show when width can't support quick-nav-panel-wrapper */
    display: none;
}



.body-row.page-content {
    margin-top: 1rem;
    justify-content: center;
    column-gap: 0.5rem;
}
page-footer {
    height: 4.0rem;
    margin-top: 1rem;
    /* border: 1px solid; */
}
main {
    min-width: 28rem;
    max-width: 35rem;
    margin-right: 0.5rem;
    --main-sidebar-width: 6rem;
}
main .horizontal-bar,
main .sidebar {
    --horizontal-bar-height-rem: 2.0;
    --corner-lip-height: 0.8rem;
    --sidebar-width: var(--main-sidebar-width);
}
main .sidebar .bar {
    background-color: var(--horizontal-bar-main-color);
}
main .horizontal-bar.top,
main .horizontal-bar.bottom {
    --horizontal-bar-height-rem: 0.4;
}

main .body-text {
    margin: 0 0.5rem;
    font-size: 16pt;
    letter-spacing: 0.2px;
}
main .bar.with-animation{
    height: 3rem;
}

main .body-row .sidebar{
    width: fit-content;
}
main .body-row .sidebar a.bar-button {
    margin: 0.25rem 0;
    text-decoration: none;
    color:black;
}
main .body-row .sidebar a.bar-button:visited {
    color:black;
}
main .body-row.section-title {
    margin: 0.2rem 0;
    justify-content: space-between;
}
main .body-row.section-title .body-text {
    font-size: 24pt;
}


.mobile-text {
    display: none;
}

@media (max-width: 768px) {
    main {
        min-width: 26rem;
        max-width: 35rem;
        margin-right: 0.5rem;
        --main-sidebar-width: 5.0rem;
    }
}

/* @media (max-width: 480px) { */
@media (max-width: 588px) {
    .quick-nav-panel-wrapper {
        display: none;
    }
    quick-nav-dropdown {
        display: block;
    }
    .mobile-text {
        display: inline;
    }
    .desktop-text {
        display: none;
    }
    main {
        min-width: 26rem;
        max-width: 35rem;
        margin-right: 0.5rem;
        --main-sidebar-width: 5.0rem;
    }
}

@media (max-width: 430px) {
    main {
        min-width: 19rem;
        max-width: 35rem;
        margin-right: 0.5rem;
        --main-sidebar-width: 4.0rem;
    }
    main .horizontal-bar,
    main .sidebar {
        --horizontal-bar-height-rem: 1.5;
    }
    main .body-row.section-title .body-text {
        font-size: 20pt;
    }
    main .body-row .sidebar a.bar-button {
        font-size: 14pt !important;
    }
    main .body-text {
        font-size: 14pt;
    }
    main .body-row .button-bar .body-button {
        width: 6.9rem;
    }
    main .format-button-grid * {
        font-size: 13pt;
    }
    main .format-button-grid .right-end {
        display: none;
    }
}

@media (max-width: 19rem) {
    .body-row.page-content {
        justify-content: flex-start;
    }
}