:root {
    /* CSS variables go here */
    --primary-page-bg-color: #f6f6f6;
    --menu-logo-bg-color: #e2e2e2;
    --menu-strip-bg-color: #eeeeee;
    --menu-logo-badge-size: 128px;
    --primary-box-shadow: 0 4px 8px #00000080;
    --menu-btn-padding: 8px;
    --menu-from-badge: 16px;
}

@font-face {
    font-family: Cabin;
    src: url("fonts/CabinVariable.ttf");
    font-style: normal;
}

@font-face {
    font-family: Cabin;
    src: url("fonts/CabinVariable-Italic.ttf");
    font-style: italic;
}

@font-face {
    font-family: Cabin;
    src: url("fonts/CabinVariable-Italic.ttf");
    font-style: oblique;
}

@font-face {
    font-family: "Roboto Mono";
    src: url("fonts/RobotoMonoVariable.ttf");
    font-style: normal;
}

@font-face {
    font-family: "Roboto Mono";
    src: url("fonts/RobotoMonoVariable-Italic.ttf");
    font-style: italic;
}

@font-face {
    font-family: "Roboto Mono";
    src: url("fonts/RobotoMonoVariable-Italic.ttf");
    font-style: oblique;
}

* {
    font-family: Cabin, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

pre, code, samp {
    font-family: "Roboto Mono", 'Courier New', Courier, monospace;
}

body {
    background-color: var(--primary-page-bg-color);
}

.menuArea {
    width: 100dvw;
    height: 128px;
    margin: -8px;
}

.menuBtn {
    cursor: pointer;
    background-color: transparent;
    text-align: center;
    font-size: 18px;
    height: 96px;
    padding-left: var(--menu-btn-padding);
    padding-right: var(--menu-btn-padding);
    border-style: none;
}   

.menuBtn:hover {
    background-color: #00e67840;
}

.backMenuContainer {
    position: absolute;
    width: calc(100% - 32px);
    padding: 16px;
    padding-top: 0;
    padding-bottom: 0;
    height: 96px;
    background-color: var(--menu-strip-bg-color);
    /*box-shadow: var(--primary-box-shadow);*/
}

.leftSideMenuContainer {
    max-width: fit-content;
    margin-left: auto;
    margin-right: calc(50% + (var(--menu-logo-badge-size) / 2) + var(--menu-from-badge));
}

.rightSideMenuContainer {
    position: relative;
    top: -96px;
    max-width: fit-content;
    margin-right: auto;
    margin-left: calc(50% + (var(--menu-logo-badge-size) / 2) + var(--menu-from-badge));
}

.logo {
    position: absolute;
    left: calc(50dvw - (var(--menu-logo-badge-size) / 2));
    background-color: var(--menu-logo-bg-color);
    background-image: url("images/bornacheck.svg");
    background-size: 96px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0 0 25% 25%;
    width: var(--menu-logo-badge-size);
    height: var(--menu-logo-badge-size);
    /*box-shadow: var(--primary-box-shadow);*/
}

.logo:hover {
    background-color: #ade6cb;
}

.logoDecline {
    background-image: url("images/bornadeclineold.png");
}

.redElement {
    background-color: #FF000080;
}

.orangeElement {
    background-color: #FF800080;
}

.yellowElement {
    background-color: #FFFF0080;
}

.fourPixelRoundElement {
    border-radius: 4px;
}

.wrapLeft {
    float: left;
    margin: 8px;
}

.wrapRight {
    float: right;
    margin: 8px;
}

figcaption {
    font-size: 11px;
}

.insignificantText {
    opacity: 50%;
}