@font-face {
    font-family: "Shrewsbury-Titling-Bold";
    src: url("./res/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('res/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('res/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("res/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("./res/ui/tooltip.png");
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
}

.hidden {
    display: none;
}

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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