/***
The new CSS Reset - version 1.4.5 (last updated 13.1.2022)
via https://alexclark.co.nz/blog/creating-a-simple-css-slider-with-scroll-snapping
***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  all: unset;
  display: revert;
  -webkit-tap-highlight-color: transparent;
}
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)):focus:not(:focus-visible) {
  outline: none;
}

/* Preferred box-sizing value */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, main, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, input, select, button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

/* Reapply the pointer cursor for anchor tags */
a {
  cursor: revert;
  text-decoration-line: none;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  display: block;
  max-width: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
  -webkit-user-drag: element;
}

.black-bg {
  background-color: #212121;
}
.black-bg .accordion dt button:hover, .black-bg .accordion dt button:focus {
  color: #212121;
}

.black-text {
  color: #212121;
}

.white-bg {
  background-color: #fff;
}
.white-bg .accordion dt button:hover, .white-bg .accordion dt button:focus {
  color: #fff;
}

.white-text {
  color: #fff;
}

.green-bg {
  background-color: #748C6D;
}
.green-bg .accordion dt button:hover, .green-bg .accordion dt button:focus {
  color: #748C6D;
}

.green-text {
  color: #748C6D;
}

.sage-bg {
  background-color: #BDC8BA;
}
.sage-bg .accordion dt button:hover, .sage-bg .accordion dt button:focus {
  color: #BDC8BA;
}

.sage-text {
  color: #BDC8BA;
}

.blue-bg {
  background-color: #ddeaf4;
}
.blue-bg .accordion dt button:hover, .blue-bg .accordion dt button:focus {
  color: #ddeaf4;
}

.blue-text {
  color: #ddeaf4;
}

.red-bg {
  background-color: #BE8472;
}
.red-bg .accordion dt button:hover, .red-bg .accordion dt button:focus {
  color: #BE8472;
}

.red-text {
  color: #BE8472;
}

.cream-bg {
  background-color: #FCF3E1;
}
.cream-bg .accordion dt button:hover, .cream-bg .accordion dt button:focus {
  color: #FCF3E1;
}

.cream-text {
  color: #FCF3E1;
}

.pink-bg {
  background-color: #eedcdc;
}
.pink-bg .accordion dt button:hover, .pink-bg .accordion dt button:focus {
  color: #eedcdc;
}

.pink-text {
  color: #eedcdc;
}

@font-face {
  font-family: "Lyon";
  src: url("fonts/LyonText-RegularNo2-Web.woff2") format("woff2"), url("fonts/LyonText-RegularNo2-Web.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lyon";
  src: url("fonts/LyonText-RegularNo2Italic-Web.woff2") format("woff2"), url("fonts/LyonText-RegularNo2Italic-Web.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lyon";
  src: url("fonts/LyonText-Semibold-Web.woff2") format("woff2"), url("fonts/LyonText-Semibold-Web.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lyon";
  src: url("fonts/LyonText-SemiboldItalic-Web.woff2") format("woff2"), url("fonts/LyonText-SemiboldItalic-Web.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
::selection {
  background: #212121;
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: #212121;
  color: #fff;
  text-shadow: none;
}

:root {
  --circleSize: 72vmin;
  --dominant-color: $black;
}

html {
  width: 100%;
  height: 100%;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -moz-osx-font-smoothing: grayscale;
  /* fixes FF over-bolding */
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.colors {
  width: 161.8vmax;
  height: 161.8vmax;
  z-index: 0;
  animation: rotate 600s linear infinite;
}

.dominant {
  width: var(--circleSize);
  height: var(--circleSize);
  border-radius: 50%;
  z-index: 1;
  background-color: var(--dominant-color);
}

.starfield {
  width: var(--circleSize);
  height: var(--circleSize);
  border-radius: 50%;
  z-index: 2;
  color: #fff;
  overflow: hidden;
}

.stars {
  width: 100%;
  height: 100%;
  font-size: 4vmin;
  line-height: 1;
  padding: 1.5vmin;
  text-align: center;
}
.stars::before,
.stars p::before {
  content: "";
  height: 100%;
  width: 50%;
  vertical-align: center;
}
.stars::before {
  float: left;
  shape-outside: polygon(0 0, 98% 0, 50% 6%, 23.4% 17.3%, 6% 32.6%, 0 50%, 6% 65.6%, 23.4% 82.7%, 50% 94%, 98% 100%, 0 100%);
}
.stars p::before {
  float: right;
  shape-outside: polygon(2% 0%, 100% 0%, 100% 100%, 2% 100%, 50% 94%, 76.6% 82.7%, 94% 65.6%, 100% 50%, 94% 32.6%, 76.6% 17.3%, 50% 6%);
}
.stars p {
  height: 100%;
}

.dump {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  max-height: 50vh;
  background-color: black;
  color: white;
  font-family: monospace;
  padding: 5rem;
  overflow: auto;
  z-index: 100;
  white-space: pre;
  border-top: 2px solid red;
  text-align: left;
}
.dump:not(:hover) {
  height: 15rem;
}