@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&family=PT+Sans+Caption:wght@700&family=PT+Sans:ital,wght@0,400;0,700;1,400&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  display: flex;
  flex-direction: column;
  --header-hue: 208.3;

  --explainer-color: hsl(0,0%,90%);
  --input-color: hsl(0,0%,70%);
  --output-color: hsl(0,0%,55%);

  --writer-hue: 11.2;
  --reader-hue: 33.6;

  --button-value: 45%;
  --button-hover-value: 48%;

  --tool-list-value: 60%;
  --tool-list-saturation: 85%;
  --tool-list-hover-saturation: 100%;

  --dark-accent-saturation: 100%;
  --dark-accent-value: 20%;

  --infobox-warning-hue: 8;
  --infobox-howitworks-hue: 205;
}

html, body {
  margin: 0;
  height: 100%;
}

h1 {
  font-family: 'PT Sans Caption', sans-serif;
  font-size: 20pt;
  margin-top: 0;
  margin-bottom: 0;
}

h3 {
  font-family: 'PT Sans', sans-serif;
  font-size: 14pt;
  margin-bottom: 4px;
  margin-top: 1em;
}

h3:first-child {
  margin-top: 0;
}

h4 {
  font-family: 'PT Sans', sans-serif;
  font-size: 13pt;
}

p {
  margin-top: 0;
  margin-bottom: .5em;
}

textarea {
  font-family: monospace;
  display: block;
}

label.textarea-label {
  display: block;
  font-family: 'PT Sans', sans-serif;
  font-size: 14pt;
  font-weight: bold;
  margin-bottom: .25em;
}

.header h1 {
  padding-bottom: .5rem;
  padding-top: .5rem;
  padding-left: .5em;
  display: inline-block;
}

.header .back {
  display: inline-block;
  width: 55px;
  height: 55px;
  vertical-align: top;
  position: relative;
  background-color: hsl(var(--header-hue), 68.5%, 75%);
  /* Bottom border as a box-shadow so it can overlap header's border */
  box-shadow: 0 1px 0 hsl(var(--header-hue), 75%, 50%);
}

.header .back a {
  position: absolute;
  text-decoration: none;
  line-height: 1em;
  padding: 18px;
  color: inherit;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.explainer {
  background-color: var(--explainer-color);
  padding: 1rem;
}

.input {
  background-color: var(--input-color);
  padding: .75rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid hsl(0,0%,55%);
}

.action {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
  border-radius: 30px;
  cursor: pointer;
  font-size: 12pt;
  font-family: 'PT Sans', sans-serif;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  line-height: 1em;
  border: 1px solid black;
}

.output {
  background-color: var(--output-color);
  padding: .75rem;
  position: relative;
  padding-top: 2.75rem;
  border-top: 1px solid black;
}

body > div:last-child {
  flex: 1 0;
  padding-bottom: 3rem;
}

.string-input {
  width: calc(100% - .5rem);
}

@media only screen and (min-width: 850px) {
  /* All the above CSS is primarily for mobile.
     Below we have tweaks to make the site look
     decent on desktop */

  /* Add animation and smaller click area to back link */
  .header .back a {
    display: unset;
    position: absolute;
    text-decoration: none;
    line-height: 1em;
    color: inherit;
    padding: 1px 6px;
    height: unset;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    transition: padding-right 1s;
  }
  .header .back a:hover {
    padding-right: calc(6px + 20%);
    transition: padding-right .15s;
  }

  /* Separate explainer section into sidebar */
  body {
    display: grid;
    grid-template: min-content auto / minmax(320px, 20%) 1fr;
  }
  .header {
    grid-column: 1 / 3;
    flex-grow: 0;
  }
  .explainer {
    grid-column: 1 / 1;
    grid-row: 2 / 4;
    overflow: scroll;
  }
  .input {
    grid-column: 2 / 3;

    padding-top: 1rem;

    border-top: unset;
    border-left: 1px solid hsl(0,0%,55%);
  }
  .output {
    grid-column: 2 / 3;

    padding-bottom: 1rem;

    border-left: 1px solid hsl(0,0%,40%);
  }
  .output, .input {
    padding-left: 5%;
    padding-right: 5%;
  }
  .input textarea {
    height: 12rem;
  }
  .output textarea {
    height: 30em;
  }
}