gallery/style/shiny/base.css

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

:root {
  --gradient:
    linear-gradient(135deg,
        hsl(42deg,  67%, 70%),
        hsl(348deg, 67%, 70%),
        hsl(334deg, 77%, 80%),
        hsl(234deg, 77%, 76%),
        hsl(195deg, 67%, 67%),
        hsl(155deg, 57%, 62%)
      );

  --text-col: white;
  --nsfw-sticker-rotate: 15deg;

  --focus-box: 0 0 20px hsl(55deg, 60%, 90%, 80%);
  --focus-text: hsl(334deg, 87%, 90%);

  font-family: Muller;
  font-size: 18pt;
  font-weight: 600;

  background: var(--gradient) fixed;
  margin: 1em;
}

header {
  text-align: center;
}

h1, h2 { font-weight: 100; }
h1 { font-size: 300%; }
h2 { font-size: 125%; }

body {
  --shadow: hsl(42deg, 82%, 90%, 75%);
  --border-col: var(--text-col);

  background: hsla(0, 0%, 0%, 60%);
  border: 3px solid var(--border-col);
  box-shadow: 0 0 3em var(--shadow);
  position: relative;

  padding: 2em 4em;
  margin: 2em auto 3.5em;
  border-radius: 1.5em;

  color: var(--text-col);
  --text-shadow: 2px 2px 3px hsl(0, 0%, 0%, 75%);
  text-shadow: var(--text-shadow);
}

header h1 {
  margin: 0; padding: 0;
}

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

a:focus {
  outline: none;
  color: var(--focus-text);
  text-decoration-style: double;
}


footer {
  font-weight: 500;
  font-size: 80%;
}


.corner {
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0.5em;

  font-size: 100%;
  font-weight: 500;
}

.corner.left { left: 2em; }
.corner.right { right: 2em; }

.emoji {
  text-align: baseline;
  height: 1em;
}


.buttonbar.choice input {
  display: inline;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  width: 0;
}

.buttonbar {
  padding: 0;
  display: flex;
  align-items: flex-start;
  flex-flow: row wrap;
  margin-bottom: -0.5em;
}

.buttonbar.choice {
  justify-content: center;
}

.buttonbar li {
  list-style: none;
  margin-bottom: 0.5em;
}

.buttonbar.choice label,
.buttonbar:not(.choice) li {
  --button-bg: hsl(330deg, 40%, 16%, 100%);
  margin-right: 0.5em;
  padding: 0 0.35em;
  border-radius: 0.25em;

  border: 1px solid var(--text-col);
  background: var(--button-bg);
  text-shadow: none;
}

.buttonbar.choice :focus + label,
.buttonbar:not(.choice) li:focus-within {
  box-shadow: var(--focus-box);
}

.buttonbar.choice :checked + label {
  color: var(--button-bg);
  background: var(--text-col);
}

.buttonbar a {
  text-decoration: none;
}


@media (prefers-color-scheme: dark) {
  :root {
    --gradient:
      linear-gradient(135deg,
          hsl(42deg,  27%, 25%),
          hsl(348deg, 27%, 25%),
          hsl(334deg, 32%, 25%),
          hsl(234deg, 57%, 23%),
          hsl(195deg, 27%, 20%),
          hsl(155deg, 22%, 20%)
        );
    --text-col: hsl(55deg, 60%, 90%);
  }

  @media (prefers-contrast: high) {
    :root {
      --text-col: white;
      background: black;
    }

    body {
      border: unset;
      box-shadow: unset;
      background: unset;
    }
  }

  body {
    --shadow: hsl(42deg, 82%, 90%, 20%);
    --border-col: black;
  }
}


@media (pointer: coarse) {
  .buttonbar {
    font-size: 200%;
    border-width: 2px;
  }
}