* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { display: flex; flex-direction: row; font-family: 'Computer Modern Serif', 'Noto Serif KR', serif; }
body>nav { width: 15%; padding: 8px; background-color: #efe; }
body>section { width: 85%; padding: 8px; display: flex; flex-direction: row; justify-content: center; overflow-y: auto; }
body>button { display: none; }

h1, h2, h3, h4 { margin: 1rem 0 0 0; }
h1 { text-align: center; font-size: 2.6em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1em; }
h6 { color: #999; }

article { width: 40em; }
article>footer { height: 2rem; }

p { margin: 0.7em 0; text-align: justify; line-height: 1.5; }
a { color: #090; text-decoration: none; transition: color 0.05s linear; }
a:hover { color: #0c0; text-decoration: underline; }

h1+:where(h1, h2, h3, h4, h6) { text-align: center; }
h1+h6 { font-size: 1.2em; margin: 0.5rem 0 2rem 0; }
h2+h6 { font-size: 1.1em; margin: 0 0 1.5rem 0; }
h3+h6 { font-size: 1em; margin: 0 0 1rem 0; }
h4+h6 { font-size: 0.9em; margin: 0 0 0.5rem 0; }

blockquote {
  margin: 16px 32px 16px 20px; border-left: #eee 4px solid; padding-left: 8px;
  transition: border-left 0.1s;
}
blockquote:hover { border-left: #ccc 4px solid; }

table { border-collapse: collapse; margin: 0 auto; }
table td { padding: 4px 0.5em; }
table td:not(:last-child) { border-right: 1px solid #666; }
table :where(thead, tbody) { border-top: 1px solid #666; border-bottom: 1px solid #666; }

table.center td { text-align: center; }

@media (max-width: 1024px) {
  body>nav { position: fixed; width: 50vw; height: 100vh; translate: -50vw 0; transition: all 0.3s; z-index: -100; }
  body>section { width: 100vw; }
  body>button {
    width: 32px; height: 64px; border-radius: 0 16px 16px 0; border: 0; background-color: #efe;
    display: unset; position: fixed; left: 0; bottom: 16px;
    transition: all 0.3s;
  }

  body>nav.shown { translate: 0 0; z-index: 100; }
  body>button.shown { translate: 50vw 0; }
}

.spoiler { color: rgba(0, 0, 0, 0); background-color: #ccc; border-radius: 4px; transition: all 0.1s; padding: 1px 4px; cursor: pointer; }
.spoiler.shown { color: unset; background-color: #eee; }