@import url(fonts/muller/muller.css);

body {
  background:
    linear-gradient(to bottom,
      #f9cf6b 0%,
      #f96b88 20% 25%,
      #ff9bc7 40% 55%,
      #8693ff 80% 85%,
      #58d6ff 98% 100%)
    fixed;

  font-family: 'Muller';
  font-size: x-large;
  font-weight: 500;
  color: white;
  text-shadow:
    1px 1px 0 black,
    -1px 1px 0 black,
    1px -1px 0 black,
    -1px -1px 0 black,
    4px 4px 2px rgba(0, 0, 0, 60%);
  text-align: center;

  max-width: 50em;
  margin: 24px auto 36px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin-top: 0;
}

h1 {
  font-size: 200%;
}

#mlem {
  margin: 36px auto 0;
  position: relative;
  height: 219px;
  width: 420px;
}
.mlem-text {
  position: absolute;
  font-size: 24px;
  font-weight: 700;
}
.niss {
  top: -55px; left: 20px;
}
.nisse {
  top: -22px; right: 0;
}

#big-little {
  margin: -20pt 0 0 0;
  ruby-position: under;
}
#big-little rt {
  font-size: 60%;
  font-style: italic;
}
#big-little rt::before, #big-little rt::after {
  content: '—';
}

hr {
  height: 3px;
  width: 60%;
  border: 1px solid black;
  background-color: white;
  text-shadow: none;
  margin: 20px auto;
}

dl {
  display: grid;
  width: 30em;
  margin: auto;
  grid-template-columns: 1fr 2fr 1fr 2fr;
  grid-row-gap: 6px;
}

dt {
  text-align: right;
}
dd {
  font-weight: 600;
  text-align: left;
}

[title] {
  border-bottom: 3px dotted white;
}

a {
  color: #c9f1ff;
  font-weight: 700;
  text-decoration: none;
}