yummy.cricket/style.css

@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%)
      );
  --bg-image: url(images/niss_uwu_bg.png);
}

body {
  background:
    var(--bg-image) top center fixed,
    var(--gradient) fixed;
  background-blend-mode: overlay;
}

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 picture {
  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(images/shortcake_large.png); }
header rt::before, header rt::after { content: url(images/star_small.png); }
section h2::before, section h2::after {
  content: url(images/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%);
}


/* hacky fix for firefox mobile 68 freaking out at blend modes ☹ */
@media (-moz-touch-enabled) {
  body {
    background: var(--gradient) fixed;
    background-blend-mode: initial;
  }
}


/******************************/
/* actual accessibility stuff */
/******************************/

@media (prefers-reduced-motion: reduce) {
  /* see also the alternate source in #mlem > picture */
  .mlem-text {
    display: none;
  }
}


/* ~the "not actually supported by browsers yet" zone~ */
@media (prefers-contrast: high), (prefers-color-scheme: dark) {
  body {
    --gradient:
      linear-gradient(to bottom,
          hsl(42deg,  56%, 55%),
          hsl(348deg, 56%, 55%),
          hsl(334deg, 60%, 43%),
          hsl(234deg, 60%, 40%),
          hsl(195deg, 60%, 44%)
        );
    --bg-image: url(images/niss_uwu_bg_dim.png);
  }

  main {
    background: hsla(0, 0%, 0%, 60%);
    border-color: hsla(0, 0%, 0%, 30%);
  }

  .cake::before, .cake::after,
  header rt::before, header rt::after,
  section h2::before, section h2::after {
    mix-blend-mode: screen;
  }

  a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }

  footer {
    background: hsla(0, 0%, 0%, 50%);
    color: white;
  }

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

  footer .emojo {
    background: hsla(52deg, 85%, 95%, 75%);
    padding: 2px;
    border-radius: 1000px;
  }

  hr {
    background: white;
  }

  #mlem picture {
    filter: drop-shadow(0 0 20px hsla(52deg, 85%, 95%, 35%));
  }
}

@media (prefers-reduced-transparency) {
  body {
    background: var(--gradient) fixed;
    background-blend-mode: initial;
  }
}