
@font-face {
  font-family:'DM Sans';
  src:url('/portfolio/sidequest/demo/assets/DM-Sans-variable.ttf') format('truetype');
  font-style:normal;
  font-weight:100 1000;
  font-display:swap;
}
:root {
  --color-shell:#ffeeec;
  --color-blush:#ffdad3;
  --color-peach:#ffc0b7;
  --color-salmon:#ff9b8b;
  --color-coral:#ff7865;
  --color-red:#ff4134;
  --color-oxblood:#6a0b00;
  --color-cherry:#3e0600;
  --color-black:#000000;
  --font-sans:'DM Sans',sans-serif;
  --body_typo-font-family:var(--font-sans);
  --h1_typo-font-family:var(--font-sans);
  --h2_typo-font-family:var(--font-sans);
  --h3_typo-font-family:var(--font-sans);
  --h4_typo-font-family:var(--font-sans);
  --h5_typo-font-family:var(--font-sans);
  --h6_typo-font-family:var(--font-sans);
  --mainBackground:var(--color-shell);
  --secondaryBackground:var(--color-blush);
  --mainColor:var(--color-cherry);
  --secondaryColor:var(--color-oxblood);
  --zx-paper:var(--color-shell);
  --zx-ink:var(--color-black);
  --zx-blue:var(--color-shell);
  --zx-pink:var(--color-blush);
  --zx-mint:var(--color-shell);
  --zx-yellow:var(--color-peach);
  --zx-accent:var(--color-red);
  --local-ink:var(--color-cherry);
  --local-yellow:var(--color-blush);
}
body { font-family:var(--font-sans)!important; color:var(--color-cherry); font-size:18px; }
body :is(p,a,h1,h2,h3,h4,h5,h6,label,button,input,textarea,select,.number--count,.counter--caption,.sq-wordmark,.sq-method-mark) { font-family:var(--font-sans)!important; }
.sq-wordmark,.sq-method-mark,.zx-section,.zx-footer { font-family:var(--font-sans)!important; }
body h1,body h2,body h3,body h4,body h5,body h6,.sq-hero-title { color:var(--color-black); }
.sq-hero-title { color:var(--color-black)!important; font-weight:500; letter-spacing:-.04em; }
.sq-wordmark { color:var(--color-black); }
#masthead .sq-wordmark.main__logo { width:180px; }
.sq-method-mark { color:var(--color-cherry); }
.use--sec--color,.counter--caption p,.zx-context-note,.local-form-note,.zx-person-role { color:var(--color-oxblood)!important; }
::selection { background:var(--color-black); color:var(--color-shell); }
input,textarea { caret-color:var(--color-black); }
:focus-visible { outline:2px solid var(--color-black)!important; outline-offset:5px; }
html { scrollbar-color:var(--color-oxblood) var(--color-shell); }
.local-mobile-header,#local-mobile-menu { background:var(--color-shell); }
.local-menu-toggle { background:var(--color-blush); color:var(--color-cherry); }
#local-mobile-menu a { color:var(--color-cherry); }
#local-mobile-menu a:focus-visible { background:var(--color-blush); }
#site-navigation a { background:var(--color-peach)!important; color:var(--color-cherry)!important; }
.zx-section { background:var(--color-shell); }
.zx-section h2 span { color:var(--color-oxblood); }
.zx-link-card { background:var(--color-shell); color:var(--color-cherry); border:1px solid var(--color-blush); }
.zx-link-stage--intro .zx-link-slot:nth-child(2) .zx-link-card { background:var(--color-red); border-color:var(--color-red); }
.zx-card-icon { color:var(--color-oxblood); }
.zx-link-stage--intro .zx-link-slot:nth-child(2) .zx-card-icon { color:var(--color-cherry); }
.zx-divider>span { background:var(--color-blush); }
.zx-route-base { stroke:var(--color-peach); stroke-opacity:1; }
.zx-route-progress { stroke:var(--color-oxblood); stroke-opacity:.7; }
.zx-traveller { background:var(--color-red); border-color:var(--color-black); }
.zx-case--mint { background:var(--color-shell); }
.zx-case--pink { background:var(--color-blush); }
.zx-case-sticker { background:var(--color-red); color:var(--color-black); }
.zx-case-category { color:var(--color-oxblood); }
.zx-case-open,.zx-person-thought { border-color:var(--color-peach)!important; }
.zx-person-photo { background:var(--color-blush); }
.zx-person .zx-person-symbol { background:var(--color-blush); color:var(--color-oxblood); }
.zx-faq-item { border-color:var(--color-blush); }
.zx-faq-item.is-open { background:var(--color-blush); }
.zx-faq-item .zx-panel p { color:var(--color-oxblood); }
.sq-feature-media { background:var(--color-peach); }
.sq-feature-link,.pe--button .pb--handle { background:var(--color-black)!important; color:var(--color-shell)!important; }
#contact .form-field { background:var(--color-shell)!important; border:1px solid var(--color-blush); border-radius:50px; }
#contact input,#contact textarea { background:transparent!important; color:var(--color-cherry)!important; }
#contact label { color:var(--color-oxblood); }
#contact label::after { color:var(--color-red)!important; font-size:16px; }
#contact input::placeholder,#contact textarea::placeholder { color:var(--color-oxblood); opacity:1; }
#contact .form-field:focus-within { border-color:var(--color-oxblood); }
#contact .form-field input:focus,#contact .form-field textarea:focus { outline-color:var(--color-black); }
#contact .zx-submit { background:var(--color-black)!important; color:var(--color-shell)!important; border-color:var(--color-black); }
#contact .zx-submit.is-docked .zx-submit-socket { background:var(--color-red); }
.zx-footer { background:var(--color-black); color:var(--color-shell); }
.zx-footer h2,.zx-footer h2 span { color:var(--color-shell); }
.zx-footer .zx-context-note { color:var(--color-salmon)!important; }
.zx-link-stage--return>p { color:var(--color-peach); }
.zx-footer-bottom,.zx-link-stage--return { border-color:var(--color-oxblood); }
.zx-footer :focus-visible { outline-color:var(--color-shell)!important; }
.zx-on-footer #masthead .sq-wordmark,.zx-on-footer #masthead .sq-brand-symbol { color:var(--color-shell); }
.zx-on-footer #masthead .pe--button .pb--handle { background:var(--color-shell)!important; color:var(--color-black)!important; }
@media (hover:hover) and (pointer:fine) {
  #site-navigation a:hover { background:var(--color-black)!important; color:var(--color-shell)!important; }
  #local-mobile-menu a:hover,.zx-person-name a:hover,.zx-faq-item:not(.is-open):hover { background:var(--color-blush); }
  .sq-feature-link:hover,.pe--button .pb--handle:hover,#contact .zx-submit:hover { background:var(--color-oxblood)!important; color:var(--color-shell)!important; }
  .pe--button .pb--handle:hover .zx-arrow,.sq-feature-link:hover .zx-arrow { color:var(--color-red); }
  .zx-footer-word:hover>span:nth-child(odd) { color:var(--color-red); }
  .zx-case-open:hover .zx-arrow-circle { background:var(--color-black); color:var(--color-shell); }
  .zx-on-footer #masthead .pe--button .pb--handle:hover { background:var(--color-peach)!important; color:var(--color-black)!important; }
}


.zx-link-card.zx-blue { background:var(--color-blush); }
.zx-link-card.zx-pink { background:var(--color-red); border-color:var(--color-red); }
.zx-link-card.zx-mint { background:var(--color-peach); }
.zx-link-card.zx-yellow { background:var(--color-salmon); }
.zx-link-card.zx-pink .zx-card-icon { color:var(--color-cherry); }
.zx-footer { background:var(--color-cherry); }
.zx-route-progress { stroke:var(--color-oxblood); }
.zx-footer-bottom,.zx-link-stage--return { border-color:var(--color-oxblood); }
