:root {
  font-family: Arial, sans-serif;
  --unit: calc(1vw + 0.3vh);
  --color-text: #000000;
  --color-highlight: #6304d7;
}

html {
  color: var(--color-text);
}

h1, h2 {
  color: var(--color-highlight);
}

h1 {
  font-size: 1.8rem;
}

a {
  color: var(--color-highlight);
}

textarea {
  resize: vertical;
}

button, .button {
  font-size: 1rem;
  padding: 0.3rem 1rem;
  margin: 0.2rem 0;
  border-radius: 1rem;
  background: #dcdcdc;
  border-width: 0.1rem;
  cursor: pointer;
  background: var(--color-highlight);
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
}

.valid, .invalid {
  padding: calc(0.2 * var(--unit));
  border-radius: 0.6rem;
  border: solid 2px black;
}

textarea.valid, textarea.invalid, input.valid, input.invalid {
  padding: calc(0.3rem + 0.2 * var(--unit)) calc(0.6rem + 0.2 * var(--unit));
}

.content-area {
  margin: 0 auto;
  padding: 0 3%;
  max-width: 1100px;
  text-align: left;
}

.valid {
  border-color: green;
}

.invalid {
  border-color: red;
}

.draft, .published {
  font-weight: bold;
}

.draft {
  color: red;
}

.published {
  color: green;
}