html {
    scroll-behavior: smooth;
}

.message, .stat-bar, .header {
    font-weight: bold;
    font-size: 110%;
    margin: 0px;
}

.text, p {
    cursor: default;
}

.stat {
    padding: 5px;
    font-size: 110%;
    display: inline-block;
    /* text-align: center; */
}

.ui {
    position: fixed;
}

.stat-name, #time-text {
    font-weight: bold;
    margin: 0px;
    /* text-align: left; */
}

.stat-bar {
    padding-left: 15px;
    padding-top: 0px;
    font-size: /* 80%; */ 68%;
    White-space: nowrap;
    overflow: visible;
    pointer-events: none;
    /* font-family: monospace; */
    font-weight: bold;
}

.end-message {
    position: fixed;
    top: 45%;
    left: /*35%;*/ 45%;
    /* font-size: 65; */
    text-align: center;
    max-width: 25%;
}

.end-message, #new-game, .with-pointer {
    cursor: pointer;
}

.bigtext {
    font-size: 250%;
    font-weight: bold;
    margin: 0;
}

.mediumtext{
    font-size: 150%;
}

body {
    /* overflow: hidden; */
    background-color: rgba(239, 239, 239, 1);
    font-family: sans-serif;
}

/* .tooltip>p { */
/*     margin: 0; */
/* } */

.explained {
    border: 1px solid black;
}

#top-bar {
    background-color: rgba(239, 239, 239, 0.5);
}

.top-bar {
    background-color: rgba(239, 239, 239, 0.75);
    /* color: rgba(52, 52, 54, 1); */
    color: rgba(26, 26, 27, 1);
    margin: 0;
}

.text-container, .end-message, .with-background {
    /* background-color: rgba(52.5, 52.5, 54, 0.8); /\* rgba(105, 105, 108, 0.9); *\/ /\* rgba(15, 15, 15, 0.75); *\/ */
    /* color: whitesmoke; */
    /* background-color: rgba(210, 210, 216, 0.95); */
    /* color: #efefef; */
    background-color: rgba(239, 239, 239, 0.75);
    color: rgba(52, 52, 54, 1);
    border-radius: 5px;
}

.hex-cost {
    background-color: rgba(105, 105, 108, 0.9);
    color: #efefef;
    border-radius: 5px;
}

.tooltip {
    background-color: rgba(52.5, 52.5, 54, 0.8); /* rgba(105, 105, 108, 0.9); */ /* rgba(15, 15, 15, 0.75); */
    color: whitesmoke;
}

.over-hexes {
    background-color: rgba(105, 105, 108, 0.9);
    color: #efefef;
}

.highlighted {
    background-color: gainsboro;
}

.no-background {
    background-color: transparent;
}

.item-component, sidebar-item {
    background-color: transparent;
    display: inline-block;
    position: relative;
    margin: 0px;
}

.use-button {
    border: 1px solid black;
    padding: 3px;
}