style.css

#root {
    --a: #fff;
    --b: #5af;
    --c: #f5f;
    --d: #5af;
    --e: #fa5;
}
#root.dark {
    --a: #242628;
    --b: #4c565f;
    --c: #c4c4c4;
    --d: #5187b8;
    --e: #ff7171;
}
#root.light {
    --a: #fafbfc;
    --b: #5c656e;
    --c: #09090a;
    --d: #2c6496;
    --e: #d21515;
}
@media (prefers-color-scheme: dark) {
    #root {
        --a: #242628;
        --b: #4c565f;
        --c: #c4c4c4;
        --d: #5187b8;
        --e: #ff7171;
    }
}
@media (prefers-color-scheme: light) {
    #root {
        --a: #fafbfc;
        --b: #5c656e;
        --c: #09090a;
        --d: #2c6496;
        --e: #d21515;
    }
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#root {
    background: var(--a);
    border: var(--b);
    color: var(--c);
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
}

#root>hr {
    display: none;
}

a {
    color: var(--d);
}

footer {
    margin-top: auto;
    font-size: .75em;
    padding: 1.5em;
    display: flex;
    flex-direction: row;
}
footer>p {
    border-top: solid 1px var(--b);
    padding-top: 1.5em;
    flex: 2 1 0px;
    text-align: right;
}
@media (min-width: 720px) {
    footer>p {
        padding-left: 10%;
    }
}
footer>ul {
    border-top: solid 1px var(--b);
    padding-top: 1.5em;
    flex: 1 1 0px;
}

header {
    padding: 1.5em;
    display: flex;
    justify-content: space-between;
}
header a {
    color: var(--c);
    text-decoration: none;
}
header h1 {
    font-size: 1.5em;
    margin: 0;
}
header button#theme-change {
    background: var(--c);
    border: solid 2px var(--c);
    border-radius: .9em;
    color: var(--b);
    align-self: center;
    font-size: 1.7em;
    overflow: hidden;
    max-width: 1.7em;
    max-height: 1.7em;
    white-space: nowrap;
}
header button#theme-change::before {
    /*content: '\25d0\a0\a0\a0';*/
    content: '\2009\1f506\a0\a0\a0';
}

form#search-bar {
    text-align: center;
}
form#search-bar input,
form#search-bar button {
    font-size: 1.5em;
    border: solid 3px var(--b);
}
form#search-bar input {
    border-radius: .5em 0 0 .5em;
    border-right: none;
    padding-left: .3em;
    max-width: 75vw;
}
form#search-bar button {
    border-radius: 0 .5em .5em 0;
    border-left: none;
    overflow: hidden;
    max-width: 1.7em;
    white-space: nowrap;
}
form#search-bar button::before {
    content: '\2009\1f50d\a0\a0\a0';
    /*content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42'%3E%3Cpath d='...' stroke='%2300F' stroke-width='5'/%3E%3C/svg%3E");
    /* YYY: emoji good enough */
}

#page-content {
    margin: 5em 20vw;
}
@media (max-width: 720px) {
    #page-content {
        margin: 10vw;
    }
}

.page-found #number-input {
    position: absolute;
    right: 20vw;
}
.page-found ol {
    list-style: none;
    padding: 0;
}

.result {
    margin-bottom: .5em;
    border-bottom: solid 1px var(--b);
}
.result .repr {
    float: left;
    font-size: 3em;
    font-family: serif;
    /*width: 12%;*/
    padding: .5em;
    padding-bottom: 0em;
}
.result .info {
    padding: 4em;
    padding-bottom: 0.5em;
}
@media (max-width: 720px) {
    .result .info {
        padding-right: 0;
        padding-left: 0;
    }
}
.result .overview {
    margin-left: 6em;
}
.result .computed {
    float: right;
}
.result .computed.empty {
    font-size: .75em;
}
.result .computed.filled {
    font-size: 1.5em;
    max-width: 100%;
    overflow: auto;
    padding-top: .5em;
}
.result details {
    padding-top: 3.5em;
}
.result summary {
    padding: 1em;
    text-align: center;
    font-family: monospace;
    cursor: pointer;
    color: var(--b);
}
.result summary::marker,
.result summary::after {
    content: '\25bc';
}
.result details[open] summary::marker,
.result details[open] summary::after {
    content: '\25b2';
}
.result summary::before {
    content: ' more ';
}
.result details[open] summary::before {
    content: ' less ';
}
.result .info table {
    width: 100%;
    padding: .2em 1em;
    border: solid 1px var(--b);
    border-radius: 4px;
    border-spacing: 0;
}
.result .info td {
    border-top: solid 1px var(--b);
}
.result .info th:nth-child(1) {
    width: 20%;
}
.result .info th:nth-child(2) {
    width: 30%;
}
.result .info tr.exception {
    /*font-style: italic;
    /* XXX: simply changing color not good,
       but not sure what else to do... */
    color: var(--e);
}