: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;
}

.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;
}

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

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