@font-face {
  font-family: Gerry;
  src: url('./Gerry.otf');
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 18px;
  line-height: 30px;
}
.main {
  max-width: 900px;
  margin: 0 auto;
}
.big {
  font-size: 80px;
  line-height: 80px;
  font-family: Gerry, serif;
  text-align: center;
}
.green,.blue,.red,.orange,.yellow{
  border-radius: 3px;
}
.green {
  background: #ccff90;
}
.blue {
  background: #80d8ff;
}
.red {
  background:  #ff8a80;
}
.orange {
  background: #ffd180;
}
.yellow {
  background: #ffff8d;
}
.rhover:hover {
  background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
  -webkit-background-clip: text;
  color: transparent;
}
pre {
  font-size: 12px !important;
}

.split {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#output {
  border: 1px solid black;
  width: 500px;
  margin: 1em;
  padding: 1em;
}

#output .katex-display > .katex {
  text-align: left;
}
#output .katex-display {
  margin: 0;
}
svg > path {
  stroke-width: 2px;
}
.democrat {
  stroke: #4992D6
}
.republican {
  stroke: #D02C2C;
}
.hover {
  stroke-width: 2px;
  stroke: black;
}
.text {
  color: black;
  text-decoration: none;
}
.democratfill {
  fill: rgba(0,0,255,0.3);
}
.republicanfill {
  fill: rgba(255,0,0,0.3);
}
.tiefill {
  fill: rgba(255,0,255,0.3);
}
h3 {
  text-align: center;
}