:root {
    background-color: #222;
}

* {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    cursor: default;
    position: relative;
    border: none;
    color-scheme: dark;
    user-select: none;
}

.TopBar {
    display: flex;
    align-items: center;
    height: 100px;

    background-color: #093519;
}

.LogoImage {
    height: calc(95%);

    position: absolute;

    top: 50%;
    left: 0%;

    transform: translate(0%, -50%);

    cursor: pointer;
}



html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

button {
    margin: 5px;
    background: none;
    border: none;
    height: 35px;
    outline: 2px solid #2fa761ff;
    border-radius: 5px;
    text-decoration: none;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding-left: 7.5px;
    padding-right: 7.5px;

    color: #79bd70;
    font-weight: bold;
    font-size: 20px;

    transition: outline 0.25s ease, outline-width 0.1s linear, color 0.25s ease;

    cursor: pointer;
}

button:hover {
    outline-color: #79bd70ff;
    outline-width: 6px;

    color: #ccc;
}

button:active {
    outline-color: #08544aff;
}

#navButtons {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.navButton {
    margin: 5px;
    background: none;
    border: none;
    height: 35px;
    outline: 2px solid #2fa761ff;
    border-radius: 5px;
    text-decoration: none;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding-left: 7.5px;
    padding-right: 7.5px;

    color: #79bd70;
    font-weight: bold;
    font-size: 20px;

    transition: outline 0.25s ease, outline-width 0.1s linear, color 0.25s ease;

    cursor: pointer;
}

.currentNavButton {
    margin: 5px;
    background: none;
    border: none;
    height: 35px;
    outline: 4px solid #79bd70;
    border-radius: 5px;
    text-decoration: none;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding-left: 7.5px;
    padding-right: 7.5px;

    color: #79bd70;
    font-weight: bold;
    font-size: 20px;

    filter: grayscale();
}

.navButton:hover {
    outline-color: #79bd70ff;
    outline-width: 6px;

    color: #ccc;
}

.navButton:active {
    outline-color: #08544aff;
}

.Green { color: #2fa761; }
.LightGreen { color: #79bd70; }
.DarkGreen { color: #08544a; }