/* The Ones look, shared by every public page.

   Each page links this after its own <style>, so it is a skin over the existing layout:
   colours, type and outlines. Nothing structural moves. Cards are named per page, so their
   thick outline lives in a short <style> block on the page itself, using the .toon-card recipe
   below. The homepage carries its own copy of these rules inline. */

:root{
  --paper:#85CCF8; --card:#FFFFFF; --ink:#0B0B0F; --ink-2:#2B3550; --ink-3:#2B3550;
  --line:#0B0B0F; --line-2:#0B0B0F; --sui:#0066DF; --sui-bright:#0066DF; --sui-wash:#DCEFFD;
  --sky:#85CCF8; --blue:#0066DF; --soft:#CFE6F8;
}
html,body{background:#85CCF8 !important}
body{color:#0B0B0F}

/* One typeface for everything except code and on-chain identifiers. :where() keeps this at zero
   specificity, so the heading and number rules below win over it without a fight. */
:where(body *:not(code, pre, kbd, .mono, .mono *, svg, svg *)){font-family:Fredoka,-apple-system,"Segoe UI",sans-serif !important}
body{font-family:Fredoka,-apple-system,"Segoe UI",sans-serif !important}

h1,h2,h3{font-family:"Luckiest Guy",cursive !important;font-weight:400 !important;color:#0066DF !important;
  paint-order:stroke fill;letter-spacing:.5px !important;text-transform:uppercase;line-height:1.08}
h1{-webkit-text-stroke:2.5px #0B0B0F}
h2{-webkit-text-stroke:2px #0B0B0F}
h3{-webkit-text-stroke:1.5px #0B0B0F}
h1 em,h2 em,h3 em{font-style:normal;color:#fff}

a{color:#0066DF}
.bg svg{opacity:.07}
footer,footer a{color:#2B3550 !important}

/* Site chrome, identical on every page. */
.burger{background:#fff !important;border:3px solid #0B0B0F !important;border-radius:12px !important;box-shadow:3px 3px 0 #0B0B0F}
.burger span{background:#0B0B0F !important}
.menu{background:#fff !important;border:4px solid #0B0B0F !important;border-radius:18px !important;box-shadow:6px 6px 0 #0B0B0F;overflow:hidden}
.menu a{font-weight:700 !important;color:#0B0B0F !important;border-bottom:2px solid #CFE6F8 !important}
.menu a:last-child{border-bottom:0 !important}
.menu a:hover{background:#DCEFFD !important;color:#0066DF !important}


/* Recipes. Pages list their own classes against these. */
.toon-card{background:#fff !important;border:4px solid #0B0B0F !important;border-radius:22px !important;box-shadow:6px 6px 0 #0B0B0F !important}
.toon-num{font-family:"Luckiest Guy",cursive !important;font-weight:400 !important;color:#0066DF !important;
  -webkit-text-stroke:1.5px #0B0B0F;paint-order:stroke fill;letter-spacing:.5px}
.toon-label{font-weight:700 !important;color:#0066DF !important;letter-spacing:.06em !important}

:where(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select){
  background:#fff !important;border:3px solid #0B0B0F !important;border-radius:12px !important;color:#0B0B0F !important}
/* Zero specificity, so a page that sets an input inside its own box can take the border off. */
:where(input:focus,textarea:focus,select:focus){outline:3px solid #0066DF !important;outline-offset:1px}
.btn{background:#0066DF;color:#fff !important;border:3px solid #0B0B0F !important;border-radius:14px !important;
  box-shadow:3px 3px 0 #0B0B0F;font-weight:700 !important}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #0B0B0F}
.btn.ghost{background:#fff !important;color:#0B0B0F !important}

/* The site-wide wallet button and its picker. */
.wc{height:42px;padding:0 14px;margin-left:auto;margin-right:8px;font-size:13px;cursor:pointer;white-space:nowrap;
  background:#fff !important;border:3px solid #0B0B0F !important;border-radius:12px !important;box-shadow:3px 3px 0 #0B0B0F;font-weight:700 !important;color:#0B0B0F !important}
.wc.on{background:#DCEFFD !important;color:#0066DF !important}
.wcpick{width:100%;max-width:620px;margin:8px auto 0;background:#fff;overflow:hidden}
.wcpick button{display:block;width:100%;text-align:left;padding:13px 16px;border:0;border-bottom:2px solid #CFE6F8;background:none;font-weight:600;cursor:pointer;color:#0B0B0F}
.wcpick button:last-child{border-bottom:0}
.wcpick{border:4px solid #0B0B0F !important;border-radius:22px !important;box-shadow:6px 6px 0 #0B0B0F !important}
h1 em,h2 em,h3 em{font-style:normal !important;color:#fff !important}

/* Room between the nav and the page title, which sat tight under the bigger outlined buttons. */
.nav{margin-bottom:18px !important}

/* Section labels sit under a card whose hard shadow was covering them. */
.slabel{margin-top:30px !important}