style.css

:root {
  --color-red: rgb(216 50 50);
  --color-orange: rgb(249, 141, 63);
  --color-green: rgb(86 216 50);
  --color-blue: rgb(57 123 200);
  --color-yellow: rgb(210 190 49);
  --color-turquoise: rgb(57, 201, 201);
  --color-darkgreen: rgb(79, 138, 62);
  --color-gray: rgb(92, 92, 92);
  --color-black: rgb(23, 23, 23);

  --color-active: var(--color-yellow);
}

body {
  margin: 0;
  background-image: radial-gradient(hsla(230, 5%, 80%, 0.08) 2px, transparent 0), radial-gradient(hsl(0deg 0% 100% / 8%) 1px, transparent 0);
  background-size: 32px 32px, 8px 8px;
  background-position: center;
  background-color: hsl(230deg 5% 9%);
  position: relative;
}

.wrapper {
  position: static;
  display: flex;
  padding: 4vw;
  width: 100%;

  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
}

.header {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
}

.text {
  font-family: Fira Code, sans-serif;
  color: white;
  padding-bottom: 1em;
}

.text > p {
  font-family: Fira Code, monospace;
  font-size: 1rem;
  padding-bottom: 1rem;
  margin: 0;
}

.text > h1 {
  font-family: Fira Code, monospace;
  font-size: 2rem;
  font-weight: 500;
  padding-top: 0.1rem;
  padding-bottom: 1.5rem;
  margin: 0;
}

.text > h2 {
  font-family: Fira Code, monospace;
  font-size: 1rem;
  padding: 0;
  margin: 0;
  line-height: 1;
}

.text > h1:hover, h2:hover {
  cursor: pointer;
}

.sketch {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
}

.simulation-speedometer {
  font-family: Fira Code, monospace;
  font-size: 0.75rem;
  color: gray;
  text-align: end;
}

.interface {
  padding-bottom: 1em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  width: 100%;
}

.interface > * > button, .trashbin {
  background-color: #252525;
  border-color: #313131;
  border-style: solid;
  border-radius: 10px;
  border-width: 4px;
  font-family: Fira Sans, sans-serif;
  font-size: 0.75rem;
  color: white;
  line-height: 1;
  padding: 5px;
  margin: 3px;
  cursor: pointer;
}

.controls {
  display: inline-flex;
}

.trashbin {
  border-color: var(--color-red);
  border-style: dotted;
  color: gray;
  cursor: default;
}

.interface > * > button:hover {
  border-style: dotted;
}

.edges, .gates {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}

svg {
  width: 100%;
  height: 100%;
}

svg > path {
  fill: none;
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .3));
  stroke-width: 5;
  stroke: rgb(40,40,40);
  stroke-linejoin: round;
}

svg > path.active {
  stroke: var(--color-active);
  stroke-dasharray: 2 7;
  stroke-linecap: round;
  stroke-dashoffset: 1000;
  animation: drawPath 70s linear forwards infinite;
  pointer-events: none;
}
@keyframes drawPath {
  to {
      stroke-dashoffset: 0;
  }
}

svg > path.drawing {
  stroke: rgb(241, 59, 150);
  stroke-dasharray: none !important;
  stroke-linecap: unset !important;
}

svg > path.illegal {
  stroke: var(--color-red);
}

svg > path.legal {
  stroke: var(--color-green) ;
}

svg > path, .gate {
  pointer-events: all;
}

.gate {
  position: absolute;
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .4));
  background: var(--color-blue);
  border-radius: 5px;
  border-style: inset;
  border-color: hsla(230, 5%, 80%, 0.20);
  border-width: 3px;
  box-sizing: border-box;
}
.gate:hover {
  cursor: move;
}

.gate-label, .gate-info-pill {
  font-family: Fira Code, sans-serif;
  font-size: 12px;
  color: white;
  margin: 0;
  padding-left: 2px;
  padding-right: 2px;
  word-break: keep-all;
  white-space: nowrap;
  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

.gate-info-pill {
  font-size: 9px;
  margin-right: 2px;
  margin-top: 1px;
  background-color: rgba(0, 0, 0, .3);
  border: none;
  border-radius: 5px;
}

.gate-inputs {
  height: 100%;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.gate-outputs {
  height: 100%;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.gate-connector {
  background: hsl(230deg 5% 9%);
  border-radius: 10px;
  border-style: inset;
  border-color: hsla(230, 5%, 80%, 0.08);
  border-width: 5px;
  box-sizing: border-box;

  margin-bottom: 2px;
}
.gate-connector:hover {
  cursor: pointer;
}

.gate-connector:last-child {
  margin-bottom: 0%;
}

.gate-connector.illegal {
  background: var(--color-red) ;
}

.gate-connector.legal {
  stroke: var(--color-green) ;
}

/* Specific gate styles */

.gate.lamp-on {
  filter: drop-shadow(0 0 1rem var(--color-yellow));
  background: var(--color-yellow) !important;
}

.gate.switch:hover {
  cursor: pointer;
}