.dark-mode-button {
  background-color: rgba(0,0,0,.5);
  border-radius: 50%;
  padding-left: .75rem;
  padding-right: .75rem;
  aspect-ratio: 1/1;
  border: .5px solid var(--bs-black);
  outline-color: transparent !important;
  position: fixed;
  bottom: 20px;
  right: 20px;
  -webkit-text-stroke-width: .5px;
  -webkit-text-stroke-color: var(--bs-black);
}

.light-mode-button {
  background-color: rgba(208, 232, 250,.5);
  border-radius: 50%;
  padding-left: .75rem;
  padding-right: .75rem;
  aspect-ratio: 1/1;
  border: .5px solid var(--bs-black);
  outline-color: transparent !important;
  position: fixed;
  bottom: 20px;
  right: 20px;
  -webkit-text-stroke-width: .5px;
  -webkit-text-stroke-color: var(--bs-black);
}
.ccd-blurred-overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(var(--bs-black-rgb), .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 100000;
  height: 100vh;
  width: 100vw;
}

.ccd-backdrop {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  background-color: rgba(var(--bs-blue-rgb), .7);
}

.ccd-backdrop-middle {
  min-width: 325px;
  max-width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100001;
}

/* pop messages */
[class^="ccd-message-"] {
  position: fixed;
  z-index: 100001;
  border-radius: .5rem !important;
  width: fit-content;
  max-width: min(95vw);
  box-sizing: border-box;
  padding: 1rem;
}

/* top row */
.ccd-message-tl { top: 20px; left: 20px; }
.ccd-message-tc { top: 20px; left: 50%; transform: translateX(-50%); }
.ccd-message-tr { top: 20px; right: 20px; }

/* middle row */
.ccd-message-ml { top: 50%; left: 20px; transform: translateY(-50%); }
.ccd-message-mc { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ccd-message-mr { top: 50%; right: 20px; transform: translateY(-50%); }

/* bottom row */
.ccd-message-bl { bottom: 20px; left: 20px; }
.ccd-message-bc { bottom: 20px; left: 50%; transform: translateX(-50%); }
.ccd-message-br { bottom: 20px; right: 20px; }


.content {
  z-index: 0;
  padding-top: 1rem;
}

@media screen and (width <= 800px) {
  .nav-hide { display: none; }
}

.fit-x { width: fit-content; }
.fit-y { height:fit-content; }
.fit { width: fit-content; height:fit-content; }

.abs-center-y {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* fallback/legacy */
}
.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* fallback/legacy */
}

/* widths from 300px to 1200px in 50px steps */
.ccd-w50 { width: 50px; max-width: 95vw; }
.ccd-w100 { width: 100px; max-width: 95vw; }
.ccd-w200 { width: 200px; max-width: 95vw; }
.ccd-w300 { width: 300px; max-width: 95vw; }
.ccd-w350 { width: 350px; max-width: 95vw; }
.ccd-w400 { width: 400px; max-width: 95vw; }
.ccd-w450 { width: 450px; max-width: 95vw; }
.ccd-w500 { width: 500px; max-width: 95vw; }
.ccd-w550 { width: 550px; max-width: 95vw; }
.ccd-w600 { width: 600px; max-width: 95vw; }
.ccd-w650 { width: 650px; max-width: 95vw; }
.ccd-w700 { width: 700px; max-width: 95vw; }
.ccd-w750 { width: 750px; max-width: 95vw; }
.ccd-w800 { width: 800px; max-width: 95vw; }
.ccd-w850 { width: 850px; max-width: 95vw; }
.ccd-w900 { width: 900px; max-width: 95vw; }
.ccd-w950 { width: 950px; max-width: 95vw; }
.ccd-w1000 { width: 1000px; max-width: 95vw; }
.ccd-w1050 { width: 1050px; max-width: 95vw; }
.ccd-w1100 { width: 1100px; max-width: 95vw; }
.ccd-w1150 { width: 1150px; max-width: 95vw; }
.ccd-w1200 { width: 1200px; max-width: 95vw; }

/* cursors */
.ccd-pointer { cursor: pointer; }

/* font weights */
.ccd-fw100 { font-weight: 100; }
.ccd-fw200 { font-weight: 200; }
.ccd-fw300 { font-weight: 300; }
.ccd-fw400 { font-weight: 400; }
.ccd-fw500 { font-weight: 500; }
.ccd-fw600 { font-weight: 600; }
.ccd-fw700 { font-weight: 700; }
.ccd-fw800 { font-weight: 800; }
.ccd-fw900 { font-weight: 900; }

/* larger font sizes */
.ccd-title1 { font-size: 4.5rem; }
.ccd-title1 { font-size: 4rem; }
.ccd-title2 { font-size: 3.5rem; }
.ccd-title3 { font-size: 3rem; }

/* cursors */
/* General-purpose cursors */
.auto        { cursor: auto; }
.default     { cursor: default; }
.none        { cursor: none; }

/* Links & states */
.pointer     { cursor: pointer; }
.help        { cursor: help; }
.progress    { cursor: progress; }
.wait        { cursor: wait; }

/* Text & editing */
.text        { cursor: text; }
.vertical-text { cursor: vertical-text; }

/* Drag & selection */
.alias       { cursor: alias; }
.copy        { cursor: copy; }
.move        { cursor: move; }
.no-drop     { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.grab        { cursor: grab; }
.grabbing    { cursor: grabbing; }

/* Resize (all directions) */
.col-resize  { cursor: col-resize; }
.row-resize  { cursor: row-resize; }
.n-resize    { cursor: n-resize; }
.s-resize    { cursor: s-resize; }
.e-resize    { cursor: e-resize; }
.w-resize    { cursor: w-resize; }
.ne-resize   { cursor: ne-resize; }
.nw-resize   { cursor: nw-resize; }
.se-resize   { cursor: se-resize; }
.sw-resize   { cursor: sw-resize; }
.ew-resize   { cursor: ew-resize; }
.ns-resize   { cursor: ns-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
.all-scroll  { cursor: all-scroll; }

/* Zooming */
.zoom-in     { cursor: zoom-in; }
.zoom-out    { cursor: zoom-out; }

/* removed form item formatting */
.no-form {
  background-color: inherit !important;
  color: inherit !important;
  border: none !important;
  outline: none !important;
  font-size: inherit !important;
  padding: 0 !important;
}