:root {
    --app-bkg-col: #000000;
    --app-height: calc(
        var(--spacing-v) *
        5 +
        var(--cell-3x2-height) *
        2 +
        var(--header-height) +
        var(--footer-height)
    );
    --app-text-col: #ffffff;
    --app-width: calc(var(--spacing-h) * 4 + var(--cell-3x2-width) * 3);
    --cell-3x1-height: 320px;
    --cell-3x1-width: 150px;
    --cell-3x2-height: 150px;
    --cell-3x2-width: 150px;
    --cell-bkg-col: #000000;
    --cell-select-col: #00bfff;
    --footer-bkg-col: var(--header-bkg-col);
    --footer-height: 18px;
    --header-bkg-col: var(--cell-bkg-col);
    --header-height: 20px;
    --link-color: #00bfff;
    --link-highlight-color: #ffffff;
    --spacing-h: 20px;
    --spacing-v: var(--spacing-h);
}
a {
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    color: var(--link-highlight-color);
}
body {
    background-color: var(--app-bkg-col);
    font-family: "Roboto Flex", sans-serif;
    font-size: 16px;
    margin: 0;
    overflow: hidden;
    user-select: none;
}
td a {
    color: white;
}
td a:hover {
    text-decoration: underline;
}
#app {
    background-color: var(--app-bkg-col);
    height: var(--app-height);
    left: 0;
    position: absolute;
    top: 0;
    width: var(--app-width);
}
#avatar-selector {
    background-color: var(--app-bkg-col);
    display: block;
    height: calc(
        var(--header-height) +
        var(--spacing-v) *
        2 +
        var(--cell-3x2-height) *
        2
    );
    left: var(--spacing-h);
    position: absolute;
    right: var(--spacing-h);
    top: var(--spacing-v);
}
#cell-3x1-00 {
    left: calc(0 * (var(--cell-3x2-width) + var(--spacing-h)));
}
#cell-3x1-00,
#cell-3x1-10,
#cell-3x1-20 {
    top: calc(var(--spacing-v) + var(--header-height));
}
#cell-3x1-00,
#cell-3x1-10,
#cell-3x1-20 {
    background-color: var(--cell-bkg-col);
    height: var(--cell-3x1-height);
    position: absolute;
    width: var(--cell-3x1-width);
}
#cell-3x1-10 {
    left: calc(1 * (var(--cell-3x2-width) + var(--spacing-h)));
}
#cell-3x1-20 {
    left: calc(2 * (var(--cell-3x2-width) + var(--spacing-h)));
}
#cell-3x2-00 {
    left: calc(0 * (var(--cell-3x2-width) + var(--spacing-h)));
}
#cell-3x2-00,
#cell-3x2-10,
#cell-3x2-20 {
    top: calc(var(--spacing-v) + var(--header-height));
}
#cell-3x2-00,
#cell-3x2-10,
#cell-3x2-20,
#cell-3x2-01,
#cell-3x2-11,
#cell-3x2-21 {
    background-color: var(--cell-bkg-col);
    height: var(--cell-3x2-height);
    position: absolute;
    width: var(--cell-3x2-width);
}
#cell-3x2-01 {
    left: calc(0 * (var(--cell-3x2-width) + var(--spacing-h)));
}
#cell-3x2-01,
#cell-3x2-11,
#cell-3x2-21 {
    top: calc(
        var(--spacing-v) +
        var(--header-height) +
        var(--spacing-v) +
        var(--cell-3x2-height)
    );
}
#cell-3x2-10 {
    left: calc(1 * (var(--cell-3x2-width) + var(--spacing-h)));
}
#cell-3x2-11 {
    left: calc(1 * (var(--cell-3x2-width) + var(--spacing-h)));
}
#cell-3x2-20 {
    left: calc(2 * (var(--cell-3x2-width) + var(--spacing-h)));
}
#cell-3x2-21 {
    left: calc(2 * (var(--cell-3x2-width) + var(--spacing-h)));
}
#credits {
    background-color: var(--app-bkg-col);
    display: none;
    height: var(--app-height);
    left: 0;
    position: absolute;
    top: 0;
    width: var(--app-width);
}
#credits-back {
    background-color: var(--app-bkg-col);
    height: 25px;
    left: 16px;
    overflow: hidden;
    position: absolute;
    top: 16px;
    width: 35px;
}
#credits-img {
    background-color: var(--app-bkg-col);
    height: var(--app-height);
    left: calc(var(--app-width) / 2);
    overflow: hidden;
    position: absolute;
    top: 0;
    width: calc(var(--app-width) / 2);
}
#credits-links-title {
    font-size: 24px;
    padding-bottom: 12px;
}
#credits-table {
    color: white;
    font-size: 16px;
    padding-left: 50px;
    padding-top: 80px;
}
#credits-text {
    background-color: var(--app-bkg-col);
    height: var(--app-height);
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: calc(var(--app-width) / 2);
}
#female-clothing-selector {
    background-color: var(--app-bkg-col);
    display: none;
    height: calc(var(--header-height) + var(--spacing-v) + var(--cell-3x1-height));
    left: var(--spacing-h);
    position: absolute;
    right: var(--spacing-h);
    top: var(--spacing-v);
}
#footer {
    background-color: var(--footer-bkg-col);
    color: white;
    font-size: 14px;
    height: var(--footer-height);
    left: var(--spacing-v);
    line-height: var(--footer-height);
    position: absolute;
    right: var(--spacing-v);
    text-align: center;
    top: calc(
        var(--spacing-v) +
        var(--header-height) +
        var(--spacing-v) +
        var(--cell-3x2-height) +
        var(--spacing-v) +
        var(--cell-3x2-height) +
        var(--spacing-v)
    );
    vertical-align: middle;
}
#header {
    background-color: var(--header-bkg-col);
    color: white;
    font-size: 20px;
    height: var(--header-height);
    left: 0;
    line-height: var(--header-height);
    position: absolute;
    right: 0;
    text-align: left;
    top: 0;
    vertical-align: middle;
}
#male-clothing-selector {
    background-color: var(--app-bkg-col);
    display: none;
    height: calc(var(--header-height) + var(--spacing-v) + var(--cell-3x1-height));
    left: var(--spacing-h);
    position: absolute;
    right: var(--spacing-h);
    top: var(--spacing-v);
}
#wait {
    background-color: rgba(100, 100, 100, 0.85);
    display: none;
    height: var(--app-height);
    justify-content: center;
    left: 0;
    overflow: none;
    position: absolute;
    top: 0;
    width: var(--app-width);
    z-index: 1;
}
.cell {
    background-color: var(--cell-bkg-col);
}
.cell:hover {
    filter: brightness(0.7);
}
.shape {
    /* only used for selection */
}
.clothing {
    /* only used for selection */
}
.female {
    /* only used for selection */
}
.male {
    /* only used for selection */
}
.selected {
    outline-offset: 0px;
    outline: 4px solid var(--cell-select-col);
}