body {
  max-width: clamp(320px, 90%, 1800px);
  margin: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
  accent-color: #080;
  font-family: sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  max-width: 65ch;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  font-family: sans-serif;
}

@media (prefers-reduced-motion) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.input-container,
.output-container {
  flex: 1 1 300px;
  margin-bottom: 20px;
}

.output-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

textarea {
  width: 100%;
  height: 300px;
  padding: 10px;
  box-sizing: border-box;
  resize: vertical;
  font-family: monospace;
}

#outputCode {
  padding-right: 30px; /* Make room for the button */
}

#styleSelect,
#languageSelect,
#formatButton {
  margin-bottom: 20px;
  margin-right: 10px;
}

.copy-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.copy-button svg {
  width: 20px;
  height: 20px;
}