:root {
    --background-color: #c4d1b5;
    --background-color-hover: #e4eed8;
    --background-color-disabled: #bec6b3;
    --border-color: #95a186;

    --background-color-2: #cfdfbd;
    --border-color-2: #849275;

    --foreground-color: #425514;
    --foreground-color-hover: #1c220c;

    --body-background: #f2f8ee;

    --profile-background: radial-gradient(#f2f8eebb, #f2f8ee);

    /** NAVBAR */
    --navbar-background: linear-gradient(0deg, #b9caaf, #eaffdd);
    --navbar-border-color: #94a58a;
}

* {
    padding: 0;
    margin: 0;

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

body {
    background: var(--body-background);
}

h1 {
    font-size: 26px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 16px;
}

div {
    display: unset;
}

table {
    text-align: left;
}

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

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

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;
}

input[type=file] {
    max-width: 230px;
}

form {
    display: flex;
    flex-direction: column;
}

form:has(div) {
    gap: 16px;
}

label {
    display: block;
}

label.inline {
    display: inline;
}

textarea {
    resize: vertical;
    height: 100px;
}

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

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

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

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

.screenshots img {
    height: 128px;
}

.content.row>.content {
    margin: 0;
}

.sidebar {
    max-width: 300px;
}

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


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

.navbar {
    background: var(--navbar-background);
    border-bottom: 1px solid var(--navbar-border-color);
    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:disabled {
    color: gray;
}

button:disabled:hover {
    cursor: not-allowed;
    background: lightgray;
    color: gray;
}

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,
.twitch {
    background: #9a7ad2 !important;
    border-color: #6d5595 !important;
}

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;
}

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

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

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

.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 .content .box {
    background: var(--background-color-2);
    border-color: var(--border-color-2);
}

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

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

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

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

    gap: 6px;

    overflow: hidden;
}

.box.background {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.box.background h1 {
    color: white;
    text-shadow: -1px 1px 4px black;
}

.box.emote:has(p) h1 {
    margin-top: 4px;
    line-height: 0;
}

.box.emote h1 {
    font-size: 16px;
    font-weight: 600;
}

.box.emote p {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}

.box.emote img {
    max-width: 64px;
    max-height: 64px;
    margin-top: auto;
    margin-bottom: auto;
}

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;
}

.alert.red {
    background: #e27777;
    border-color: #9f5050;
}

.emote-check {
    position: relative;
    left: 35px;
    top: 10px;
    width: 24px;
    height: 24px;
    z-index: 2;
}

.emote:has(.emote-check) img {
    margin-top: -15px;
}

/** RATINGS */
.rating.gemerald {
    font-weight: bolder;
    text-shadow: 0 0 5px blue;
    color: #b4dbeb;
}

.rating.gemerald img {
    filter: hue-rotate(50deg) brightness(1.5);
}

.rating.gem {
    font-weight: bold;
    color: #2e7b99;
}

.rating.coal {
    font-weight: bold;
    color: #2d3335;
    text-shadow: 0 0 2px black;
}

.rating.brimstone {
    font-weight: bolder;
    color: orange;
    text-shadow: 0 0 4px red;
}

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

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

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

.badge {
    padding: 2px 8px;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
}

.badge img {
    max-width: 16px;
    max-height: 16px;
    vertical-align: middle;
}

/** 
---------------------------------
   SOMETHING FROM TAILWINDCSS
---------------------------------
*/

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

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

.grow {
    flex-grow: 1;
}

.small-gap {
    gap: 8px;
}

.big-gap {
    gap: 32px;
}

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

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

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

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

.font-small {
    font-size: 12px;
}

.p-16 {
    padding: 16px;
}

.m-8 {
    margin: 8px;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.w-full {
    width: 100%;
}

/** 
-------------
   USER
-------------
*/

.background {
    position: absolute;
    background-position: center center;
    top: 61px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.background-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--profile-background);
}