*{
    /** Dark theme primary colors */
    --color-primary-a0: #3f8eca;
    --color-primary-a10: #5b9ad0;
    --color-primary-a20: #73a6d6;
    --color-primary-a30: #88b2dc;
    --color-primary-a40: #9dbfe2;
    --color-primary-a50: #b1cbe8;

    /** Dark theme surface colors */
    --color-surface-a0: #121212;
    --color-surface-a3: #141414;
    --color-surface-a5: #181818;
    --color-surface-a7: #212121;
    --color-surface-a10: #282828;
    --color-surface-a20: #3f3f3f;
    --color-surface-a30: #575757;
    --color-surface-a40: #717171;
    --color-surface-a50: #8b8b8b;

    /** Dark theme mixed surface colors */
    --color-surface-mixed-a0: #191d22;
    --color-surface-mixed-a10: #2e3237;
    --color-surface-mixed-a20: #45484c;
    --color-surface-mixed-a30: #5c5f63;
    --color-surface-mixed-a40: #75787b;
    --color-surface-mixed-a50: #8f9194;

    --color-text-on: #fff;
    --color-text-high: #a6a6a6;
    --color-text-mid: #7f7f7f;
    --color-text-off: #5d5d5d;
    --color-text-warning: rgb(255, 153, 0);

    

    --color-link-normal: #fff;
    --color-link-half: #b7b7b7;
    --color-link-medium: #cdcdcd;

    --color-border-normal: #303030;

    --main-font : "Plus Jakarta Sans", sans-serif;
}


body {
    background-color: var(--color-surface-a0);
    color: #fff;
    font-family: var(--main-font);
    font-size: 14px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

header {
    
    margin-bottom: 50px;
}

header a {
    color: var(--color-link-normal);
    text-decoration: none;
}

.sub_title {
    margin-bottom: 10px;    
}

.sub_title h2 {
    margin: 0;
    padding: 0;
}

.sub_title p {
    margin: 0;
    padding: 0 0 20px 0;
}

.small {
    font-size: 0.7em;
}

.italic {
    font-style: italic;
}

.warning {
    color: var(--color-text-warning);
}

.text-mid {
    color: var(--color-text-mid);
}

.shoptable {
    width: 100%;
    border-collapse: collapse;
}


.shoptable td:nth-child(6),
.shoptable td:nth-child(7),
.shoptable td:nth-child(8),
.shoptable td:nth-child(9),
.shoptable th:nth-child(5),
.shoptable th:nth-child(6),
.shoptable th:nth-child(7),
.shoptable th:nth-child(8) {
    text-align: right;
}

.shoptable th {
    text-align: left;
    background-color: #4d2929de;
    padding: 4px;
}

.shoptable a {
    color: var(--color-link-medium);
}

.shoptable td:nth-child(1) {
    width: 34px;
}

.shoptable td:nth-child(3) {
    width: 120px;
}
.shoptable td:nth-child(4) {
    width: 120px;
}
.shoptable td:nth-child(5) {
    min-width: 32px;
}
.shoptable td:nth-child(6) {
    min-width: 32px;
}
.shoptable td:nth-child(7) {
    min-width: 32px;
}
.shoptable td:nth-child(8) {
    min-width: 32px;
}
.shoptable td:nth-child(9) {
    min-width: 32px;
}

.shoptable .hoverable:hover {
    background-color: rgb(41, 41, 41);
}