@import url("colours.css");

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-family: monospace;
}

pre span {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

i {
  font-weight: bold;
  font-size: 2em;
  font-style: italic;
  font-family: monospace;
  margin: 1em;
  display: block;
}

p {
  font-size: 1.3em;
  font-family: monospace;
  margin: 1em 3em 1em 4em;
  padding: 1em;
  max-width: 45ch;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  pre {
    padding: 0;
    margin: 0;
  }

  pre span {
    gap: 0.25em;
    padding: 0.5em;
  }

  i {
    font-size: 1.3em;
    margin: 0.5em 0.5em 0.25em 0.5em;
  }

  p {
    font-size: 1.1em;
    margin: 0.5em;
    padding: 0.5em;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  i {
    font-size: 1.1em;
    margin: 0.25em 0.5em;
  }

  p {
    font-size: 1em;
    margin: 0.5em;
    padding: 0.5em;
  }
}