.portfolio-sublist{list-style:disc inside;margin-left:1.5rem;margin-top:0.2rem}
.portfolio-sublist li{margin-bottom:0.2rem;font-size:0.98em}
/* Paper-like handwritten blog stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand:wght@400;700&display=swap');


:root {
  --bg: linear-gradient(135deg, #f3efe8 60%, #ffe3ec 100%);
  --paper: #fff;
  --text: #222;
  --muted: #6b6b6b;
  --accent: #1766d1;
  --accent2: #ff6f91;
  --accent3: #ffb86f;
  --accent4: #6fd1b8;
  --max-width: 760px;
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body {
  margin: 0;
  font-family: 'Patrick Hand', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: var(--bg);
  background-attachment: fixed;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background 0.5s;
}

.container{max-width:var(--max-width);margin:2rem auto;padding:1rem}

/* Header & nav (kept simple so handwriting stands out) */
.site-header{border-bottom:1px solid rgba(0,0,0,0.06);padding:0}
.site-title{margin:0;padding:1rem 0;font-size:1.6rem;letter-spacing:0.5px}
.site-title a{color:var(--text);text-decoration:none}
.site-nav{display:flex;gap:1rem;align-items:center}
.site-nav a{color:var(--muted);text-decoration:none;font-size:0.95rem}

/* Paper card that holds the main content */
.paper{
  background:var(--paper);
  border-radius:var(--radius);
  padding:2rem 2.25rem;
  box-shadow:0 10px 30px rgba(16,24,40,0.06), 0 2px 6px rgba(16,24,40,0.04);
  border:1px solid rgba(0,0,0,0.06);
  /* subtle ruled-paper lines */
  background-image:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.03) 0px,
    rgba(0,0,0,0.03) 1px,
    transparent 1px,
    transparent 36px
  );
}

.hero{padding:0 0 1rem 0}
.subtitle{color:var(--muted);font-size:0.97rem;margin-top:0.25rem}

.portfolio{margin-top:2.5rem}
.portfolio-list{list-style:square inside;margin:0 0 0.5rem 0;padding:0;line-height:1.7}
.portfolio-list li{margin-bottom:0.5rem}

.posts{display:flex;flex-direction:column;gap:1.25rem;margin-top:1rem}
.post-list-item{padding:0.75rem;border-radius:8px;background:transparent;border-left:4px solid rgba(23,102,209,0.08)}
.post-list-item h3{margin:0 0 0.25rem 0;font-size:1.15rem}
.post-list-item a{color:var(--accent);text-decoration:none}

.meta{font-size:0.9rem;color:var(--muted);margin:0.2rem 0}

/* author byline for posts */
.byline{font-size:0.95rem;color:var(--muted);margin:0.25rem 0 1rem}

.post-footer{margin-top:2rem;border-top:1px dashed rgba(0,0,0,0.04);padding-top:0.75rem;color:var(--muted);font-size:0.95rem}

article{font-size:1.12rem}
article h2{font-size:1.55rem;margin-top:0}
article h3{font-size:1.15rem}

.site-footer{border-top:1px solid rgba(0,0,0,0.04);margin-top:2rem;padding:1rem 0;color:var(--muted);font-size:0.9rem}

/* Make the main paper take up more horizontal space on larger screens */
main.container.paper{max-width:80vw}
@media (max-width:919px){
  main.container.paper{max-width:95%}
}

/* Footer link styles */
.site-footer .container{display:flex;flex-direction:column;align-items:center;gap:0.5rem}
.site-footer .footer-links{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center}
.site-footer .footer-links a{color:var(--muted);text-decoration:none;font-size:0.95rem}
.site-footer .footer-links a:hover{color:var(--accent)}

code{background:#fbfbfb;padding:0.15rem 0.35rem;border-radius:4px;font-family:ui-monospace,Menlo,monospace;font-size:0.95em}

@media (min-width:920px){
  .site-header{display:flex;align-items:center;justify-content:space-between}
  .container{margin-top:3rem}
}

/* Small decorative accent for site title */


/* Prettier site enhancements */
.site-header {
  background: linear-gradient(90deg, #ffe3ec 0%, #e3eafc 100%);
  box-shadow: 0 2px 16px #ffb86f33;
  border-radius: 0 0 22px 22px;
  animation: headerFadeIn 1.2s cubic-bezier(.4,0,.2,1);
}
@keyframes headerFadeIn {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}
.site-title {
  font-family: 'Patrick Hand', cursive, system-ui;
  font-size: 2.2rem;
  letter-spacing: 1.2px;
  color: #ff6f91;
  text-shadow: 0 2px 8px #e3eafc, 0 1px 0 #fff;
  transition: color 0.3s;
}
.site-nav a {
  padding: 0.3rem 0.9rem;
  border-radius: 8px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  font-weight: 600;
  background: linear-gradient(90deg, #fff6f6 60%, #e3eafc 100%);
  box-shadow: 0 1px 4px #ffb86f11;
}
.site-nav a:hover, .site-nav a:focus {
  background: linear-gradient(90deg, #ffb86f 0%, #ff6f91 100%);
  color: #fff;
  box-shadow: 0 2px 8px #ffb86f33;
}
.paper {
  border: 2px solid #ffb86f55;
  box-shadow: 0 8px 32px #ffb86f22, 0 2px 6px #b3c6e01a;
  background: linear-gradient(180deg, #fff 80%, #ffe3ec 100%);
  transition: box-shadow 0.3s, border 0.3s;
}
article h2, article h3 {
  color: #ff6f91;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 0 #fff, 0 2px 8px #ffe3ec;
}
article p {
  font-size: 1.13rem;
  color: #2a2a2a;
  background: linear-gradient(90deg, #fff6f6 60%, #e3eafc 100%);
  border-radius: 8px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.7rem;
}
.site-footer {
  background: linear-gradient(90deg, #e3eafc 0%, #ffe3ec 100%);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -2px 16px #ffb86f33;
}
.site-footer .footer-links a {
  padding: 0.2rem 0.7rem;
  border-radius: 7px;
  transition: background 0.18s, color 0.18s;
  font-weight: 600;
}
.site-footer .footer-links a:hover {
  background: linear-gradient(90deg, #ffb86f 0%, #ff6f91 100%);
  color: #fff;
}
.site-footer p {
  color: #1a2a4a;
  font-size: 1.01rem;
  text-shadow: 0 1px 0 #fff;
}

/* Theme switcher button */
.theme-switcher {
  background: linear-gradient(90deg, #ffb86f 0%, #ff6f91 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.4rem 1.1rem;
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  margin-left: 1.2rem;
  box-shadow: 0 2px 8px #ffb86f33;
  transition: background 0.2s, color 0.2s;
}
.theme-switcher:hover {
  background: linear-gradient(90deg, #1766d1 0%, #6fd1b8 100%);
  color: #fff;
}

/* Make links a little cleaner */
a{cursor:pointer}

/* Keep print-friendly (removes background lines when printing) */
@media print{
  body{background:#fff}
  .paper{box-shadow:none;background-image:none;border:1px solid #ddd}
}