:root {
    --bg-color: #02030B;
    --text-color: #d2d2d2;
    --feature-dark: #37425A;
    --feature-light: #9FA7BD;
    --highlight-dark: #bc7e23;
    --highlight-light: #FAB041;
    --highlight-alt-dark: #1f821a;
    --highlight-alt-light: #30bc29;
    --background-alt: #205C0F;
}

* {
    padding: 0;
    margin: 0;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
    font-style: normal;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

h3 {
    margin-bottom: 5px;
    margin-right: 15px;
}

#ohems {
    margin-top: 20px;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.justify-sb {
    justify-content: space-between;
}

.justify-end {
    justify-content: end;
}

.w-100 {
    width: 100%;
}

.invisible-light {
    display: none;
}

.invisible {
    display: none !important;
}

.color-yellow {
    background-color: yellow;
}

.color-red {
    background-color: red;
}

.banner {
    display: flex;
    position: relative;
    z-index: 5;
    align-items: center;
    justify-content: space-between;
    min-height: 75px;
    background-color: var(--feature-dark);
    padding: 15px 30px;
    border-bottom: 5px double var(--feature-light);
}

.slidedown {
    overflow: hidden;
    transform: translateY(-170px);
    transition: transform 0.3s ease;
}

.slidedown.open {
    transform: translateY(0);
}

#generalMessage {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #d8fd22;
    color: black;
    padding: 15px 20px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#generalMessage.show {
    opacity: 1;
}

#loginpanel {
    background-color: var(--background-alt);
    height: 170px;
    border-bottom: 1px solid var(--feature-light);
}

.subpage {
    padding: 20px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 100ms ease, transform 100ms ease;
}

.subpage.activated {
    opacity: 1;
    transform: translateY(0);
}

.toolpage {
    display: none;
}

#subSites {
    display: flex;
}

button {
    padding: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: large;
    background-color: var(--highlight-light);
    border-style: none;
    border-radius: 5px;
    min-width: 40px;
}

button:hover {
    background-color: var(--highlight-dark);
}

button:active {
    transform: scale(0.9);
}

.lit {
    background-color: var(--highlight-alt-light);
}

.lit:hover {
    background-color: var(--highlight-alt-dark);
}

.mainbutton {
    margin-right: 10px;
    margin-top: 10px;
    padding: 10px;
    font-size: larger;
    border-radius: 10px;
}

.altbutton {
    background-color: var(--highlight-alt-light);
}

.altbutton:hover {
    background-color: var(--highlight-alt-dark);
}

.flexing {
    display: flex;
}

.align-baseline {
    align-items: baseline;
}

#loginpanel {
    display: flex;
    justify-content: center;
}

#logincontainer {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.club {
    color: rgb(0, 152, 0);
}

.diamond {
    color: rgb(191, 187, 0)
}

.heart {
    color: red;
}

.spade {
    color: black;
}

#loginbuttoncontainer {
    height: 100%;
    padding-top: 70px;
}

#backbutton {
    display: none;
}

input {
    min-height: 30px;
    margin: 2px;
    padding: 0 5px;
}

@media (max-width: 630px) {
    .banner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .banner>div {
        align-items: center;
    }

    #mainpage button {
        width: 100%;
    }

    h1 {
        font-size: x-large;
    }

    .flexing {
        flex-direction: column;
    }

    #subSites {
        flex-direction: column;
    }
}