:root {
  --width:calc((80*16px/2) + 2rem);
}
*,
:before,
:after {
  box-sizing:border-box
}
html,
body {
  font:16px Times New Roman,serif;
  width:100%;
  height:100%;
  margin:0;
}
body {
  flex-direction:column;
  line-height:1.5;
  display:flex;
  overflow-y:scroll
}
p {
  text-wrap:pretty;
  margin:16px 0
}
h2,
h3 {
  margin-top:36px
}
h2 {
  font-size:2rem
}
article {
  flex:1;
  padding:0 0 4rem
}
nav,
article>:not(pre):not(figure),
footer {
  max-width:var(--width);
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding-left:1rem;
  padding-right:1rem
}
figure {
  margin:2rem auto;
  display:block
}
figure img {
  object-fit:contain;
  width:100%;
  max-height:500px;
  margin:0 0 .5rem;
  display:block
}
figcaption {
  color:#000;
  text-align:center;
  width:100%;
  font-style:italic
}
a {
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
li {
  list-style-position:inside
}
q {
  font-style:italic
}
.flex {
  display:flex
}
.flex>:first-child {
  white-space:nowrap;
  text-overflow:ellipsis;
  max-width:60%;
  margin-right:1ch;
  overflow:hidden
}
.flex>:nth-child(2) {
  margin-left:auto
}
@media (width<=500px) {
  .flex>:first-child {
    max-width:100%
  }
  article .flex>:nth-child(2) {
    display:none
  }
}
.right {
  text-align:right
}
.center {
  text-align:center
}