* {
    box-sizing: border-box;
}
::selection {
    color: var(--backgroundPrimary);
    background-color: var(--accent);
}
body.themeContrast ::selection {
    color: var(--backgroundPrimary);
    background-color: var(--contrastAccent2);
}
html {
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    background-color: #000;
}
body {
    --animationState: running;

    --transition-duration-default: 0.8s;
    --transition-duration: var(--transition-duration-default);
    --transition-timing-function: cubic-bezier(0.25,1,0,1);

    --transition-duration-short-default: 0.4s;
    --transition-duration-short: var(--transition-duration-short-default);
    --transition-timing-function-short: cubic-bezier(0.5,0,0,1);

    --transition-duration-long-default: 1.6s;
    --transition-duration-long: var(--transition-duration-long-default);
    --transition-timing-function-long: cubic-bezier(0.25,1,0,1);
    
    --tcGap: 14px;

    --typefacePrimary: "Mona Sans";
    --typefaceSecondary: "Mona Sans";

    margin: 0;

    background-color: var(--backgroundPrimary);
    transition-property: background-color;
    will-change: background-color;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
}
body { --strokeWidth: 2px; }
body.textWeight { --strokeWidth: 3px; }
body.slowMotion {
    --transition-duration-default: 3.2s;
    --transition-duration-short-default: 1.6s;
    --transition-duration-long-default: 6.4s;
}
@font-face {
    font-family: "Mona Sans";
    src:
      url("fonts/Mona-Sans.woff2") format("woff2 supports variations"),
      url("fonts/Mona-Sans.woff2") format("woff2-variations");
    font-weight: 200 900;
    font-stretch: 75% 125%;
}
h1 {
    font-family: var(--typefacePrimary);
    font-size: var(--typeTitle);
    font-weight: 300;
    font-stretch: 90%;
    line-height: 1.2;
    margin: 0;
    color: var(--heading);
}
h2 {
    font-family: var(--typefacePrimary);
    font-size: var(--typeHeading);
    font-weight: 400;
    font-stretch: 90%;
    line-height: 1;
    margin: 0;
    color: var(--heading);
}
p {
    font-family: var(--typefaceSecondary);
    font-size: var(--typeBody);
    font-weight: 400;
    font-stretch: 100%;
    line-height: 1.5;
    margin: 0;
    color: var(--foregroundPrimary);
}
/* funky animated text */
/* h1, h2, p { transition-property: font-weight, font-size; will-change: font-weight, font-size; transition-duration: var(--transition-duration); transition-timing-function: var(--transition-timing-function); } */

a { text-transform: none; text-decoration: none }
a:hover { text-decoration: underline }

a { color: var(--foregroundSecondary) }
a:hover { color: var(--foregroundTertiary) }
a:active { color: var(--foregroundQuaternary) }

button {
    padding: unset;
    border: unset;
    background: unset;
}
.subtitle {
    font-size: var(--typeBodySmall);
    color: var(--foregroundSecondary);
}
.allcaps {
    text-transform: uppercase;
}
.caption {
    font-size: var(--typeBodySmall);
    color: var(--foregroundTertiary);
    font-variation-settings: "ital" 1;
    font-weight: 400;
    text-wrap: balance;
    text-align: center;
}


.caption a { color: var(--foregroundQuaternary); }
.caption a:hover { color: var(--foregroundQuinary); }
.caption a:active { color: var(--foregroundSenary); }




.footerText {
    font-variation-settings: "ital" 1;
    font-weight: 400;
}

body.textWeight h1 { font-weight: 500; }
body.textWeight h2,
body.textWeight p,
body.textWeight .caption,
body.textWeight .footerText { font-weight: 600; }

.svg { width: var(--iconSize); height: var(--iconSize); }
.invertable { filter: var(--invertState); }

/* Control Panel */
.controlPanelContainer {
    position: fixed;
    width: 100%;
    height: 100%;
    padding: var(--unit);

    display: flex;
    justify-content: center;
    align-items: end;

    pointer-events: none;
    z-index: 2;

    transition-property: width, height;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
}
.controlPanel {
    position: relative;
    bottom: calc(var(--unit) * -1);
    width: auto;
    max-width: calc(100dvw - var(--unit) * 2);
    height: auto;
    max-height: calc(100dvh - var(--unit) * 2);
    padding: var(--unitSmall);

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--backgroundPrimary);
    box-shadow: var(--boxShadowCard);
    border-radius: var(--unitSmall);
    outline: var(--outlineContrast);

    opacity: 0;
    pointer-events: none;
    
    z-index: 1;

    transition-property: bottom, opacity;
    transition-duration: var(--transition-duration-short);
    transition-timing-function: var(--transition-timing-function-short);
}
.controlPanel.expanded {
    bottom: 0;
    opacity: 1;
    pointer-events: all;
    transform: rotateX(0deg);
}
.controlPanelGrid {
    width: 100%;
    height: 100%;
    padding: var(--strokeWidth);
    
    display: grid;
    grid-template-columns: var(--unitSmall) auto var(--unitSmall);
    grid-template-rows: auto 1fr var(--unitSmall);
    gap: var(--strokeWidth);
}
.controlPanelHeader {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0;
}
.controlPanelHeader > h2 {
    position: relative;
    padding: var(--unitSmall) 0;

    transition-property: padding-left;
    transition-duration: var(--transition-duration-short);
    transition-timing-function: var(--transition-timing-function-short);
}
.controlPanelCloseButton:hover + h2 {
    padding-left: var(--unitSmall);
}
.controlPanelOpenButtonContainer {
    position: absolute;
    bottom: var(--unit);
    right: var(--unit);
    width: var(--buttonSizeLarge);
    height: var(--buttonSizeLarge);
    box-sizing: content-box;
    
    display: flex;
    justify-content: center;
    align-items: center;

    border: solid var(--strokeWidth);
    border-radius: var(--unitSmall);
    box-shadow: var(--boxShadowLight);
    opacity: 1;

    transition-property: width, height, opacity;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);

    z-index: 1;
    overflow: hidden;
}
.controlPanelOpenButtonContainer.disabled { height: 0; width: 0; opacity: 0;}
body.default .controlPanelOpenButtonContainer { border-radius: 0; box-shadow: unset;}
body.default .controlPanelOpenButtonContainer.disabled { height: var(--buttonSizeLarge); width: 0; opacity: 0}

.controlPanelOpenButton {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    pointer-events: all;

    transition-property: opacity;
    transition-duration: var(--transition-duration);
    transition-timing-function: var(--transition-timing-function);
}
.controlPanelCloseButton {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;

    cursor: pointer;
}
.controlPanelControls {
    padding: var(--unitSmall);

    display: grid;
    gap: var(--unitSmall) var(--unit);
    grid-template-columns: auto auto;
}
.controlPanelControls .subtitle { grid-column: span 2; }
.controlPanelControlsList {
    display: grid;
    grid-template-columns: 180px auto;
    gap: var(--unit);
}

.controlPanelControlLabel {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: var(--unitSmall);
}
.controlPanelControlLabel p { line-height: 1.2; }
.controlPanelControlList {
    height: fit-content;
    margin: auto 0;

    display: flex;
    justify-content: left;
    align-items: stretch;
    gap: var(--unitSmall);
}
.controlPanelControl {
    width: 100%;
    height: auto;
    min-height: var(--buttonSize);
    padding: 0 var(--unitSmall);
    
    border-style: solid;
    border-width: var(--strokeWidth);
    cursor: pointer;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.controlPanelControl:last-child { border-radius: 0 var(--unitSmall) var(--unitSmall) 0; }
.controlPanelControl { border-radius: 0; }
.controlPanelControl:first-child { border-radius: var(--unitSmall) 0 0 var(--unitSmall); }
.controlPanelControl.selected { border-color: var(--accent) !important; background-color: var(--accent) !important; }

@media (max-width: 600px) or (max-height: 600px) {
    .controlPanel { width: 100%; height: auto; }
    .controlPanelControl { min-height: var(--buttonSizeLarge); }
}
@media (max-width: 350px) {
    .controlPanelControls { grid-template-columns: auto 1fr; gap: var(--unitSmall); }
    .controlPanelControlLabel p { display: none; }
    .controlPanelControlLabel .svg { width: var(--unitLarge); height: var(--unitLarge); }
}
/* Themes */
body.themeContrast {
    --dimAmount: brightness(0.1);
    --opacityAmount: 0.1;
    --invertState: invert();
    --outlineContrast: solid var(--strokeWidth) var(--contrastAccent);
    --outlineContrast2: solid var(--strokeWidth) var(--contrastAccent2);
    --boxShadowLight: unset;
    --boxShadowHeavy: unset;
    --boxShadowCard: unset;
    --dropShadowLight: unset;
    --dropShadowHeavy: unset;
}
body.themeContrast,
body.themeContrast .tc,
body.themeContrast .tcCover,
body.themeContrast .tcButtons {
    --backgroundPrimary: var(--contrastBackgroundPrimary);
    --backgroundSecondary: var(--contrastBackgroundSecondary);
    --backgroundTertiary: var(--contrastBackgroundTertiary);
    --backgroundQuaternary: var(--contrastBackgroundQuaternary);
    --backgroundQuinary: var(--contrastBackgroundQuinary);
    --backgroundSenary: var(--contrastBackgroundSenary);

    --foregroundPrimary: var(--contrastForegroundPrimary);
    --foregroundSecondary: var(--contrastForegroundSecondary);
    --foregroundTertiary: var(--contrastForegroundTertiary);
    --foregroundQuaternary: var(--contrastForegroundQuaternary);
    --foregroundQuinary: var(--contrastForegroundQuinary);
    --foregroundSenary: var(--contrastForegroundSenary);

    --accent: var(--contrastAccent);
    --heading: var(--contrastAccent2);
}

body.themeContrast .backgroundGrid { background-color: var(--foregroundSecondary); }
body.themeContrast .background,
body.themeContrast .backgroundGrid > div { background-color: var(--backgroundPrimary)}

body.themeContrast .controlPanel,
body.themeContrast .controlPanelGrid > div { background-color: var(--backgroundSecondary); }
body.themeContrast .controlPanelGrid { background-color: var(--backgroundQuaternary); }
body.themeContrast .controlPanelControl { border-color: var(--backgroundQuaternary); }
body.themeContrast .controlPanelControl:hover { background-color: var(--backgroundTertiary); }
body.themeContrast .controlPanelControl:active { background-color: var(--backgroundQuaternary); }
body.themeContrast .controlPanelControl.selected p { color: var(--backgroundPrimary); }
body.themeContrast .controlPanelOpenButtonContainer { background-color: var(--backgroundPrimary); border-color: var(--backgroundTertiary);}
body.themeContrast.default .controlPanelOpenButtonContainer { background-color: var(--backgroundPrimary); border-color: var(--foregroundSecondary);}
body.themeContrast.project .controlPanelOpenButtonContainer { background-color: var(--backgroundPrimary); border-color: var(--accent);}
body.themeContrast .controlPanelOpenButton { background-color: var(--backgroundPrimary); }
body.themeContrast .controlPanelOpenButton:hover { background-color: var(--backgroundSecondary); }
body.themeContrast .controlPanelOpenButton:active { background-color: var(--backgroundTertiary); }
body.themeContrast .controlPanelCloseButton { background-color: var(--backgroundSecondary); }
body.themeContrast .controlPanelCloseButton:hover { background-color: var(--backgroundTertiary); }
body.themeContrast .controlPanelCloseButton:active { background-color: var(--backgroundQuaternary); }

body.themeContrast .tcLayoutPage:hover { background-color: var(--backgroundSecondary)}
body.themeContrast .tcLayoutPage:active { background-color: var(--backgroundTertiary)}
body.themeContrast .tcLayoutPage::after { background-color: var(--backgroundSecondary)}
body.themeContrast .tcLayoutPage:hover::after { background-color: var(--backgroundTertiary)}
body.themeContrast .tcLayoutPage:active::after { background-color: var(--backgroundQuaternary)}
body.themeContrast .tcLayoutPage.active::after { background-color: var(--foregroundPrimary)}
body.themeContrast .tcLayoutPage.active:hover::after { background-color: var(--foregroundSecondary)}
body.themeContrast .tcLayoutPage.active:active::after { background-color: var(--foregroundTertiary)}
body.themeContrast .tcLayoutPageButton:hover { background-color: var(--backgroundSecondary)}
body.themeContrast .tcLayoutPageButton:active { background-color: var(--backgroundTertiary)}

body.themeContrast .tcContent,
body.themeContrast .projectHeroshot { border-color: var(--foregroundSecondary); }
body.themeContrast .tcButton { border-color: var(--accent); }

body.themeContrast .backgroundGridTitleText > h1,
body.themeContrast .backgroundGridSubtitleText > p { color: var(--accent); }
body.themeContrast .tcCoverImage { background-image: var(--coverImageContrast); }



body.themeDark {
    --dimAmount: brightness(0.5);
    --opacityAmount: 0.25;
    --invertState: invert();
    --outlineContrast: unset;
    --outlineContrast2: unset;
    --boxShadowLight: 0px 2px 8px #0004, 0px 1px 2px #0008;
    --boxShadowHeavy: 0px 4px 16px #0008, 0px 2px 4px #000f;
    --boxShadowCard:
        0px 2px 8px #0004,
        0px 1px 2px #0008,
        inset 0px 2px 0px #fff1,
        inset 0px -2px 0px #0004;
    --dropShadowLight: drop-shadow(0px 2px 8px #0004) drop-shadow(0px 1px 2px #0008);
    --dropShadowHeavy: drop-shadow(0px 4px 16px #0008) drop-shadow(0px 1px 2px #000f);
}
body.themeDark,
body.themeDark .tc,
body.themeDark .tcButtons {
    --appearanceBackgroundPrimary: var(--darkPrimary);
    --appearanceBackgroundSecondary: var(--darkSecondary);
    --appearanceBackgroundTertiary: var(--darkTertiary);
    --appearanceBackgroundQuaternary: var(--darkQuaternary);
    --appearanceBackgroundQuinary: var(--darkQuinary);
    --appearanceBackgroundSenary: var(--darkSenary);

    --appearanceForegroundPrimary: var(--lightPrimary);
    --appearanceForegroundSecondary: var(--lightSecondary);
    --appearanceForegroundTertiary: var(--lightTertiary);
    --appearanceForegroundQuaternary: var(--lightQuaternary);
    --appearanceForegroundQuinary: var(--lightQuinary);
    --appearanceForegroundSenary: var(--lightSenary);
    
    --appearanceAccent: var(--darkAccent);
}
body.themeDark .tcCover {
    --appearanceBackgroundPrimary: var(--darkSecondary);
    --appearanceBackgroundSecondary: var(--darkTertiary);
    --appearanceBackgroundTertiary: var(--darkQuaternary);
    --appearanceBackgroundQuaternary: var(--darkQuinary);
    --appearanceBackgroundQuaSenary: var(--darkSenary);
    --appearanceBackgroundQuinary: var(--darkPrimary);

    --appearanceForegroundPrimary: var(--lightPrimary);
    --appearanceForegroundSecondary: var(--lightSecondary);
    --appearanceForegroundTertiary: var(--lightTertiary);
    --appearanceForegroundQuaternary: var(--lightQuaternary);
    --appearanceForegroundQuinary: var(--lightQuinary);
    --appearanceForegroundSenary: var(--lightSenary);
}
body.themeDark,
body.themeDark .tc,
body.themeDark .tcCover,
body.themeDark .tcButtons {
    --backgroundPrimary: var(--appearanceBackgroundPrimary);
    --backgroundSecondary: var(--appearanceBackgroundSecondary);
    --backgroundTertiary: var(--appearanceBackgroundTertiary);
    --backgroundQuaternary: var(--appearanceBackgroundQuaternary);
    --backgroundQuinary: var(--appearanceBackgroundQuinary);
    --backgroundSenary: var(--appearanceBackgroundSenary);
    
    --foregroundPrimary: var(--appearanceForegroundPrimary);
    --foregroundSecondary: var(--appearanceForegroundSecondary);
    --foregroundTertiary: var(--appearanceForegroundTertiary);
    --foregroundQuaternary: var(--appearanceForegroundQuaternary);
    --foregroundQuinary: var(--appearanceForegroundQuinary);
    --foregroundSenary: var(--appearanceForegroundSenary);
    
    --accent: var(--appearanceAccent);
    --heading: var(--appearanceForegroundPrimary);
}
body.themeDark .backgroundGrid { background-color: var(--backgroundTertiary); }
body.themeDark .background,
body.themeDark .backgroundGrid > div { background-color: var(--backgroundPrimary)}

body.themeDark .controlPanel,
body.themeDark .controlPanelGrid > div { background-color: var(--backgroundSecondary); }
body.themeDark .controlPanelGrid { background-color: var(--backgroundQuaternary); }
body.themeDark .controlPanelControl { border-color: var(--backgroundQuaternary); }
body.themeDark .controlPanelControl:hover { background-color: var(--backgroundTertiary); }
body.themeDark .controlPanelControl:active { background-color: var(--backgroundQuaternary); }
body.themeDark .controlPanelControl.selected p { color: var(--backgroundPrimary); }
body.themeDark  .controlPanelOpenButtonContainer { background-color: var(--backgroundPrimary); border-color: var(--backgroundTertiary);}
body.themeDark.default .controlPanelOpenButtonContainer { background-color: var(--backgroundPrimary); border-color: var(--backgroundTertiary);}
body.themeDark .controlPanelOpenButton { background-color: var(--backgroundPrimary); }
body.themeDark .controlPanelOpenButton:hover { background-color: var(--backgroundSecondary); }
body.themeDark .controlPanelOpenButton:active { background-color: var(--backgroundTertiary); }
body.themeDark .controlPanelCloseButton { background-color: var(--backgroundSecondary); }
body.themeDark .controlPanelCloseButton:hover { background-color: var(--backgroundTertiary); }
body.themeDark .controlPanelCloseButton:active { background-color: var(--backgroundQuaternary); }

body.themeDark .tcLayoutPage:hover { background-color: var(--backgroundSecondary)}
body.themeDark .tcLayoutPage:active { background-color: var(--backgroundTertiary)}
body.themeDark .tcLayoutPage::after { background-color: var(--backgroundSecondary)}
body.themeDark .tcLayoutPage:hover::after { background-color: var(--backgroundTertiary)}
body.themeDark .tcLayoutPage:active::after { background-color: var(--backgroundQuaternary)}
body.themeDark .tcLayoutPage.active::after { background-color: var(--foregroundPrimary)}
body.themeDark .tcLayoutPage.active:hover::after { background-color: var(--foregroundSecondary)}
body.themeDark .tcLayoutPage.active:active::after { background-color: var(--foregroundTertiary)}
body.themeDark .tcLayoutPageButton:hover { background-color: var(--backgroundSecondary)}
body.themeDark .tcLayoutPageButton:active { background-color: var(--backgroundTertiary)}

body.themeDark .tcContent,
body.themeDark .projectHeroshot { border-color: var(--backgroundTertiary); }
body.themeDark .tcButton { border-color: var(--accent); }

body.themeDark .backgroundGridTitleText > h1,
body.themeDark .backgroundGridSubtitleText > p { color: var(--accent); }
body.themeDark .tcCoverImage { background-image: var(--coverImageAppearanceDark); }



body.themeLight {
    --dimAmount: brightness(0.25);
    --opacityAmount: 0.25;
    --invertState: unset;
    --outlineContrast: unset;
    --outlineContrast2: unset;
    --boxShadowLight: 0px 2px 8px #0002, 0px 1px 2px #0004;
    --boxShadowHeavy: 0px 4px 16px #0004, 0px 2px 4px #0008;
    --boxShadowCard: 0px 2px 8px #0002, 0px 1px 2px #0004, inset 0px 2px 0px #ffff, inset 0px -2px 0px #0002;
    --dropShadowLight: drop-shadow(0px 2px 8px #0001) drop-shadow(0px 1px 2px #0002);
    --dropShadowHeavy: drop-shadow(0px 4px 16px #0002) drop-shadow(0px 1px 2px #0004);
}
body.themeLight,
body.themeLight .tc,
body.themeLight .tcCover,
body.themeLight .tcButtons {
    --appearanceBackgroundPrimary: var(--lightPrimary);
    --appearanceBackgroundSecondary: var(--lightSecondary);
    --appearanceBackgroundTertiary: var(--lightTertiary);
    --appearanceBackgroundQuaternary: var(--lightQuaternary);
    --appearanceBackgroundQuinary: var(--lightQuinary);
    --appearanceBackgroundSenary: var(--lightSenary);
    
    --appearanceForegroundPrimary: var(--darkPrimary);
    --appearanceForegroundSecondary: var(--darkSecondary);
    --appearanceForegroundTertiary: var(--darkTertiary);
    --appearanceForegroundQuaternary: var(--darkQuaternary);
    --appearanceForegroundQuinary: var(--darkQuinary);
    --appearanceForegroundSenary: var(--darkSenary);

    --appearanceAccent: var(--lightAccent);

    --backgroundPrimary: var(--appearanceBackgroundPrimary);
    --backgroundSecondary: var(--appearanceBackgroundSecondary);
    --backgroundTertiary: var(--appearanceBackgroundTertiary);
    --backgroundQuaternary: var(--appearanceBackgroundQuaternary);
    --backgroundQuinary: var(--appearanceBackgroundQuinary);
    --backgroundSenary: var(--appearanceBackgroundSenary);

    --foregroundPrimary: var(--appearanceForegroundPrimary);
    --foregroundSecondary: var(--appearanceForegroundSecondary);
    --foregroundTertiary: var(--appearanceForegroundTertiary);
    --foregroundQuaternary: var(--appearanceForegroundQuaternary);
    --foregroundQuinary: var(--appearanceForegroundQuinary);
    --foregroundSenary: var(--appearanceForegroundSenary);

    --accent: var(--appearanceAccent);
    --heading: var(--appearanceForegroundPrimary);
}
body.themeLight .backgroundGrid { background-color: var(--foregroundSecondary); }
body.themeLight .background,
body.themeLight .backgroundGrid > div { background-color: var(--backgroundSecondary); }

body.themeLight .tcLayoutPage:hover { background-color: var(--backgroundTertiary)}
body.themeLight .tcLayoutPage:active { background-color: var(--backgroundQuaternary)}
body.themeLight .tcLayoutPage::after { background-color: var(--backgroundTertiary)}
body.themeLight .tcLayoutPage:hover::after { background-color: var(--backgroundQuaternary)}
body.themeLight .tcLayoutPage:active::after { background-color: var(--backgroundQuinary)}
body.themeLight .tcLayoutPage.active::after { background-color: var(--foregroundPrimary)}
body.themeLight .tcLayoutPage.active:hover::after { background-color: var(--foregroundSecondary)}
body.themeLight .tcLayoutPage.active:active::after { background-color: var(--foregroundTertiary)}
body.themeLight .tcLayoutPageButton:hover { background-color: var(--backgroundTertiary)}
body.themeLight .tcLayoutPageButton:active { background-color: var(--backgroundQuaternary)}

body.themeLight .controlPanel,
body.themeLight .controlPanelGrid > div { background-color: #fff; }
body.themeLight .controlPanelGrid { background-color: var(--backgroundSecondary); }
body.themeLight .controlPanelControl { border-color: var(--backgroundSecondary); }
body.themeLight .controlPanelControl:hover { background-color: var(--backgroundPrimary); }
body.themeLight .controlPanelControl:active { background-color: var(--backgroundSecondary); }
body.themeLight .controlPanelControl.selected p { color: #fff; }
body.themeLight .controlPanelOpenButtonContainer { background-color: var(--backgroundPrimary); border-color: var(--backgroundTertiary);}
body.themeLight .controlPanelOpenButton:hover { background-color: var(--backgroundSecondary); }
body.themeLight .controlPanelOpenButton:active { background-color: var(--backgroundTertiary); }
body.themeLight .controlPanelCloseButton { background-color: #fff; }
body.themeLight .controlPanelCloseButton:hover { background-color: var(--backgroundPrimary); }
body.themeLight .controlPanelCloseButton:active { background-color: var(--backgroundSecondary); }

body.themeLight.default .controlPanel,
body.themeLight.default .controlPanelGrid > div { background-color: var(--backgroundPrimary); }
body.themeLight.default .controlPanelGrid { background-color: var(--backgroundTertiary); }
body.themeLight.default .controlPanelControl { border-color: var(--backgroundTertiary); }
body.themeLight.default .controlPanelControl:hover { background-color: var(--backgroundSecondary); }
body.themeLight.default .controlPanelControl:active { background-color: var(--backgroundTertiary); }
body.themeLight.default .controlPanelControl.selected p { color: var(--backgroundPrimary); }
body.themeLight.default .controlPanelOpenButtonContainer { background-color: var(--backgroundSecondary); border-color: var(--foregroundSecondary);}
body.themeLight.default .controlPanelOpenButton:hover { background-color: var(--backgroundTertiary); }
body.themeLight.default .controlPanelOpenButton:active { background-color: var(--backgroundQuaternary); }
body.themeLight.default .controlPanelCloseButton { background-color: var(--backgroundPrimary); }
body.themeLight.default .controlPanelCloseButton:hover { background-color: var(--backgroundSecondary); }
body.themeLight.default .controlPanelCloseButton:active { background-color: var(--backgroundTertiary); }

body.themeLight .tcContent,
body.themeLight .projectHeroshot { border-color: var(--foregroundSecondary); }
body.themeLight .tcButton { border-color: var(--foregroundSecondary); }

body.themeLight .backgroundGridTitleText > h1,
body.themeLight .backgroundGridSubtitleText > p { color: var(--foregroundSecondary); }
body.themeLight .tcCoverImage { background-image: var(--coverImageAppearanceLight); }

body.themeContrast.raveMode .background, body.themeContrast.raveMode .backgroundGrid > div, body.themeContrast.raveMode .controlPanelOpenButton,
body.themeDark.raveMode .background, body.themeDark.raveMode .backgroundGrid > div, body.themeDark.raveMode .controlPanelOpenButton { animation: raveModeDark steps(1, end) 2s infinite; }
body.themeLight.raveMode .background, body.themeLight.raveMode .backgroundGrid > div, body.themeLight.raveMode .controlPanelOpenButton { animation: raveModeLight steps(1, end) 2s infinite; }
body.raveMode .tcContent {background-color: transparent !important;}
body.raveMode .tc:nth-child(even) .tcCover { animation: rotateLeft linear 15s infinite }
body.raveMode .tc:nth-child(odd) .tcCover { animation: rotateRight linear 15s infinite }
@keyframes raveModeDark { 0% { background-color: hsl(0, 40%, 10%); } 33.33% { background-color: hsl(120, 40%, 10%); } 66.67% { background-color: hsl(240, 40%, 15%); } 100% { background-color: hsl(360, 40%, 10%); } }
@keyframes raveModeLight { 0% { background-color: hsl(0, 80%, 90%); } 33.33% { background-color: hsl(120, 80%, 90%); } 66.67% { background-color: hsl(240, 80%, 92%); } 100% { background-color: hsl(360, 80%, 90%); } }
@keyframes rotateLeft { 0% { rotate: 0deg; } 100% { rotate: -360deg; } }
@keyframes rotateRight { 0% { rotate: 0deg; } 100% { rotate: 360deg; } }


body {
    --transition-duration: var(--transition-duration-default);
    --transition-duration-short: var(--transition-duration-short-default);
    --animationState: running;
}
body.reduceMotion {
    --transition-duration: 0s;
    --transition-duration-short: 0s;
    --transition-duration-long: 0s;
    --animationState: paused;
}

/* Text Size */
/* body { font-size: 14px; } */
body { font-size: 16px; }
@media (max-width: 900px) or (max-height: 900px) { body { font-size: 15px; } }
@media (max-width: 600px) or (max-height: 600px) { body { font-size: 14px; } }

body {
    --typeTitle: 2.5em;
    --typeHeading: 1.5em;
    --typeBody: 1em;
    --typeBodySmall: 0.8em;
}
body.textSize {
    --typeTitle: 3em;
    --typeHeading: 2em;
    --typeBody: 1.2em;
    --typeBodySmall: 1em;
}
body {
    --titleMarqueeDistance: 24em;
    --subtitleMarqueeDistance: 33em;
}

/* Icon Size */
body { --iconSize: 20px; }
body.textSize { --iconSize: 24px; }
@media (max-width: 900px) or (max-height: 900px) {
    body { --iconSize: 18px; }
    body.textSize { --iconSize: 22px; }
}
@media (max-width: 600px) or (max-height: 600px) {
    body { --iconSize: 16px; }
    body.textSize { --iconSize: 20px; }
}

/* Button Size */
body {
    --buttonSize: 30px;
    --buttonSizeLarge: 40px;
}
@media (max-width: 900px) or (max-height: 900px) { body {
    --buttonSize: 28px;
    --buttonSizeLarge: 36px;
} }
@media (max-width: 600px) or (max-height: 600px) { body {
    --buttonSize: 26px;
    --buttonSizeLarge: 32px;
} }

/* Unit Size */
body {
    --unitTiny: 4px;
    --unitSmall: 8px;
    --unit: 16px;
    --unitLarge: 32px;
}
@media (max-width: 600px) or (max-height: 600px) { body {
    --unitTiny: 3px;
    --unitSmall: 6px;
    --unit: 12px;
    --unitLarge: 24px;
} }

/* @media (max-width: 720px) { .controlPanelControls .mediaSize { opacity: var(--opacityAmount); } } */
@media (max-width: 600px) or (max-height: 600px) {
    .controlPanelControlLabel.mediaSize,
    .controlPanelControlList.mediaSize,
    .controlPanelControlLabel.paragraphWidth,
    .controlPanelControlList.paragraphWidth,
    .controlPanelControlLabel.splitView,
    .controlPanelControlList.splitView { display: none; }
}
@media (max-width: 900px) or (max-height: 900px) {
    .controlPanelControlLabel.splitView,
    .controlPanelControlList.splitView { opacity: var(--opacityAmount); }
}
body.themeContrast .controlPanelControlLabel.darkAppearance,
body.themeContrast .controlPanelControlList.darkAppearance { opacity: var(--opacityAmount); }