p{
color: var(--);
}

/** dave styles **/

@media (min-width: 768px) {
  .myotherclass:active {
    font-family: Georgia;
    font-size: var(--myValue);
    transform: translateY(1px);
  }

  #myID {
    border: 4px solid yellow !important;
    color: var(--text-pop);
  }
}

:root {
  --myValue: 50rem;
  --myOtherValue: calc(--myValue * 2);
}

[my-attribute="value"] {
  padding: 0 !important;
}

/* don't forget comments,
active lines,
matching tags,
and text selections */

.slug-dave header,
.slug-dave footer {
  display: none;
}

/** save button **/

/**** 

Typography

****/

/* [mobius-savestate="saving"] {
border: 4px solid yellow !important;
}

[mobius-savestate="saved"] {
border: 4px solid green !important;
} */

/** design system **/

:root {
  font-family: var(--fontFamilyText);
  --fontFamilyDisplay: "Ideal Sans SSm A", "Ideal Sans SSm B", Inter UI, system-ui, sans-serif;
  --fontFamilyText: "Ideal Sans SSm A", "Ideal Sans SSm B", Inter UI, system-ui, sans-serif;
  --fontFamilyMono: 'MonoLisa';
  --fontWeightHeading: 700;
  --fontWeightDisplay: 700;
  --letterSpacingHeading: -0.05em;
  --accentColor: var(--a-400);
}

@media (min-width:1200px) {
  :root {
    --spacingHero: calc(var(--spacing-4xl) * 1) !important;
    --spacingSection: calc(var(--spacing-4xl)) !important;
    --fontSize: 14px !important;
  }
}

@media (min-width:1400px) {
  :root {
    --spacingHero: calc(var(--spacing-4xl) * 1.25) !important;
    --fontSize: 16px !important;
  }
}

/** typography **/

.prose :where(code):not(:where(.not-prose code)) {
  background: var(--p-200);
  white-space: pre;
  border: 1px solid var(--p-300);
  border-radius: .25em;
  padding: 2px var(--spacing-2xs);
  font-size: 90% !important;
}

.dark .prose :where(code):not(:where(.not-prose code)) {
  background: black;
  border: 1px solid var(--p-800);
  color: var(--a-300);
}

item aside,
.prose :where(aside):not(:where(.not-prose aside)) {
  background: rgba(var(--ss-color-a-100), .5);
  border: 1px solid var(--a-300);
  border-radius: .25em;
  padding: var(--spacing-sm) var(--spacing-md);
  position: relative;
  font-size: var(--fontSize1) !important;
  margin: var(--marginBottomReadable) 0;
}

.dark item aside,
.dark .prose :where(aside):not(:where(.not-prose aside)) {
  background-color: rgba(var(--ss-color-a-800), .25);
  color: var(--a-300);
  border: 1px solid var(--a-700);
}

item aside:before,
.prose :where(aside):not(:where(.not-prose aside)):before {
  content: '!';
  position: absolute;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 100%;
  top: -1.5ch;
  left: -1.5ch;
  width: 3ch;
  height: 3ch;
  border: 1px solid var(--a-300);
  color: var(--a-500);
  background: rgba(var(--ss-color-a-100), 1);
  font-size: 80%;
}

.dark item aside:before,
.dark .prose :where(aside):not(:where(.not-prose aside)):before {
  content: '!';
  position: absolute;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 100%;
  top: -1.5ch;
  left: -1.5ch;
  width: 3ch;
  height: 3ch;
  border: 1px solid var(--a-600);
  color: var(--a-400);
  background: rgba(var(--ss-color-a-900), 1);
  font-size: 80%;
}

/** general utilities **/

.hyperlink {
  position: relative;
  display: inline-block;
  color: var(--text-pop);
  font-weight: var(--fontWeightStrong);
  cursor: pointer;
}

.hyperlink:before {
  content: '';
  position: absolute;
  height: 2px;
  top: 1.3em;
  left: 0;
  width: 100%;
  background: var(--accentColor);
  /* transition: .2s all ease; */
}

.hyperlink:hover:before {
  height: 3px;
}

.rainborder {
  margin-bottom: 18px;
}

.rainborder>div {
  border-radius: 10px;
  box-shadow:
    0 0 0 6px var(--a-500),
    0 0 0 12px var(--a-600),
    0 0 0 18px var(--a-700);
}

.rainborder placeholder {
  border-radius: 10px;
  background: black;
}

a:active {
  transform: translateY(1px);
  opacity: .75;
}

/** color **/

body {
  background-image: linear-gradient(to right, var(--p-100), var(--p-200));
}

body.dark {
  background-image: linear-gradient(to right, var(--p-900), black);
}

/**** 
Layout
****/

/** form stuff **/

[data-style="clean"] {
  padding: 0 !important;
}

.formkit-form ::placeholder {
  opacity: 0.5 !important;
}

.formkit-form input {
  color: inherit !important;
  background: transparent !important;
  border: 1px solid currentColor !important;
}

/** subpanels **/

.single-subpanels header,
.single-subpanels footer {
  display: none;
}

/** modal **/

.showinbuilder {
  border: 10px dotted red;
}