yummy.cricket/style.css

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

body {
  --gradient:
    linear-gradient(135deg,
        hsl(42deg,  92%,  70%),
        hsl(348deg, 92%,  70%),
        hsl(334deg, 100%, 80%),
        hsl(234deg, 100%, 76%),
        hsl(195deg, 100%, 67%),
        hsl(155deg, 70%,  62%)
      );
  --bg-image: url(images/niss_uwu_bg.png);
  --size: 1.75rem;
  --weight: 600;

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

  font-family: 'Muller';
  font-size: var(--size);
  font-weight: var(--weight);
  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 0.5em;
}

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

main {
  max-width: 35em;
  padding: 1em;
  margin: 0 auto 1em;
}

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

h1 {
  font-size: 200%;
}

h2, header p {
  font-size: 150%;
}

b {
  font-weight: 800;
}

#mlem {
  margin: 36px auto -50px;
  position: relative;
  height: 219px;
  width: 420px;
}
.mlem-text {
  font-size: var(--size);
  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;
}
rt {
  font-size: 60%;
  font-style: italic;
}

hr {
  height: 4px;
  width: 75%;
  background-color: hsla(0, 0%, 100%, 75%);
  border: none;
  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: 700;
  text-align: left;
}

@media (hover) {
  [title] {
    text-decoration: dotted underline;
    text-decoration-thickness: 2px;
  }
  [title]::after {
    content: url(images/info.svg);
    display: inline-block;
    width: 0.75em; height: 0.75em;
    vertical-align: text-top;
    mix-blend-mode: hard-light;
  }
}
@media (hover: none) {
  [title]::after {
    content: attr(title);
    font-size: 75%;
    font-weight: var(--weight);
    display: inline-block;
  }
}

a {
  color: hsl(196deg, 100%, 85%);
  font-weight: 800;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
a:hover {
  color: hsl(50deg, 100%, 82%);
}


:is(rt, h1, h2)::before, :is(rt, h1, h2)::after {
  padding: 0 0.25em;
  vertical-align: middle;
  display: inline-block;
  height: 1em; width: 1em;
  mix-blend-mode: overlay;
  content: var(--around-image);
}

rt { --around-image: url(images/star.svg); }
h1, h2 { --around-image: url(images/sparkles.svg); }


.emojo {
  vertical-align: middle;
  height: 1.2em; width: 1.2em;
}


.ipa {
  font-family: BreezeSans;
  font-size: 90%;
}


#links ul {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column-gap: 2em;

  margin: auto;
  padding: 0;
  font-size: 150%;
}

#links li { list-style: none; }


/* 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(135deg,
          hsl(42deg,  56%, 55%),
          hsl(348deg, 56%, 55%),
          hsl(334deg, 60%, 43%),
          hsl(234deg, 60%, 40%),
          hsl(195deg, 60%, 44%),
          hsl(155deg, 60%, 55%)
        );
    --bg-image: url(images/niss_uwu_bg_dim.png);
  }

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

  :is(#links ul, rt, h1, h2)::before, :is(#links ul, rt, h1, h2)::after {
    mix-blend-mode: screen;
  }

  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;
  }

  :is(#links ul, rt, h1, h2)::before, :is(#links ul, rt, h1, h2)::after {
    mix-blend-mode: initial;
  }
}