/* *{outline: 1px solid blue;}  */
:root{
  --ink:#333333; --muted:#6b7280; --bg:#FFF5F1; --panel:#FFF5F1; --line:#666768;
  --accent:#D62872; --accent-2:#F47C2B; --accent-3:#FFD966; --radius:12px; --shadow:0 6px 20px rgba(0,0,0,.1);
  --bg1:#f4e7ed; --bg2:#bfd2f891; --bg3:#fad0b5;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0c0d10; --panel:#111317; --ink:#f3f4f6; --muted:#a1a1aa; --line:#23252b; --shadow:none; }
}
.bg1{background:var(--bg1);}
.bg2{background:var(--bg2);}
.bg3{background:var(--bg3);}
.bgacc1{background:var(--accent);}
.bgacc2{background:var(--accent-2);}
.bgacc3{background:var(--accent-3);}
.bggrad1{background: linear-gradient(to right, var(--accent), var(--accent-2));}
.bggrad2{background: linear-gradient(to right, var(--accent-2), var(--accent-3));}
.muted{color:var(--muted)}
.m0a{margin: 0 auto;}
.ps-45{padding-left: 2rem !important;}
.front-page-heading{font-size: 1.5rem; font-weight: 600;z-index:5}
.front-page-heading-smaller{font-size: 1.3rem; font-weight: 600;z-index:5}

html,body{margin:0;padding:0; background: var(--bg); scroll-behavior: smooth;}
body{font:16px/1.7 'Quicksand', Roboto, Arial, sans-serif; font-size:11pt; color:var(--ink); background:var(--panel)}
h0{ font-family: 'Baloo 2', Roboto, Arial, sans-serif;line-height:3.0; margin:.2rem 0 .8rem; font-size: 3rem;}
h1{ font-family: 'Baloo 2', Roboto, Arial, sans-serif;line-height:1.3; margin:.2rem 0 .8rem; font-size: 2rem;}
h2{ font-family: 'Baloo 2', Roboto, Arial, sans-serif;line-height:1.2; margin:.2rem 0 .8rem; font-size: 1.5rem;}
h3{ font-family: 'Baloo 2', Roboto, Arial, sans-serif;line-height:1.1; margin:.2rem 0 .8rem; font-size: 1.2rem;}
h4{ font-family: 'Baloo 2', Roboto, Arial, sans-serif;line-height:1; margin:.2rem 0 .8rem; font-size: 1.0rem;}
main {width:100% !important;}
.outer{margin:0 auto;}
.site-header,.site-footer{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  padding:.8rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;
}
.site-footer{position:static;}
.logo { width: 100px; height: auto;}
.min-height-60 {min-height:60px;}

.nav.nav-buttons {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.btn {
  display: inline-block;
  padding:.6em .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(47,112,255,0.06);
  background:var(--panel);
  border-radius: 1.1rem;
}
.nav-btn { background: var(--panel) !important; color: var(--ink) !important; }
.nav-btn:hover, .nav-btn:focus { background: var(--accent) !important; color: var(--panel) !important; opacity: 1; box-shadow: 0 4px 16px rgba(47,112,255,0.13); }
.nav-btn-rev { background: var(--accent) !important; color: var(--ink) !important; }
.nav-btn-rev:hover, .nav-btn-rev:focus { background: var(--panel) !important; opacity: 1; box-shadow: 0 4px 16px rgba(47,112,255,0.13); }

.front-page-special-link {color: var(--accent); background-color: var(--bg1); text-decoration: none;cursor:pointer; padding: 0.2em 2em}
.front-page-special-link:hover, .front-page-special-link:focus { color: var(--bg1) !important; background-color: var(--accent) !important; }

.nav-search {
  display: inline-block;
  margin-left: 1.2rem;
  display: flex;
  align-items: center;
  min-width: 120px;
  position: relative;
}
.search-input {
  width: 100%;
  padding: 0.3em 2em 0.3em 2em;
  font-size: 1em;
  border-radius: 2em;
  border: 1px solid #ccc;
}
.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(106,12,146,0.2);
}
.search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
}
.search-results {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 1000;
}
.search-result {
  line-height: 1rem;
  display: block;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  text-decoration: none;
  color: var(--ink);
}
.search-result:hover {
  background-color: var(--accent-3);
}

/** grid and cards in it */
.grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); align-items:start;}
.card{
  background:var(--panel); border-radius:var(--radius);
  overflow:hidden; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-align: center;
  --bs-card-spacer-y: 0px;
  --bs-card-spacer-x: 0px;
  --bs-card-cap-padding-x: 0px;
  --bs-card-cap-padding-y: 0px;
  --bs-card-border-width: 0px;
  --bs-border-width: 0px;
  --bs-card-img-overlay-padding: 0px;
  --bs-card-title-spacer-y: 0px;
}

.coloring-card-big { max-width: 250px; }
.coloring-card-mini { max-width: 100px; }
.coloring-card { padding: 1rem; border-radius: 1rem;}
.coloring-card:hover{transform:translateY(-2px); box-shadow:var(--shadow);cursor: pointer; border-color:color-mix(in srgb, var(--accent) 25%, var(--line)); }
.coloring-card img{width:100%; object-fit:cover; display:block; }
.coloring-card h2{font-size:1.05rem; padding:.9rem .9rem .2rem; margin:0;}
.coloring-card a{text-decoration: none;}

.category-card { padding: 1rem; border-radius: 1rem; max-width: 180px; }
.category-card a { text-align: center; display: block;  margin: 0px !important}
.category-card img {  text-align: center; display: block;  margin: 0px !important}
.category-card .category-card-body { padding-top: 0.1rem; padding: 0 !important;}
.category-card .category-card-body a {text-decoration: none; color: var(--ink); font-size: 1.2rem; padding: 0px !important;}
.category-card-body { flex: none; margin: 0px !important}
.category-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); cursor: pointer; border-color: var(--accent) 50%;}

.info-icon img { display: block; margin: 0 auto; padding: 1.2rem; border-radius: 50%; }
.info-icon h3 { font-size: 1.5rem; margin-top: 0.5rem; }
.big-card { border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; text-align: center;}
.big-card img { max-width: 200px;}
.max-icon-size { max-width: 200px;}

.badge{margin:0 .9rem .9rem; display:inline-block; padding:.15rem .55rem; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:.75rem}

.page .hero img{width:100%; border-radius:var(--radius); border:1px solid var(--line)}
.actions{display:flex; gap:.6rem; margin:1rem 0 1.25rem}

.breadcrumbs{font-size:.9rem;color:var(--muted);margin:.25rem 0 1rem}
.breadcrumbs a{color:inherit; text-decoration:none}
.breadcrumbs a:hover{color:var(--accent)}

.pagination{display:flex; gap:1rem; justify-content:center; align-items:center; margin:2rem 0}



.deleteme {color: red;background-color: yellow;}