*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  --bg: oklch(0.2 0.02 309.11);
  --bg-light: color-mix(in oklch, var(--bg) 90%, var(--fg) 10%);
  --fg: oklch(0.93 0.01 313.21);
  --link: oklch(0.85 0.09 228.42);
  --max-width: 1000px;
}

html,
body {
  scrollbar-gutter: stable both-edges;
  padding: 0;
  margin: 0;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: sans-serif;
}

main {
  width: min(100vw, var(--max-width));
  margin-inline: auto;
  padding: 1rem;
  display: grid;
  gap: 1rem;
  grid: "head head" auto "src out" auto / 1fr 1fr;

  @media screen and (max-width: 800px) {
    flex-direction: column;
  }
}

.head {
  grid-area: head;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.pane {
  position: relative;
  flex-grow: 1;
  display: flex;

  &:first-child {
    justify-content: end;
  }

  &.src {
    grid-area: src;
  }

  &.out {
    grid-area: out;
  }

  textarea {
    width: 100%;
    height: 100%;
    min-height: 50vh;
    font-size: 120%;
    padding: 0.5rem;
    border-radius: 5px;
    border: 1px solid color-mix(in oklch, var(--bg) 90%, black 10%);
    color: var(--fg);
    background-color: var(--bg-light);

    &:focus-visible {
      outline: 5px solid color-mix(in oklch, var(--fg) 50%, var(--bg) 50%);
    }

    &#output {
      resize: none;
    }
  }
}

button#copy {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: color-mix(in oklch, var(--bg-light) 50%, var(--fg) 50%);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease-in-out;

  &:hover {
    color: var(--fg);
  }
}