/* The day and night switch: a little sky with a sun, two clouds and green hills, on a white page. Turned on it is a
   night sky with the moon, and the page is black. */
:root {
  --page: #ffffff;          /* the page by day (by night a black layer covers it) */
  --night: #000000;         /* the page by night */
  --ink: #17181c;           /* the text of the page */
  --sun: #ffcd3a;
  --moon: #ebe7dc;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Nunito Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* the day and the night: two layers fixed behind everything. The day is a layer and not only the page's background
   because mix-blend-mode does not blend with the background of the page itself; the night is cut to a circle by the
   script */
.day {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--page);
}

/* once the night covers everything the page itself turns black and the day layer goes: Safari on iPhone colours its
   bars from a full-screen fixed layer, or from the page, and they would stay white */
html.is-night,
html.is-night body {
  background: var(--night);
}

html.is-night .day {
  visibility: hidden;
}

.night {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--night);
  clip-path: circle(0 at 50% 50%);
  pointer-events: none;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

.theme {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

/* white words with mix-blend-mode difference: black on the white page, white on the night, and cut exactly where the
   edge of the circle passes over them */
.theme__label {
  color: #ffffff;
  mix-blend-mode: difference;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.005em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- the sky */
.sky {
  --w: 132px;
  --h: 56px;
  --gap: 6px;
  position: relative;
  width: var(--w);
  height: var(--h);
  padding: 0;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  isolation: isolate;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), 0 10px 30px -12px rgba(40, 90, 160, 0.55);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.sky:focus-visible {
  outline: 2px solid #7d8bb3;
  outline-offset: 4px;
}

.sky__day,
.sky__dark {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.sky__day {
  background: linear-gradient(180deg, #4aaeff, #a9ddff);
}

.sky__dark {
  background: linear-gradient(180deg, #10183a, #2c3a6c);
  opacity: 0;
}

.sky__land {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cloud {
  fill: #ffffff;
  opacity: 0.95;
}

.cloud--night {
  fill: #4a5b91;
  opacity: 0;
}

.hill--back {
  fill: #7fc86e;
}

.hill--front {
  fill: #59ab55;
}

.hill--back-night {
  fill: #26335f;
  opacity: 0;
}

.hill--front-night {
  fill: #1a2448;
  opacity: 0;
}

/* the thumb: the sun by day, the moon by night; the knob inside it takes the press and the peek */
.sky__thumb {
  position: absolute;
  left: var(--gap);
  top: var(--gap);
  width: calc(var(--h) - var(--gap) * 2);
  height: calc(var(--h) - var(--gap) * 2);
}

.sky__knob {
  display: block;
  width: 100%;
  height: 100%;
}

.sky__knob svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.disc {
  fill: var(--sun);
}

.sun-rays line {
  stroke: var(--sun);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.craters circle {
  fill: #cfc9ba;
}

@media (max-width: 420px) {
  .sky {
    --w: 116px;
    --h: 50px;
  }

  .theme__label {
    font-size: 18px;
  }
}