pre:has(code) {
  position: relative;
  overflow-y: auto;

  padding-inline: 0.5rem;
  padding-block-end: 0.5rem;
  margin: 0.5rem 0;

  border-radius: 0.25rem;

  background-color: #272822;
  color: #F8F8F2;
}

pre:has(code) button {
  display: block;

  position: sticky;
  top: 0;
  left: 0;

  margin-block: 0.5rem;

  font-size: 0.9rem;
  background-color: #828282;

  border: ridge 1px #7b7b7c;
  border-radius: 0.25rem;
  text-shadow: #c4c4c4 0 0 2px;
}

pre:has(code) button:hover {
  background-color: #bcbabb;
}

body {
  min-height: 100dvh;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

article {
  width: 100%;
  max-width: 75%;

  padding-inline: 0.25rem;
}

code {
  font-size: 1rem;
  font-family: "Fira Code", monospace;
}

span.desc {
  color: blue;
}