* { outline: none; font-family: "Baskervville", serif; text-decoration: none; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 2; }
body, html { margin: 0; padding: 0; }

h1 img { width: 100%; height: auto; }
h2 { text-align: center; font-weight: 400; font-size: clamp(28px, 1.8vmax, 36px); margin: 120px 0 50px 0; line-height: 2; }
sup { vertical-align: top; font-size: 0.6em; }
a[id] sup { font-weight: bold; font-family: monospace; color: #07f; }

header { text-align: center; display: flex; flex-direction: column; justify-content: center; height: 100vh; aspect-ratio: 0.8; margin: 0 auto; max-width: 80%; }

.hamburger { position: fixed; top: 30px; right: 30px; display: flex; width: 46px; height: 46px; border-radius: 50%; font-size: 32px; line-height: 1; background: black; color: white; justify-content: center; align-items: center; font-family: sans-serif; z-index: 3; }

.container { width: 90%; max-width: 800px; margin: 0 auto 120px auto; order: 2; text-align: justify;  }
.container p { line-height: 1.3; margin: 5px 0; text-indent: clamp(16px, 1.1vmax, 20px); font-size: clamp(16px, 1.1vmax, 20px); }

.contents { display: flex; z-index: 2; width: 100%; height: 100vh; position: fixed; top: 0; left: 100vw; background: white; flex-direction: column; align-items: center; justify-content: center; transition: .3s all ease-in-out; }
.contents.active { left: 0; }
.contents li { font-size: clamp(16px, 1.1vmax, 20px); padding-left: 12px; }
.contents li:first-child::marker,
.contents li:last-child::marker { color: transparent; }
.contents a { color: #000; }

.sidenotes { display: none; }

.sidenotes p { font-size: clamp(14px, 1vmax, 18px); }