/*#region Variables*/
:root {
    --scale: 4;

    /* Font Sizes */
    --font-h1: calc(16px * var(--scale));
    --font-h2: calc(14px * var(--scale));
    --font-h3: calc(12px * var(--scale));
    --font-h4: calc(10px * var(--scale));
    --font-h5: calc(8px * var(--scale));
    --font-h6: calc(8px * var(--scale));
    --font-regular: calc(8px * var(--scale));
    --font-small: calc(6px * var(--scale));
    --font-xsmall: calc(4px * var(--scale));
}

/*#endregion Variables*/

/*#region Fonts*/
@font-face {
    font-display: swap;
    font-family: 'DDS';
    font-style: normal;
    font-weight: 400;
    src: url(/assets/fonts/dds.ttf);
}

@font-face {
    font-display: swap;
    font-family: 'DDS';
    font-style: normal;
    font-weight: 700;
    src: url(/assets/fonts/dds.ttf);
}

@font-face {
    font-display: swap;
    font-family: 'DDS';
    font-style: italic;
    font-weight: 400;
    src: url(/assets/fonts/dds.ttf);
}

@font-face {
    font-display: swap;
    font-family: 'DDS Condensed';
    font-style: normal;
    font-weight: 400;
    src: url(/assets/fonts/dds-condensed.ttf);
}

@font-face {
    font-display: swap;
    font-family: 'DDS Condensed';
    font-style: normal;
    font-weight: 700;
    src: url(/assets/fonts/dds-condensed.ttf);
}

@font-face {
    font-display: swap;
    font-family: 'DDS Condensed';
    font-style: italic;
    font-weight: 400;
    src: url(/assets/fonts/dds-condensed.ttf);
}

@font-face {
    font-display: swap;
    font-family: 'blank';
    font-style: normal;
    font-weight: 400;
    src: url(/assets/fonts/AdobeBlank.ttf);
}

/*#endregion Fonts*/

/*#region General Styles*/
html, body {
    min-height: 100%;
}

body {
    background-image: url(/assets/img/dds/bg-tile.png);
    background-size: calc(8px * var(--scale));
    image-rendering: pixelated;

    padding: calc(6px * var(--scale)) calc(14px * var(--scale));
    margin: 0;

    color: white;

    font-family: 'DDS', monospace;
    font-size: var(--font-regular);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'DDS', monospace;
    padding: calc(4px * var(--scale)) 0;
    margin: 0;
}

p {
    padding: calc(2px * var(--scale)) 0;
    margin: 0;
}

ul, ol {
    list-style: none;
}

ul li,
ol li {
    position: relative;
    padding-right: calc(10px * var(--scale));
}

ul li::before {
    content: "¤";
    position: absolute;
    margin-right: 100%;
    right: 10px;
}

ol li::before {
    content: counter(list-item);
    position: absolute;
    margin-right: 100%;
    right: 10px;
}

hr {
    border: calc(1px * var(--scale) / 2) solid white;
    margin: calc(8px * var(--scale)) 0;
}

.btn,
.btn.primary,
.btn.secondary {
    font-family: 'DDS', monospace;
    font-size: var(--font-regular);

    color: white;
    background: black;
    text-decoration: none;

    border: calc(1px * var(--scale)) solid white;
    border-radius: 0;

    padding: calc(1px * var(--scale)) calc(2px * var(--scale));
    margin: 0;
}

.btn::after {
    display: none;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn:disabled,
.btn.primary:hover,
.btn.primary:focus,
.btn.primary:active,
.btn.primary:disabled,
.btn.secondary:hover,
.btn.secondary:focus,
.btn.secondary:active,
.btn.secondary:disabled,
select.btn:hover,
select.btn:focus,
select.btn:active,
select.btn:disabled,
select.btn.primary:hover,
select.btn.primary:focus,
select.btn.primary:active,
select.btn.primary:disabled,
select.btn.secondary:hover,
select.btn.secondary:focus,
select.btn.secondary:active,
select.btn.secondary:disabled {
    background: #252525;
    color: white;
}

option {
    font-family: 'DDS', monospace;
    font-size: var(--font-regular);

    background: black;
    color: white;
}

option:hover,
option:focus,
option:active,
option:disabled {
    background: #252525;
    color: white;
}

/*#endregion General Styles*/

/*#region Cards*/
.card:not(#header-card) a:not(.btn),
.card:not(#header-card) a:active:not(.btn),
.card:not(#header-card) a:focus:not(.btn),
.card:not(#header-card) a:hover:not(.btn),
.card:not(#header-card) a:visited:not(.btn) {
    text-decoration: underline white solid calc(1px * var(--scale) / 2) !important;
}

.card {
    border: calc(1px * var(--scale)) solid white;
    background: black;
    margin: calc(3px * var(--scale)) 0 0 0;
}

.card::after {
    display: none;
}

#header-card {
    margin-bottom: calc(6px * var(--scale));
}

#header-card a {
    font-family: 'DDS', monospace;
    color: white !important;
}

/*#endregion Cards*/

/*#region Return to Top Button*/
#to-top {
    position: fixed;
    bottom: calc(3px * var(--scale));
    left: calc(3px * var(--scale));
    z-index: 99999;

    height: calc(10px * var(--scale));
    width: calc(10px * var(--scale));
    padding: 0;
    margin: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-align: center;
}

#to-top,
#to-top:active,
#to-top:focus,
#to-top:hover,
#to-top:visited {
    color: white !important;
    border: calc(1px * var(--scale)) solid white;
    background: black;
    box-shadow: none;
}

/*#endregion Return to Top Button*/

/*#region Font Preview*/
.font-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(16px * var(--scale)), 1fr));
    gap: calc(2px * var(--scale));
}

.font-preview>div {
    text-align: center;
    border: calc(1px * var(--scale)) solid white;
    display: grid;
    grid-template-rows: calc(8px * var(--scale)) calc(8px * var(--scale));
    place-items: center;
}

.font-preview>div>div:first-child {
    font-family: Sans-Serif;
    font-size: var(--font-small)
}

.font-preview>div>div:last-child {
    font-family: 'DDS', 'blank';
    font-size: var(--font-small);
}

.font-preview.condensed>div>div:last-child {
    font-family: 'DDS Condensed', 'blank';
    font-size: var(--font-small);
}

/*#endregion Font Preview*/

/*#region Maps*/

.map-card {
    overflow: unset;
}

.map-card-inner {
    display: grid;
    grid-template-columns: max-content 1fr;
}

.map-key-column {
    height: 100%;
    position: relative;
    overflow: unset;
}

.map-key-container {
    width: max-content;
    height: max-content;

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

    position: sticky;
    top: 0;
}

table, table tr, table td {
    border: calc(1px * var(--scale)) solid white;
    border-collapse: collapse;
    padding: calc(2px * var(--scale));
    height: max-content;
    width: max-content;
    line-height: 1;
}

table td>div {
    display: flex;
}

table tr:nth-child(2n):not(.th) {
    background-color: unset;
}

img.icon,
table.map-key img {
    width: var(--font-regular);
    height: var(--font-regular);
}

img.icon {
    transform: translateY(calc(2px * var(--scale)));
}

table.map-key td:nth-child(1) {
    width: var(--font-regular);
}

.map-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.map {
    width: calc(146px * var(--scale));
}

/*#endregion Maps*/

/*#region Fusion Form*/
.fusion-form-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fusion-form-selects {
    margin: calc(8px * var(--scale)) 0;
    display: grid;
    grid-template-columns: max-content max-content;
    width: max-content;
    gap: calc(2px * var(--scale));
    place-items: center;
}

.fusion-form-selects label, .fusion-form-selects input {
    font-family: 'DDS', monospace;
    color: white;
    width: 100%;
    text-align: right;
    padding: 0 !important;
}

.fusion-form-selects input {
    text-align: center;
}

#fusion-results {
    margin-top: calc(8px * var(--scale));
    width: 100%;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#fusion-results th {
    background: #252525;
    color: white;
}

#fusion-results th, #fusion-results td {
    text-align: center;
    white-space: pre;
}

#fusion-results .mobile-only {
    font-size: var(--font-small);
}

#fusion-results .mobile-only table {
    width: 100%;
}

#fusion-results .mobile-only th {
    width: 102px;
}

/*#endregion Fusion Form*/

/*#region Media Queries*/
@media screen and (max-width: 1079px) {
    :root {
        --scale: 3;
    }

    body {
        padding: calc(9px * var(--scale));
    }

    table, tr, th, td {
        font-size: inherit;
        padding: inherit;
    }

    a .return-to-top {
        bottom: calc(0px * var(--scale));
        left: calc(0px * var(--scale));
    }

    .map-card-inner {
        display: flex;
        flex-direction: column;
    }

    .map-key-container {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .map {
        width: 100%;
    }

    .fusion-form-selects {
        display: grid;
        grid-template-columns: max-content;
        width: max-content;
        gap: calc(2px * var(--scale));
        place-items: center;
    }

    .fusion-form-selects label {
        text-align: center;
    }
}

/*#endregion Media Queries*/