code {
  margin: 0;
  padding: 0;
  clear: both;
  word-wrap: break-word;

  border-radius: 3px;
  color: var(--snow-storm-1);
  background-color: var(--polar-night-1);
}

pre.highlight {
  margin: 0;
  padding: 0;

  background-color: var(--polar-night-1);
}

code:not(pre code) {
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 14px;
  background-color: var(--polar-night-1);
  border: 1px solid var(--polar-night-4);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

div.highlighter-rouge {
  margin: 2em 0;
  padding: 0.8em 1.2em;
  overflow-x: auto;
  border-radius: 3px;

  font-size: 14px;
  white-space: pre-wrap;

  background-color: var(--polar-night-1);

  border: 1px solid var(--polar-night-4);
  box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
}

div::-webkit-scrollbar {
  height: 12px;
  background-color: var(--polar-night-1);
}

div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 3px solid var(--polar-night-1);

  background-color: var(--polar-night-4);

  transition: background-color 0.3s ease;
}

div::-webkit-scrollbar-thumb:hover {
  background-color: var(--frost-2);
}

.highlight .k {
  /* keyword */
  color: var(--aurora-5);
  font-weight: bold;
}

.highlight .nf {
  /* name.function */
  color: var(--frost-2);
  font-weight: bold;
}

.highlight .nb {
  /* name.builtin */
  color: var(--frost-3);
}

.highlight .s1 {
  /* string */
  color: var(--aurora-4);
}

.highlight .c1 {
  /* comment */
  color: var(--polar-night-4);
  font-style: italic;
}

.highlight .p {
  /* punctuation */
  color: var(--snow-storm-1);
}

.highlight .o {
  /* operator */
  color: var(--frost-3);
  font-weight: bold;
}

.highlight .m {
  /* number */
  color: var(--aurora-1);
}

.highlight .dl {
  /* literal */
  color: var(--aurora-4);
}

.highlight .ss {
  /* special sequence */
  color: var(--aurora-3);
}

.highlight .vc {
  /* variable */
  color: var(--frost-2);
}

.highlight .err {
  /* error */
  color: var(--aurora-1);
  background-color: var(--polar-night-2);
}

.highlight .gd {
  /* deleted */
  color: var(--aurora-1);
}

.highlight .gi {
  /* inserted */
  color: var(--aurora-4);
}

.highlight .gu {
  /* unchanged */
  color: var(--snow-storm-1);
}

.highlight .gp {
  /* line number */
  color: var(--polar-night-4);
}
