@font-face {
    font-family: "Unifont Upper";
    src: url('../fonts/unifont-upper-16.0.02.otf') format('opentype');
}

@font-face {
    font-family: "Unifont";
    src: url('../fonts/unifont-16.0.02.otf') format('opentype');
}

:root {
    --scale: 2;

    --red: #d55e00;
    --pink: #cc79a7;
    --orange: #e69000;
    --yellow: #f0e442;
    --green: #009e73;
    --light-blue: #56b4e9;
    --blue: #0072b2;
    --purple: #654d73;

    --black: #000000;
    --gray: #aeb3b8;
    --white: #ffffff;

    --skin1: #e8d9ca;
    --skin2: #ccc199;
    --skin3: #ab8859;
    --skin4: #5f3f35;
    --skin5: #3f352c;
}

* {
    font-family: "Unifont", "Unifont Upper";
    font-size: calc(16px / var(--dpr) * var(--dpri));
    font-smooth: never;
    -webkit-font-smoothing: none;
    accent-color: var(--blue);
    overscroll-behavior: none;
    scrollbar-color: var(--blue) var(--gray);
}

html {
    background: var(--purple);
}

body {
    margin: auto;
    padding: 16px;
    border-inline: 8px ridge var(--gray);
    width: min-content;
    background: var(--gray);
}

h1 {
    font-size: 200%;
    color: var(--blue);
    background: var(--white);
    border-block: 4px ridge var(--blue);
    padding-block: 8px;
    margin-block-start: 0;
}

h2 {
    font-size: 200%;
    color: var(--blue);
    border-block-end: 4px ridge var(--blue);
}

h3 {
    color: var(--blue);
    border-block-end: 2px solid var(--blue);

}

table, fieldset {
    border: 6px ridge var(--blue);
}

fieldset {
    background: var(--light-blue);
    margin: 0;
    border-block-end: none;
    margin-block: 0;

    fieldset {
        display: inline-block;
        border: none;
        padding-block: 0;
    }
}

select {
    background-color: var(--yellow);
    border: 3px ridge var(--orange);
}

input[type="radio"] {
    accent-color: var(--blue);
}

a {
    color: var(--blue);

    &:visited {
        color: var(--purple);
    }
}

.palette {
    display: grid;
    grid-template-columns: repeat(8, min-content);
    margin-inline: auto;
    margin-block: 32px;
    padding: 0;

    &>li {
        display: inline;
        border: 6px inset var(--gray);

        &>div {
            width: 64px;
            height: 64px;

            &.red { background-color: var(--red); }
            &.pink { background-color: var(--pink); }
            &.orange { background-color: var(--orange); }
            &.yellow { background-color: var(--yellow); }
            &.green { background-color: var(--green); }
            &.light-blue { background-color: var(--light-blue); }
            &.blue { background-color: var(--blue); }
            &.purple { background-color: var(--purple); }
            &.black { background-color: var(--black); }
            &.gray { background-color: var(--gray); }
            &.white { background-color: var(--white); }
            &.skin1 { background-color: var(--skin1); }
            &.skin2 { background-color: var(--skin2); }
            &.skin3 { background-color: var(--skin3); }
            &.skin4 { background-color: var(--skin4); }
            &.skin5 { background-color: var(--skin5); }
        }
    }
}

table {
    background: var(--white);
    border-collapse: collapse;
    min-width: 100%;
}

#glyphs {
    min-height: calc(100dvh - 16px);
    display: flex;
    flex-direction: column;
}

tbody tr {
    border-top: 1px solid var(--light-blue);
}

th, td {
    border: none;
    text-align: center;
    padding-inline: 8px;
}

.number, .code, .name {
    text-align: start;
    padding-inline: 1em;
}

.unifont, #comfont-glyphs .text, .noto-symbol {
    border-inline-start: 2px ridge var(--gray);
}

#unifont-glyphs .accepted img {
    background: var(--green);
    border-radius: 10%;
}

td:is(.unifont, .text, .emoji, .color, .diff) :is(img, canvas) {
    padding: 2px;
    width: calc(16px * var(--scale) / var(--dpr) * var(--dpri));
    height: calc(16px * var(--scale) / var(--dpr) * var(--dpri));
    image-rendering: pixelated;
}

.representative img {
    width: calc(1.3 * 20px * var(--scale) / var(--dpr) * var(--dpri));
    height: calc(1.3 * 20px * var(--scale) / var(--dpr) * var(--dpri));

    padding-top: 8px;
    margin: -8px;

    image-rendering: initial;
}

img.text-style-default {
    border: calc(2px * var(--scale)) solid var(--yellow);
}

img.unchanged {
    opacity: 0.125;
}

#hex {
    display: block;
    margin: auto;
    background: var(--black);
    color: var(--light-blue);
    border: 6px ridge var(--blue);
    scrollbar-color: var(--skin2) var(--black);
}

.note {
    background: var(--yellow);
    border: 6px ridge var(--orange);
    padding: 6px;
    margin-inline: -6px;
}