html,
body {
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 0;
}

#highlighter {
  display: grid;
  grid-gap: 0.5em;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2em 1fr 1.5em;
  grid-template-areas:
    "language theme"
    "code output"
    "footer footer";

  height: 100%;
  width: 100%;
  max-width: 800px;
}

@media (max-width: 600px) {
  #highlighter {
    grid-template-columns: 1fr;
    grid-template-rows: 2em 2em 1fr 1fr 1.5em;
    grid-template-areas:
      "language"
      "theme"
      "code"
      "output"
      "footer";
  }
}

#language {
  grid-area: language;
  margin: 0;
  border-radius: 4px;
}

#theme {
  grid-area: theme;
  margin: 0;
  border-radius: 4px;
}

#code {
  grid-area: code;
  font-family: monospace;
  padding: 1em;
  margin: 0;
  resize: none;
  border-radius: 4px;
}

.output-area {
  grid-area: output;

  display: flex;
  flex-direction: column;
}

#output {
  font-family: monospace !important;
  font-size: initial !important;
  line-height: initial !important;
  padding: 1em;
  margin-bottom: 0.5em;
  flex: 1;
  white-space: pre-wrap;
  border-radius: 4px;
}

#output span[class=""] {
  color: white;
}

#copy {
  width: 100%;
  border-radius: 4px;
}

footer {
  background-color: #4a4a4a;
  border-radius: 4px 4px 0 0;
  grid-area: footer;
  position: relative;
  font-size: 0.8em;
  display: flex;
  justify-content: center;
}

footer:hover {
  cursor: pointer;
  user-select: none;
  background-color: #5e5e5e;
  color: white;
}

footer > * {
  opacity: 0;
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  transition: opacity 0.15s ease-in-out;
  z-index: -1;
}

footer > .visible {
  opacity: 0.8;
  z-index: 1;
}

footer span img {
  width: auto;
  height: 1.2em;
  margin: 0;
  margin-bottom: -0.2em;
}