html, body { width: 100%; padding: 0; margin: 0; }
body {
  background-color: black; color: white;
  display: flex; flex-direction: column; align-items: center;
  font-size: 24px; font-family: 'Computer Modern Serif', 'Noto Serif KR', serif;
  scroll-behavior: smooth;
}
body>div { text-align: center; }
button { font-family: 'Computer Modern Serif', serif; }
a { color: #0c0; text-decoration: none; }
a:hover { color: #090; text-decoration: underline; }

code { white-space: pre; font-family: "Ubuntu Mono", monospace; }

div.slogan {
  width: calc(100vw - 16px); height: 50vh; font-size: 7vw;
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  line-height: 1.3;
}

div.slogan-left { height: 2em; overflow: hidden; text-align: right; position: relative; }
div.slogan-left .top {
  position: absolute; top: 0; left: 0; width: 100%; height: 0.35em; z-index: 100;
  background: rgba(0, 0, 0, 0); background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}
div.slogan-left .bottom {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 0.35em; z-index: 100;
  background: rgba(0, 0, 0, 0); background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}
div.slogan-right { height: 1.3em; margin-left: 0.4em; }
div.slogan-left-animate { position: relative; top: -0.95em; animation: slogan-left-keyframes 10s ease-in-out infinite; }

div.screen {
  width: calc(100vw - 16px); height: 100vh;
  display: flex; flex-direction: row;
}
div.screen.column { flex-direction: column; justify-content: center; align-items: center; }
div.screen.reverse { flex-direction: row-reverse; }
div.screen .screen-left { width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
div.screen .screen-right { width: 50%; text-align: left; padding: 0 0 16px 0; }

span.error { text-decoration: underline wavy #f00; display: inline-block; position: relative; }
span.error span.message {
  display: inline-block; position: absolute; translate: -8em 2em; font-size: 0.7em;
  padding: 8px; word-wrap: break-word;
  line-height: 1.3;
  background-color: rgba(255, 92, 0, 0.7);
}

@keyframes slogan-left-keyframes {
  0% { translate: 0 0; }
  5% { translate: 0 -1.3em; }
  25% { translate: 0 -1.3em; }
  30% { translate: 0 -2.6em; }
  50% { translate: 0 -2.6em; }
  55% { translate: 0 -3.9em; }
  75% { translate: 0 -3.9em; }
  80% { translate: 0 -5.2em; }
  100% { translate: 0 -5.2em; }
}

div.subtitle { font-size: 2em; margin: 1em 0; text-align: center; }

@media (max-width: 800px) {
  body { font-size: 16px; }
  div.slogan { flex-direction: column; font-size: 15vw; }
  div.slogan-left { text-align: center; }
  div.slogan-right span { display: none; }

  div.screen { flex-direction: column; }
  div.screen.reverse { flex-direction: column; }
  div.screen .screen-left { width: 100%; height: 30%; }
  div.screen .screen-right { width: 100%; height: 70%; }
}

div.editor {
  background-color: #111; padding: 16px; margin: 0 32px 16px 32px;
  width: calc(100% - 96px); height: calc(100% - 112px); overflow-y: auto;
}
div.hide { display: none; }

nav { margin: 16px 32px 0 32px; display: flex; overflow-x: auto; }
nav button { width: 6em; background-color: unset; border: 1px solid #111; height: 48px; font-size: 1em; color: #fff; }
nav button.current { background-color: #111; }