body {
  max-width: 560px;
  padding: 20px;
  margin: auto;
  font: normal normal normal 14px/22px 'Lucida Console', Monaco, monospace;
}

main {
  display: grid;
  gap: 16px;
}

/** Button **/
button {
  border: 1px solid black;
  background: transparent;
  color: black;
  border-radius: 0;
  padding: 8px 12px;
  cursor: pointer;
  outline: none;
  transition: 0.5s ease;
  transition-property: transform, opacity, background, color;
  will-change: transform, opacity, background, color;

  &:hover,
  &:disabled {
    background-color: black;
    color: white;
  }
  &:disabled {
    opacity: 0.3;
  }
  &:active {
    transform: scale(0.9);
  }
  * + button {
    margin-left: 8px;
  }
}

/** fieldset **/
fieldset {
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin: 0;
  padding: 20px;
}
legend {
  text-align: center;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.8);
}
.grid {
  display: grid;
  grid: 1fr / minmax(100px, max-content) 1fr;
  gap: 8px;
}
input,
code {
  padding: 4px 12px;
  border: 1px solid rgb(118, 118, 118);
  border-radius: 0;
  font: inherit;
}
code {
  background-color: #eee;
}
label {
  line-height: 32px;
}
hr {
  border: none;
  border-bottom: solid 1px #ccc;
  width: 100%;
  grid-column: 1 / span 2;
}
.copy-status {
  font-size: 12px;
  color: green;
}