page.css

@font-face {
    font-family: "Shrewsbury-Titling-Bold";
    src: url("./asset/fonts/Shrewsbury-Titling-Bold.ttf") format("truetype");
}

h2 {
    margin-top: 0%;
    margin-bottom: 0%;
}

body {
    background-color: #262626;
    height: 100vh;
    width: 125vh;
    position: relative;
    margin: auto;
}

#mainBackground {
    background-image: url("asset/ui/background.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #262626;
    background-position: top;
    font-size: 1.5vh;
    height: 100%;
    width: 100%;
}

.tan {
    background-color: #ebd5a6;
}

.white {
    background-color: #ffffff;
}

.buttonRow0 {
    position: absolute;
    width: 100%;
    table-layout: fixed;
}

.buttonRow1 {
    position: absolute;
    width: 100%;
    top: 52%;
    table-layout: fixed;
}

.statPanel {
    position: relative;
    height: 6.8%;
    display: flex;
}

.statPanel.noBar {
    height: 4.7%;
}

.statInfo {
    height: 100%;
    width: 60%;
}

.statName {
    font-family: Consolas, monospace;
    font-size: 1.25em;
    letter-spacing: -1.2px;
}

.statBar {
    height: 50%;
    background-color: #690000;
}

.statNumbers {
    font-family: monospace;
    font-size: 1.75em;
    text-align: right;
    height: 100%;
    width: 25%;
    overflow: hidden;
}

.button {
    background-repeat: no-repeat;
    background-size: contain;
    width: 18vh;
    height: 5vh;
    font-family: Shrewsbury-Titling-Bold, Palatino, Georgia, serif;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    line-height: 6vh;
    color: #000000;
    cursor: pointer;
    position: absolute;
    display: inline-block;
}

.button:hover {
    opacity: 0.5;
}

#topRowButtons {
    position: absolute;
    align-items: center;
    width: 100%;
    height: 6.5%;
    table-layout: fixed;
}

#statsPanel {
    background-image: url("asset/ui/sidebar.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 6.5%;
    width: 19.4%;
    height: 74%;
    padding: 0.5%;
    font-size: 1.25em;
}

.arrowIcon {
    position: absolute;
    width: 17%;
    left: 85%;
}

#timePanel {
    position: relative;
    bottom: -4%;
    width: 80%;
    height: 9%;
    background-image: url("asset/ui/time.png");
    background-size: contain;
    background-repeat: no-repeat;
    font-family: monospace;
    font-size: 1.5em;
    padding-left: 2%;
}

#mainDisplay {
    height: 74.8%;
    width: 77%;
    position: absolute;
    left: 20.5%;
    top: 6.5%;
    padding: 0% 1.5% 0% 0.8%;
    overflow-y: auto;
}

#mainSpriteDisplay {
    position: absolute;
    top: 91%;
    left: 8%;
}

#mainImageDisplay {
    max-height: 50%;
    max-width: 100%;
}

#mainTextDisplay {
    font-size: 1.7em;
    margin-block-start: 0.5em;
    display: inline-block;
    white-space: pre-wrap;
}

#bottomRowButtons {
    position: absolute;
    bottom: 5%;
    left: 20%;
    width: 80%;
    height: 12%;
}

.buttonContainer {
    position: relative;
}

.buttonContainer > .button {
    position: relative;
}

.tooltip {
    position: absolute;
    top: -550%;
    height: 540%;
    width: 212%;
    font-family: Shrewsbury-Titling-Bold, Palatino, Georgia, serif;
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1;
    padding: 17%;
    background-image: url("./asset/ui/tooltip.png");
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
}

.hidden {
    display: none;
}

.controlButton > .button {
    background-image: url("asset/ui/button1.jpg");
    position: inherit;
}

#button3 > .tooltip,
#button8 > .tooltip {
    left: -10%;
}

#button4 > .tooltip,
#button9 > .tooltip {
    left: -110%;
}

#buttontop0 > .button {
    background-image: url("asset/ui/button9.jpg");
}

#buttontop1 > .button {
    background-image: url("asset/ui/button8.jpg");
}

#buttontop2 > .button {
    background-image: url("asset/ui/button4.jpg");
}

#buttontop3 > .button {
    background-image: url("asset/ui/button6.jpg");
}

#buttontop4 > .button {
    background-image: url("asset/ui/button3.jpg");
}

#buttontop5 > .button {
    background-image: url("asset/ui/button5.jpg");
}

#button0 > .button {
    background-image: url("asset/ui/button3.jpg");
}

#button1 > .button {
    background-image: url("asset/ui/button9.jpg");
}

#button2 > .button {
    background-image: url("asset/ui/button5.jpg");
}

#button3 > .button {
    background-image: url("asset/ui/button6.jpg");
}

#button4 > .button {
    background-image: url("asset/ui/button2.jpg");
}

#button5 > .button {
    background-image: url("asset/ui/button1.jpg");
}

#button6 > .button {
    background-image: url("asset/ui/button4.jpg");
}

#button7 > .button {
    background-image: url("asset/ui/button0.jpg");
}

#button8 > .button {
    background-image: url("asset/ui/button7.jpg");
}

#button9 > .button {
    background-image: url("asset/ui/button8.jpg");
}


/* Loading */
.loading #topRowButtons,
.loading #statsPanel,
.loading #bottomRowButtons {
    opacity: 1%
}

/* Name must stay on a single line*/
#nameDisplay {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#nameDisplay:hover {
    overflow: scroll;
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: initial;
}

/* Button text not overflow to the next button */
.button {
    line-height: 20px;
    padding-top: 8px;
}