* {
  box-sizing: border-box;
}

html {
  font-size: 12px;
}

body {
  background-color: #eee;
}

#root {
  margin: 0 auto;
  margin-top: 7rem;
  padding: 3rem;
  font-size: 4rem;
  max-width: 75vw;
  color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  font-weight: bold;
  /* letter-spacing: 1rem; */
  /* line-height: 5rem; */
}

#root:hover {
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

#families {
  font-size: 1.5rem;
  padding: 0.3rem;
}

/* https://stackoverflow.com/a/29806043 */
#families:required:invalid {
  color: rgba(0, 0, 0, 0.5);
}

#families option[value=""][disabled] {
  display: none;
}

#families option {
  color: black;
}

#pick-font-color,
#pick-bg-color {
  display: inline-block;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaWQ9IlNWR1Jvb3QiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUwLjAgNTAuMCIKICAgaGVpZ2h0PSI1MC4wcHgiCiAgIHdpZHRoPSI1MC4wcHgiCiAgIGlua3NjYXBlOnZlcnNpb249IjEuMCAoNDAzNWE0ZmI0OSwgMjAyMC0wNS0wMSkiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImNvbG9yLXBpY2tlci5zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMxOTk3IiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpbmtzY2FwZTpzbmFwLWdyaWRzPSJmYWxzZSIKICAgICBpZD0iYmFzZSIKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMS4wIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp6b29tPSIxMi44ODQ3ODkiCiAgICAgaW5rc2NhcGU6Y3g9IjI0LjYxNjAyNiIKICAgICBpbmtzY2FwZTpjeT0iMjAuNjQ5MDI1IgogICAgIGlua3NjYXBlOmRvY3VtZW50LXVuaXRzPSJweCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtcm90YXRpb249IjAiCiAgICAgc2hvd2dyaWQ9InRydWUiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwNTIiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBpbmtzY2FwZTpvYmplY3QtcGF0aHM9InRydWUiPgogICAgPGlua3NjYXBlOmdyaWQKICAgICAgIGlkPSJncmlkMjU2NyIKICAgICAgIHR5cGU9Inh5Z3JpZCIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGEyMDAwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZSAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZwogICAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaWQ9ImxheWVyMSI+CiAgICA8Y2lyY2xlCiAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZS13aWR0aDowLjgwMDEzMiIKICAgICAgIGlkPSJwYXRoMjU3NCIKICAgICAgIGN4PSIyNSIKICAgICAgIGN5PSIyNSIKICAgICAgIHI9IjIyIiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMjU3OCIKICAgICAgIGQ9Im0gMjUuMTg4OTc2LDMgdiA0NCAwIgogICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MC4zNzc5NTM7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MC4wMTY0ODQ5IiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoMjU4NCIKICAgICAgIGQ9Im0gMywyNS4xIGggNDQgdiAwIgogICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2Y5ZjlmOTtzdHJva2Utd2lkdGg6MC4yO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjAuNDU5NzEyIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiNmOWY5Zjk7c3Ryb2tlLXdpZHRoOjAuMjtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eTowLjQ1OTcxMiIKICAgICAgIGQ9Im0gMjUuMSwzIHYgNDQgMCIKICAgICAgIGlkPSJwYXRoMjU5OCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDBmZjAwO3N0cm9rZTojZjlmOWY5O3N0cm9rZS13aWR0aDowLjAxNTUyMjI7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eTowLjQ1OTcxMiIKICAgICAgIGQ9Im0gMy4wNDIwNTE5LDI0LjcwNDE5NCBjIDAuMDE2OTk1LC0wLjEzODcyOSAwLjA0ODkwOSwtMC42NzEzMzQgMC4wNzA5MTksLTEuMTgzNTY2IDAuMDk1MjQ2LC0yLjIxNjYyMyAwLjczNDI0MjcsLTQuODk4MzE3IDEuNzEwNjE5OCwtNy4xNzkwMDcgMC43NDcxMDQ4LC0xLjc0NTE0IDIuMDk2MDUxLC0zLjk0NDUyMSAzLjI4NDQ3NTgsLTUuMzU1MTUyIDAuNzQxMDg1NywtMC44Nzk2NTEgMi4xNDI3NTE1LC0yLjI3NTk1NzYgMy4wMDM2NjQ1LC0yLjk5MjE4MDQgMS40OTA0ODEsLTEuMjM5OTgyOCAzLjg4Nzg5NSwtMi42NDg4MTc5IDUuNzgyMDExLC0zLjM5Nzc4NjIgMi4zMzYwNjgsLTAuOTIzNzI0IDUuMjM5MTg5LC0xLjUyNjM0NDUgNy4zNTMxNTYsLTEuNTI2MzQ0NSBoIDAuNzE4Mzc3IFYgMTQuMDEzMjk0IDI0Ljk1NjQzIEggMTMuOTg4MjEzIDMuMDExMTUxMiBaIgogICAgICAgaWQ9InBhdGgyNjAyIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7c3Ryb2tlOiNmOWY5Zjk7c3Ryb2tlLXdpZHRoOjAuMDE1NTIyMjtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjAuNDU5NzEyIgogICAgICAgZD0iTSAzLjA1NTE0NDIsMjQuMDQ0NTAyIEMgMy4zMTUwNTIzLDE5LjQyNDI5IDQuNzcxMjMyNSwxNS40MjQ1NjYgNy41NTAwNTIyLDExLjY5ODIzMSA4LjM3MjA1NzYsMTAuNTk1OTQxIDEwLjU3Njg5LDguMzg5MDE2NCAxMS42NDIzMzcsNy42MDIwNjQzIGMgMi4wMTU3MiwtMS40ODg4MzUgNC4xODYyMDIsLTIuNjQ0Mjc4IDYuMjY0ODIzLC0zLjMzNTA0MDUgMi4wMTY2ODcsLTAuNjcwMTgwOSAzLjkzMDA4NywtMS4wMzk0OSA1LjY5MjIzOCwtMS4wOTg2NzAyIGwgMS4yMjIzNzEsLTAuMDQxMDUyIFYgMTQuMDAzMDYgMjQuODc4ODE5IEggMTMuOTE0OTg5IDMuMDA4MjEgWiIKICAgICAgIGlkPSJwYXRoMjYwNCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDBmZjAwO3N0cm9rZTojZjlmOWY5O3N0cm9rZS13aWR0aDowLjAxNTUyMjI7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eTowLjQ1OTcxMiIKICAgICAgIGQ9Ik0gMjUuMzA3NzYxLDEzLjk1MDg5NyBWIDMuMDA3NzYxMSBoIDAuNjAxOTYgYyAwLjMzMTA3OCwwIDEuMDUzNTM3LDAuMDUyODI0IDEuNjA1NDY1LDAuMTE3Mzg2MyA0LjA0ODE3OCwwLjQ3MzU0MDggNy42MTQzMzYsMS45MjMyOTkgMTAuOTQ3NjIxLDQuNDUwNTYwMiAwLjQyNjg2LDAuMzIzNjQwNyAxLjM1MzQzNiwxLjE2NTc2NSAyLjA1OTA1OSwxLjg3MTM4NzQgMS43OTI5NjksMS43OTI5NjkgMi45NDg3ODMsMy4zNTY1OSA0LjAyODc3Myw1LjQ1MDI1IDEuNDc3ODU3LDIuODY0OTYxIDIuNDEwNTYxLDYuNDU0OTYgMi40MTA1NjEsOS4yNzgzMTEgdiAwLjcxODM3NyBIIDM2LjEzNDQ4IDI1LjMwNzc2MSBaIgogICAgICAgaWQ9InBhdGgyNjA2IiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwZmY7c3Ryb2tlOiNmOWY5Zjk7c3Ryb2tlLXdpZHRoOjAuMDE1NTIyMjtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjAuNDU5NzEyIgogICAgICAgZD0iTSAyMy42NzU2NDEsNDYuOTE4MTIxIEMgMTcuMjQ5MjMyLDQ2LjU0NzU2NiAxMS4zMTY2NDYsNDMuMzU5MzA0IDcuNDA2NDk0MywzOC4xNzQ4MzYgNC44MDU0MDU3LDM0LjcyNjA1NCAzLjIzNTkxODYsMzAuNDU1MzcxIDMuMDU0OTY0MywyNi4zMzQwMjMgbCAtMC4wNDY4NTUsLTEuMDY3MTUgSCAxMy45NjI3NjIgMjQuOTE3NDE1IHYgMTAuODY1NTI1IGMgMCwxMC4zMDA5MjQgLTAuMDA3MSwxMC44NjQ5MDUgLTAuMTM1ODE5LDEwLjg1MzU5NCAtMC4wNzQ3LC0wLjAwNjYgLTAuNTcyMzgsLTAuMDM3MSAtMS4xMDU5NTUsLTAuMDY3ODcgeiIKICAgICAgIGlkPSJwYXRoMjYwOCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmZmZjAwO3N0cm9rZTojZjlmOWY5O3N0cm9rZS13aWR0aDowLjAxNTUyMjI7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eTowLjQ1OTcxMiIKICAgICAgIGQ9Ik0gMjUuMzA3NzYxLDM2LjExMzAyIFYgMjUuMjY2ODczIEggMzYuMTM0NDggNDYuOTYxMiB2IDAuNjAxOTYgYyAwLDEuOTk1MDA0IC0wLjYyNDU0OSw0Ljk1NjEyOCAtMS41MjYzNDUsNy4yMzY3NCAtMC43NDgyNjMsMS44OTIzMzIgLTIuMTU0NzcxLDQuMjg2NDA0IC0zLjM5NjkxMSw1Ljc4MjAxMiAtMC42NzQxNzEsMC44MTE3NCAtMi4wODYyNDcsMi4yMzk4MzIgLTIuODcyODMxLDIuOTA1NDE1IC0zLjU4Mzc0MiwzLjAzMjQ0OCAtOC4xOTYyNTcsNC44NjkxMzYgLTEyLjgzOTgzNCw1LjExMjc3OSBsIC0xLjAxNzUxOCwwLjA1MzM5IHoiCiAgICAgICBpZD0icGF0aDI2MTAiIC8+CiAgPC9nPgo8L3N2Zz4K");
  background-repeat: no-repeat;
  background-size: 2rem;
  height: 2rem;
  width: 2rem;
}

#pick-font-color:hover,
#pick-bg-color:hover {
  cursor: pointer;
}

#controls {
  position: fixed;
  top: 0.7rem;
  left: 0.7rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#controls > * {
  margin: 0 0.5rem;
}

@media screen and (max-width: 35rem) {
  #root {
    max-width: 100vw;
  }

  #families {
    max-width: 10rem;
  }
}

@media screen and (max-height: 25rem) {
  #root {
    margin-top: 4rem;
  }
}