/* Rocket Drone
Copyright (C) 2022 wavy (wavy@optime.ca)

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>. */

@font-face {
    font-family: textFont;
    src: url('FFCaronBulgeBold.ttf');
}

* {
    font-family: textFont;
    font-size: calc(1vw + 1vh);
}

html,
body {
    height: 100%;
    color: #fafafa
}

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1a1a1a;
}

.main {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 5vh 5vw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
}

.overlay {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10vh 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 1em;
    position: absolute;
    top: 0;
    left: 0;
}

.info {
    box-sizing: border-box;
    background-color: #666666;
    border-radius: 10px;
    width: 90%;
    padding: 5vh 5vw;
    flex-grow: 1;
    transition: all 0.2s ease;
}

.top {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.bot {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.stat {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.hidden {
    visibility: hidden;
}

.transparent {
    opacity: 0;
}

button {
    padding: 0.5em 0.75em;
    border-radius: 10px;
    border-style: none;
    background-color: #fafafa;
}

meter {
    --background: transparent;
    --optimum: #fafafa;
    --sub-optimum: #fafafa;
    --sub-sub-optimum: #fafafa;

    /* The gray background in Firefox */
    background: var(--background);
    display: inline-block;
    box-sizing: border-box;
    border-radius: 0;
    width: 20vw;
    padding: 0;
    margin: 0;
    height: 0.5em;
    border: 0;
}

meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
    transition: 0.2s width;
}

/* The gray background in Chrome, etc. */
meter::-webkit-meter-bar {
    background: var(--background);
}

/* The green (optimum) bar in Firefox */
meter:-moz-meter-optimum::-moz-meter-bar {
    background: var(--optimum);
}

/* The green (optimum) bar in Chrome etc. */
meter::-webkit-meter-optimum-value {
    background: var(--optimum);
}

/* The yellow (sub-optimum) bar in Firefox */
meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: var(--sub-optimum);
}

/* The yellow (sub-optimum) bar in Chrome etc. */
meter::-webkit-meter-suboptimum-value {
    background: var(--sub-optimum);
}

/* The red (even less good) bar in Firefox */
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: var(--sub-sub-optimum);
}

/* The red (even less good) bar in Chrome etc. */
meter::-webkit-meter-even-less-good-value {
    background: var(--sub-sub-optimum);
}