:root {
  font-family: SV Regular, Arial, sans-serif;
  /* basic colors for text color and background colors. You can flip these to get a dark theme. */
  --pen: #195365;
  --paper: white;

  /* branding colors and their opposites */
  --primary: #C3DA46;
  --secondary: #A96BF1;
  --neutral: #6896A8;
  --background: #EAE9E3;

  /* Signal colors: that communicate a situation */
  --danger: darkred;
  --warning: orange;
  --disabled: #7A7A7A;
  --success: lightgreen;
  --info: lightblue;

  /* fonts */
  --trenta: 700 42px/1.40 SV Regular, Arial, sans-serif;
  --venti: 700 32px/1.31 SV Regular, Arial, sans-serif;
  --grande: 700 26px/1.38 SV Regular, Arial, sans-serif;
  --tall: 400 22px/1.54 SV Regular, Arial, sans-serif;
  --petit: 400 20px/1.45 SV Regular, Arial, sans-serif;
  --short: 400 18px/auto SV Regular, Arial, sans-serif;
  --demi: 700 14px/auto SV Regular, Arial, sans-serif;

  /* layout */
  --max-width: 80rem;
}

@media (min-width: 651px) {
  :root {
    --offset-x: 80px;
    --offset-y: 80px;
  }
}

@media (max-width: 650px) {
  :root {
    --offset-x: 20px;
    --offset-y: 60px;
  }
}

:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 1px !important;
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.m-copy a.ck-anchor:not([href]):after {
  display: none;
}