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

body {
  --gradient:
    linear-gradient(to bottom,
        hsl(42deg,  92%,  70%),
        hsl(348deg, 92%,  70%),
        hsl(334deg, 100%, 80%),
        hsl(234deg, 100%, 76%),
        hsl(195deg, 100%, 67%)
      );
}

body {
  background:
    url(niss_uwu_bg.png) top center fixed,
    var(--gradient) fixed;
  background-blend-mode: overlay;
}

@media (min-resolution: 2x) {
  body {
    background: var(--gradient) fixed;
    background-blend-mode: initial;
  }
}

body {
  font-family: 'Muller';
  font-size: 1.75rem;
  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%, 70%);
  text-align: center;
  margin: 2em 1em 3em;
}

main {
  max-width: 35em;
  padding: 1em;

  background: hsla(0, 0%, 100%, 40%);
  border-radius: 2em;
  border: 3px solid hsla(0, 0%, 100%, 30%);
  margin: 0 auto 1em;
}

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

h1 {
  font-size: 200%;
}

#mlem {
  margin: 36px auto -50px;
  position: relative;
  height: 219px;
  width: 420px;
}
.mlem-text {
  position: absolute;
  font-weight: 700;
  margin: 0;
}
.niss { bottom: 100%; left: 20px; }
.nisse { bottom: 85%; right: 0; }
#mlem img {
  filter: drop-shadow(0 0 30px hsla(52deg, 85%, 95%, 75%));
}

header {
  margin: 0;
  ruby-position: under;
}
header h1 {
  margin-top: 0;
}
header rt {
  font-size: 60%;
  font-style: italic;
}

hr {
  height: 2px;
  width: 75%;
  background-color: hsla(0, 0%, 100%, 75%);
  mix-blend-mode: screen;
  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: bolder;
  text-decoration: none;
}

.cake::before, .cake::after,
header rt::before, header rt::after,
section h2::before, section h2::after {
  mix-blend-mode: overlay;
  padding: 0 0.25em;
  vertical-align: middle;
}
.cake::before, .cake::after { content: url(shortcake_large.png); }
header rt::before, header rt::after { content: url(star_small.png); }
section h2::before, section h2::after { content: url(sparkles_large.png); }

.emojo {
  vertical-align: middle;
}

footer {
  background: hsla(0, 0%, 100%, 70%);
  max-width: 35em;
  margin: 2em auto 0;
  padding: 0.25em 0.75em;
  border-radius: 0.5em;
  font-size: 85%;

  color: black;
  text-shadow: none;
  font-weight: 400;

  display: grid;
  grid-template: "e t" / 35px auto;
  align-items: center;
  justify-items: center;
}

footer .emojo {
  display: block;
  grid-area: e;
}

footer p, footer div {
  grid-area: t;
}

footer a {
  color: hsl(254deg, 50%, 50%);
}