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

body {
  background:
    linear-gradient(to bottom,
        hsl(42deg,  92%,  70%) 0%,
        hsl(348deg, 92%,  70%) 20% 25%,
        hsl(334deg, 100%, 80%) 40% 50%,
        hsl(234deg, 100%, 76%) 80% 85%,
        hsl(195deg, 100%, 67%) 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 4px hsla(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: url(star_small.png);
  mix-blend-mode: overlay;
  height: 1em;
  padding: 0 0.25em;
  vertical-align: text-bottom;
}

hr {
  height: 3px;
  width: 60%;
  border: 1px solid black;
  box-shadow: 4px 4px 2px rgba(0, 0, 0, 25%);
  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] {
  text-decoration: dotted underline;
  text-decoration-thickness: 2px;
}

a {
  color: hsl(196deg, 100%, 85%);
  font-weight: 700;
  text-decoration: none;
}