:root {
  /* 
    One-stop magic hue shift
    We're using oklch(), so these might not be the hue values you are familiar with 
  See: https://oklch.com/
  */
  --hue: 310; /* change me (0-360) */
  --hue-adjust: 135; /* and me */

  --hue-2: calc(var(--hue) + var(--hue-adjust));

  --page-background: oklch(10% 0.0666 var(--hue));
}







#more {
	display: none;
	}





/**
BUTTON FORMATOR
**/
.key-verse-read-more-button {
  --button-background: oklch(20% 0.0666 var(--hue));
  --text-base: oklch(45% 0.175 var(--hue));
  --text-hover: oklch(95% 0.145 calc(var(--hue) + 30));

  --shadow-start: oklch(95% 0.145 var(--hue-2));
  --shadow-end: oklch(60% 0.29 var(--hue));

  /* No color function, so we can use different opacity values */
  --shadow-inner: 60% 0.29 var(--hue);

  all: unset;

  /* Text */
  color: var(--text-base); 
  78787878font: 700 1.125rem/1.2 Raleway, sans-serif;   font: 700 11px Raleway, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center; 

  /* Button sizing */
  padding: 0.85em;  777padding: 0.45em;
  max-width: 100%;
  width: 12em; width: auto; 

  /* Button styling */
  78787878background-color: var(--button-background);
 78787878background-clip: padding-box;
  border: 5px solid var(--text-base);
  border-radius: 2em;
  cursor: pointer;

  /* Effects */
  78787878position: relative;  DISPLAY: FLEX;
  transition: 0.25s ease-out;

  /* Set up pseudo elements */
  &::before,
  &::after {
    content: "";
    border-radius: inherit;
    transition: inherit;
    position: absolute; 
    inset: 0;
    pointer-events: none;
  }

  /* Gradient shadow */
  &::before {
    /* Position */
    inset: -0.2em;
    z-index: -1;

    /* Effect */
    background: linear-gradient(var(--shadow-start), var(--shadow-end));
    filter: blur(1.2em) saturate(1.2);

    /* Animation */
    transform-origin: bottom;
    transform: scaleY(0.5);
    opacity: 0;
  }

  /* Semi-transparent blended box-shadow brightens up the border */
  &::after {
    /* Effect */
    box-shadow: inset 0 0 0 1px #fff, /* inner pixel */
      0 0 0 4px hsla(0deg, 0%, 100%, 0.5), /* lightened border */
      1px 1px 0 4px #fff; /* outer pixel */
    mix-blend-mode: overlay;

    /* Animation */
    opacity: 0;
  }

  &:hover,
  &:focus {
    color: var(--text-hover);

    /*  Lighten border */
    border-color: transparent;

    /* Inner shadow */
    box-shadow:
      inset 0 1.4em 0 oklch(var(--shadow-inner) / 0.1), /* gloss */
      inset 0 0 1.4em oklch(var(--shadow-inner) / 0.32), /* inner glow */
      0 1px 1px oklch(var(--shadow-inner) / 0.32); /* bottom line */

    /* Show effects */
    &::before,
    &::after {
      transform: none;
      opacity: 1;
    }
  }