.terminal-content {
  position: relative;
}

.terminal-top {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background: #3e4552;
  color: white;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.terminal-code {
  display: flex;
  margin-top: 0 !important;
}

.terminal-content code[class*='language-'],
.terminal-content pre[class*='language-'] {
  color: #bac8d4;
  background: #282c33;
}

.terminal-content .token.number,
.terminal-content .token.function {
  color: #ffaf00;
}

.terminal-content .token.user {
  color: #bac8d4;
}

.terminal-top:after {
  display: block;
  position: absolute;
  content: '';
  top: 14px;
  left: 1em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #f44;
  box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #b2e028, 3em 0 0 2px #ff9c07;
}

.terminal-content.attacker .terminal-code,
.terminal-content.attacker code[class*='language-'] {
  background: #512323;
}

.terminal-content.defender .terminal-code,
.terminal-content.defender code[class*='language-'] {
  background: #1e3c61;
}