journee-wysiwyg-code-interface/assets/style.css

* {
    --touch-size: 5em;
    --touch-gap: 0.25em;

    --border-style: 2px solid var(--text-color);
    --text-color: brown;
    --bright-color: deeppink;
    --line-height: 1.2em;
    --indent: 0.9rem;
}

body {
    font-family: ft88;
    color: var(--text-color);
}

main {
}

details {
    position: relative;
}

details > :not(summary) {
    margin-left: var(--indent);
    color: var(--bright-color);
}

details > summary {
    color: var(--text-color);
}

details[open]::before {
    content: "";
    position: absolute;
    top: var(--line-height);
    bottom: 0;
    left: 0.2em;
    border-left: var(--border-style);
}

summary {
}

.box {
    max-width: 40rem;
    border: var(--border-style);
    padding: 1em;
    margin-bottom: var(--line-height);
}

#test1 {
    font-family: ft88;
}

#test2 {
    font-family: Univers LT Std 55;
}

#test3 {
    font-family: Arcade classic;
}

#test4 {
    font-family: Bitcount Single;
}

#test5 {
    font-family: FedraNine;
    font-weight: bold;
}

#test6 {
    font-family: FedraEleven Normal;
}

h1 {
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
}

a {
    color: dodgerblue;
}

address {
    font-style: normal;
}

#keyboard {
    text-align: center;
    display: none;
}

#keyboard span {
    font-family: sans-serif;
    display: inline-flex;
    margin: var(--touch-gap);
    width: var(--touch-size);
    height: var(--touch-size);
    background-color: bisque;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

#fingers {
    display: none;
}

#fingers img {
    width: 30px;
}

#keyboard span.space-bar {
    width: calc(8 * var(--touch-size));
}

.cover {
    font-size: 9em;
    height: fit-content;
    position: relative;
    padding-bottom: 1.5em;
}

.code {
    /* transform: rotate(30deg); */
    position: relative;
    /* top: 1em; */
}

.interface {
    /* transform: rotate(-30deg); */
    position: relative;
    /* top: 1em; */
}