:root {
    --background: #ffffff;
    --text: #000000;
    --disabledBG: #c3c9d6;
    --disabledText: #d3d9e6;
    --link: #cc410e;
    --superlight1: #d8e9c4;
    --lightlight1: #bde0a3;
    --light1: #89cd51;
    --medium1: #578e29;
    --dark1: #457346;
    --darkdark1: #315c1e;
    --superdark1: #234415;
    --white: #fff7eb;
    --lightlight2: #fcedbf;
    --light2: #ffc670;
    --medium2: #ffb075;
    --dark2: #c96f48;
    --darkdark2: #82422f;
    --superdark2: #451d13;
    --superMini: calc(15px + 0.25vw);
    --minimini: calc(22px + 0.25vw);
    --mini: calc(25px + 0.25vw);
    --small: calc(28px + 0.25vw);
    --midSize: calc(32px + 0.25vw);
    --large: calc(36px + 0.25vw);
    --huge: calc(40px + 0.25vw);
    --hugehuge: calc(44px + 0.25vw);
    --superHuge: calc(50px + 0.25vw);
    --maxWidth: 1000px;
}

/* If the screen size is 601px wide or more, set fonts to be smaller*/
@media screen and (min-device-width: 801px) {
    :root {
        --superMini: calc(6px + 0.5vw);
        --minimini: calc(8px + 0.5vw);
        --mini: calc(10px + 0.5vw);
        --small: calc(12px + 0.5vw);
        --midSize: calc(14px + 0.5vw);
        --large: calc(17px + 0.25vw);
        --huge: calc(19px + 0.25vw);
        --hugehuge: calc(23px + 0.25vw);
        --superHuge: calc(30px + 1vw);
        /* --maxWidth: 1500px; */
    }
}

.prefixSuffix {
    display: none;
}

.honorifics {
    display: none;
}

.phrases {
    display: none;
}

.translator {
    display: flex;
}

.pageFuncButtCont {
    display: flex;
    flex-direction: row;
    /* align-items: flex-start; */
    justify-content: flex-end;
    align-self: flex-start;
}

.pageFuncButt {
    padding: 5px;
    /* align-items: flex-start; */
    /* justify-content: flex-start; */
    /* align-self: flex-start; */
}

.pageFuncButt:hover {
    color: lightgray;
}

.header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--superMini);
}
.headerItem {
    display: flex;
    flex-basis: 20%;
    font-weight: bold;
    letter-spacing: 0.3vw;
}

.title {
    font-size: var(--superHuge);
}
.subTitle {
    font-size: var(--small);
    color: var(--white);
}
.headerText {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--small);
}
.headerText:hover {
    cursor: default;
    color: lightgray !important;
}

.feedback {
    align-items: flex-start;
    justify-content: flex-start;
    align-self: flex-start;
}

.pageBody {
    width: 100%;
    max-width: var(--maxWidth);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    margin: var(--midSize);
}
.menuBar {
    width: 100vw;
    background-color: var(--darkdark1);
    color: var(--background);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.menuItemContainer {
    display: flex;
    flex-direction: row;
    text-align: center;
}

.menuItem {
    display: flex;
    flex-grow: 1;
    background-color: var(--medium1);
    padding-left: var(--superMini);
    padding-right: var(--superMini);
    padding-top: var(--huge);
    padding-bottom: var(--huge);
    justify-content: center;
    align-items: flex-end;
    font-size: var(--midSize);
    border-color: var(--darkdark1);
    border-top-style: solid;
    border-left-style: solid;
    border-right-style: solid;
    border-radius: 10px 10px 0 0;
}

.menuItem:hover {
    background-color: var(--dark1);
    color: var(--lightlight1);
    cursor: default;
}

/* .activeSpecial {
    background-color: var(--lightlight1) !important;
    border-color: var(--background) !important;
    color: var(--background) !important;
} */

.active {
    background-color: var(--light1) !important;
    border-color: var(--light1) !important;
    color: var(--superdark1) !important;
    font-weight: bold;
}

.quickActive {
    background-color: var(--background) !important;
    border-color: var(--background) !important;
    /* color: var(--text) !important; */
    font-weight: bold;
}

.quickMenu {
    background-color: var(--light1);
    padding-left: var(--midSize);
    padding-right: var(--midSize);
    padding-top: var(--midSize);
}

.quickItem {
    background-color: var(--superlight1);
    border-color: var(--light1);
    color: var(--superdark1);
    font-size: var(--small);
    justify-content: center;
    align-items: center;
}

.quickItem:hover {
    color: var(--dark1);
    background-color: var(--lightlight1);
    cursor: default;
}

body {
    width: 98vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif; /* Helvetica, Ariel, sans-serif; */
    font-size: var(--midSize);
    margin: 0 auto;
    background-color: var(--background);
    color: var(--text);
}

.h2 {
    font-size: var(--large);
    text-align: left;
    margin-top: var(--midSize);
    margin-bottom: var(--midSize);
}