:root {
    color-scheme: light dark;
}

h1,
h2,
h3 {
    font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
}

body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
}

pre {
    font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}

code {
    font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}

textarea {
    font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}

#adminButtons {
    opacity: 0;
    transition: opacity 0.5s ease;
}

#adminButtons:hover {
    opacity: 1;
}

#container {
    margin: auto;
    padding: 10px 20px 10px 20px;
    background-color: color-mix(in oklab, Canvas, light-dark(black, white) 5%);
    z-index: 2;
    position: relative;
}

.boxform {
    padding: 10px;
    border: 1px solid gray;
    margin: 0;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

.valign-top {
    vertical-align: top;
}

.feelings {
    margin: 10px;
}

.activity-cell {
    padding: 0;
    width: 14px;
    height: 14px;
}

.commentBox {
    margin: 10px;
    padding: 5px;
    border: 1px solid gray;
}

.commentAuthor {
    padding-left: 5px;
}

.commentContent {
    padding-left: 20px;
}

.commentOK {
    background-color: color-mix(in srgb, springgreen, transparent 80%);
}

.commentHMM {
    background-color: color-mix(in srgb, palegreen, transparent 80%);
}

.commentERR {
    background-color: color-mix(in srgb, lightsalmon, transparent 80%);
}

.commentDOH {
    background-color: color-mix(in srgb, tomato, transparent 80%);
}

.praise {
    color: light-dark(blue, deepskyblue);
}

.worry {
    color: light-dark(green, springgreen);
}

.damn {
    color: red;
}

.qrcode-container {
    width: 256px;
    height: 256px;
    margin: 0 auto;
}

.scores-table table {
    border-collapse: collapse;
}

tr:nth-child(even) {
    background-color: light-dark(lightgray, darkgray);
}

.scores-table table,
.scores-table th,
.scores-table td {
    border: 1px solid black;
}

.scores-table th,
.scores-table td {
    padding: 0px 5px;
}

.marx-pie-chart {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px CanvasText solid;
}

.truthtable-inputs {
    background-color: light-dark(white, black);
}

.truthtable-outputs {
    background-color: light-dark(yellow, red);
}

.truthtable-ones {
    background-color: white;
    color: black;
}

.truthtable-zeros {
    background-color: black;
    color: white;
}

.oopsy {
    position: absolute;
    top: 0;
    background-color: lightsalmon;
    border: 7px solid red;
    padding: 20px;
}

.persona-box {
    border: 2px solid light-dark(black, gray);
    margin: 50px;
    padding: 5px;
    border-radius: 10px;
}

.persona-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid light-dark(black, gray);
    margin: -20px 0 0 -20px;
    float: left;
}

.persona-identity {
    padding-left: 45px;
}

.persona-comment {
    padding-left: 10px;
}

.two-columns {
    display: flex;
}

.left-column {
    flex: 1;
    padding: 0 20px 0 0;
}

.right-column {
    flex: 1;
    padding: 0 0 0 20px;
}

.syrup-table {
    width: 100%;
}

.ask-table {
    width: 100%;
}

.syrup-input {
    width: 50%;
}

.ask-input {
    width: 100%;
}

.codeflask {
    position: relative !important;
    /*  width: 500px !important; */
    background-color: light-dark(white, #1e1e24) !important;
    color: CanvasText !important;
}

.codeflask__lines {
    color: CanvasText !important;
}

.codeflask__textarea {
    caret-color: CanvasText !important;
}

@media (prefers-color-scheme: dark) {
    div[id^="GRAPH"] > svg {
        filter: invert(100%) hue-rotate(180deg) saturate(1000%);
    }
}

#box {
    position: relative;
    padding: 20px;
}

#container {
    max-width: 1080px;
}

.assembly-labels {
    background-color: light-dark(white, black);
}

.assembly-offsets {
    background-color: light-dark(yellow, red);
}

.assembly-instructions {
    background-color: light-dark(white, black);
}

.assembly-headers {
    background-color: light-dark(white, black);
}

.assembly-cells {
    background-color: light-dark(yellow, red);
}

.assembly-operators {
    background-color: light-dark(palegreen, forestgreen);
}

.assembly-operands {
    background-color: light-dark(plum, indigo);
}

.assembly-data {
    background-color: light-dark(pink, hotpink);
}

.syrup-table table,
.syrup-table th,
.syrup-table td {
    border: 1px solid;
    border-collapse: collapse;
    font-family: monospace;
    padding: 0 4px 0 4px;
}
.syrup-code {
    display: block;
    font-family: monospace;
    font-size: 17px;
    white-space: pre;
    margin: 1em 0;
}

/* Syrup feedback */

.syrup-happy:before {
    content: "\2705";
    padding: 0 6px 0 0;
}
.syrup-comment:before {
    content: "\2705";
    padding: 0 6px 0 0;
}
.syrup-warning:before {
    content: "\26A0\FE0F";
    padding: 0 6px 0 0;
}
.syrup-error:before {
    content: "\274C";
    padding: 0 6px 0 0;
}
.syrup-internal:before {
    content: "\1F480";
    padding: 0 6px 0 0;
}

/* Syrup syntax */

.syrup-editor {
    height: 200px;
}
.syrup-function,
.syrup-function2,
.syrup-operator {
    color: light-dark(blue, #66d9ef);
}
.syrup-variable {
    color: light-dark(purple, #fc929e);
}
.syrup-type {
    color: light-dark(forestgreen, #a6e22e);
}
.syrup-keyword {
    color: light-dark(#8500ff, #cc66dd);
}
.syrup-symbol {
    color: light-dark(darkslateblue, lightblue);
}
.syrup-commented {
    color: light-dark(firebrick, gray);
}

/* Syrup outputs: 7 segments display */

.syrup-7segmentsdisplay {
    line-height: 0;
    width: 29px;
    height: 46px;
    padding: 5px;
    background-color: #1e1e24;
}
.syrup-7segmentsdisplay > div {
    position: relative;
}
.syrup-segment1 {
    background-color: #ff2c0f;
}
.syrup-segment0 {
    background-color: #631605;
}
.syrup-segmentB,
.syrup-segmentC,
.syrup-segmentE,
.syrup-segmentF {
    display: inline-block;
    width: 4px;
    height: 17px;
    clip-path: polygon(0 2px, 2px 0px, 4px 2px, 4px 15px, 2px 17px, 0px 15px, 0 2px);
    margin: 0;
    padding: 0;
}
.syrup-segmentA,
.syrup-segmentD,
.syrup-segmentG {
    clip-path: polygon(0 2px, 2px 0px, 23px 0px, 25px 2px, 23px 4px, 2px 4px, 0 2px);
    width: 25px;
    height: 4px;
    left: 2px;
    margin: 0;
}
.syrup-segmentC,
.syrup-segmentF {
    left: 21px;
}

/* Syrup outputs: braille matrices */

.syrup-brailledisplay {
    width: 46px;
    height: 70px;
    line-height: 0;
    padding: 5px;
}
.syrup-brailledisplay > div {
    display: inline-block;
    width: 15px;
    margin: 3px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid light-dark(black, white);
}
.syrup-brailleTR,
.syrup-brailleMR,
.syrup-brailleBR {
    display: inline-block;
    left: 25px;
}
.syrup-braille0 {
    background-color: white;
}
.syrup-braille1 {
    background-color: black;
}

/* Syrup editor (stands in for CodeFlask: textarea over a highlighted <pre>) */

.syrup-editor {
    position: relative;
    min-width: 40ch;
    border: 1px solid gray;
    background: Canvas;
    overflow: hidden;
}
.syrup-editor textarea,
.syrup-editor pre {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    border: none;
    outline: none;
    resize: none;
    overflow: auto;
    font-size: 13px;
    line-height: 20px;
    white-space: pre;
    tab-size: 2;
}
.syrup-editor textarea {
    z-index: 2;
    background: none;
    color: transparent;
    caret-color: CanvasText;
}
.syrup-editor pre {
    z-index: 1;
    pointer-events: none;
    color: light-dark(#4f559c, #c8c8e8);
}
.syrup-input {
    width: 50%;
}
.syrup-output {
    padding-left: 1em;
}