.keyword {
  background: #ff000066;
  padding: 0.2em 0.2em 0.2em 0.2em;
}
.literal {
  background: #ffcc0066;
  padding: 0.2em 0.2em 0.2em 0.2em;
}
.identifier {
  background: #ffffff66;
  padding: 0.2em 0.2em 0.2em 0.2em;
}
.operator {
  background: #0000ff66;
  padding: 0.2em 0.2em 0.2em 0.2em;
}
.miscSymbol {
  background: #c0c0c066;
  padding: 0.2em 0.2em 0.2em 0.2em;
}
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  flex: 1 1 0;
}
.normal-code-container {
    padding: 0em 2em 0em 0em;
    word-spacing: 3px;
}
.token-container {
    padding: 0em 2em 0em 0em;
    min-width: 30em;
}
.next-button {
    border: none;
    background-color: #111111;
    color: #AAAAAA;
    padding: 1em 2em;
    text-align: center;
    width:100%;
    font-size: 20px;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted white;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
body {
  background-color: #000000;
  color: #ffffff;
  line-height: 2;
  font-family: monospace;
  font-size: 22px;
}