:root {
    --scale-factor: 1; /* Default value */
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    user-select: none;
    background-color: #202020;
    font-family: 'Roboto', sans-serif;
    color: white;
}

#tank-container {
    display: flex;
    gap: calc(10px * var(--scale-factor));
}

.tank {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: calc(80px * var(--scale-factor));
}

.tank-name-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(10px * var(--scale-factor));
}

.tank-name {
    font-size: calc(1.2em * var(--scale-factor));
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

.tank-level {
    width: calc(50px * var(--scale-factor));
    height: calc(300px * var(--scale-factor));
    border: 2px solid black;
    position: relative;
}

.tank-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    transition: height 0.5s, background-color 0.5s;
}

.tank-percent {
    margin-bottom: calc(5px * var(--scale-factor));
    font-size: calc(1.5em * var(--scale-factor));
    height: calc(1.5em * var(--scale-factor));
    width: calc(3em * var(--scale-factor));
    display: flex;
    justify-content: center;
    align-items: center;
}

#timestamp {
    position: fixed;
    bottom: calc(10px * var(--scale-factor));
    right: calc(10px * var(--scale-factor));
    font-size: calc(0.8em * var(--scale-factor));
}

@keyframes flash-red {
    0%, 100% { background-color: rgb(204,41,0); }
    50% { background-color: rgb(0,102,255); }
}

@keyframes flash-yellow {
    0%, 100% { background-color: rgb(254,204,0); }
    50% { background-color: rgb(0,102,255); }
}