:root {
    --background-color: #d7dfcd;
    --background-color-hover: #e4eed8;
    --background-color-disabled: #bec6b3;
    --border-color: #b0b9a5;

    --foreground-color: #7f9c3c;
    --foreground-color-hover: #4b5632;
}

* {
    padding: 0;
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
}

div {
    display: unset;
}

table.vertical th {
    text-align: right;
}

table.vertical th,
table.vertical td {
    padding: 2px;
}

a {
    color: var(--foreground-color);
    text-decoration: none;
}

a:hover {
    color: var(--foreground-color-hover);
    text-decoration: underline;
}

input {
    padding: 2px;
    border-radius: 4px;
    border: 1px solid gray;
}

.container {
    width: 100%;
    min-height: 100vh;
    display: flex;
}

.wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

section.content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px;
}

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

.big-gap {
    gap: 32px;
}

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

/** 
------------
   COUNTER
------------
*/
.counter img:not(:first-child) {
    margin-left: 32px;
}


/** 
-----------
   NAVBAR
-----------
*/

.navbar {
    display: flex;
    flex-direction: row;
    padding: 4px;

    gap: 16px;
}

.navbar .links {
    display: flex;
    align-items: end;
    gap: 4px;
}

.navbar .brand {
    display: flex;
    flex-direction: row;
    align-items: end;
}

/** 
-------------
   BUTTONS
-------------
*/

button,
.button {
    background: lightgray;
    border: 1px solid gray;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 14px;
    text-decoration: none;
    color: black;
}

button:hover,
.button:hover {
    background: #b9b9b9;
    cursor: pointer;
    color: black;
    text-decoration: none;
}

button.transparent,
.button.transparent {
    background: unset;
    border: unset;
}

.gem:hover {
    filter: saturate(2);
}

.coal:hover {
    filter: brightness(2);
}

button.red,
.button.red {
    background: #e97272;
    border-color: #a85252;
}

button.red:hover,
.button.red:hover {
    background: #ec8d8d;
}

button.green,
.button.green {
    background: #6cbb6d;
    border-color: #52a85d;
}

button.green:hover,
.button.green:hover {
    background: #85dd8a;
}

button.purple,
.button.purple {
    background: #9a7ad2;
    border-color: #6d5595;
}

button.purple:hover,
.button.purple:hover {
    background: #ac88ea;
}

/** 
----------
   LIST
----------
*/

.items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.items.content {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

.navtab {
    position: relative;
    width: 50%;
    top: 2px;
}

.full {
    flex-grow: 1;
}

.row {
    flex-direction: row;
    align-items: center;
}

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

/** 
---------
   BOX
---------
*/

.box {
    background: var(--background-color);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    padding: 4px;
}

.box.navtab {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: unset;
    margin: 0;
}

.box:has(.navtab) {
    background: unset;
    border: unset;
    border-radius: unset;
    padding: 0;

    display: flex;
    flex-direction: column;
}

.box:has(.navtab) .content {
    flex-grow: 1;
    margin: 0;
    padding: 16px;
}

.box hr {
    border-color: var(--border-color);
    border-width: 1px;
}

.box.emote {
    width: 90px;
    height: 90px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 6px;

    overflow: hidden;
}

.box.emote p {
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.box {
    text-decoration: none;
    color: black;
}

a.box:hover {
    background: linear-gradient(0deg, var(--background-color-hover), var(--background-color-disabled));
    cursor: pointer;
}

.emote-showcase {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    margin: 32px 0;
}

/** 
-------------
   ACCOUNTS
-------------
*/

.accman {
    flex-grow: 0;
    width: 400px;

    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accman form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.accman h1 {
    font-size: 26px;
}

.accman h2 {
    font-size: 20px;
}

.accman h3 {
    font-size: 16px;
}