:root{
  --bg: #4878A7; /*#0b0b10;*/
  --card: blue; /*#14141c;*/
  --ink: yellow; /*#eaeaf2;*/ /*the text n stuff*/
  --muted: yellow; /*#a9adc1;*/ /*other text?? like the date, comments, and copyright at the bottom*/
  --brand: Yellow; /*#7aa2ff;*/ /*link text color*/
  --accent: yellow; /*#8effc1;*/ /*no idea*/
  --line: black; /*#262636;*/ /*border color*/
  --chip: grey; /*#1d1d2a;*/
  --content-max: 1000px;        /* blog width (unchanged) */
  --content-max-wide: 1500px;   /* wider for comics */
}

.container{max-width: var(--content-max);}
.container.wide{max-width: var(--content-max-wide);}

/* helper to keep certain sections at the old width on wide pages */
.card.narrow{
  max-width: var(--content-max); /* your old 1000px width */
  margin-inline: auto;           /* center it */
  width: 100%;
}



*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1000px;margin:2rem auto;padding:0 1rem}
.site-header,.site-footer{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,0.02)}
.site-header{padding:1rem 0}
.site-title{margin:0;font-size:1.5rem}
.top-nav{margin-top:0.25rem;display:flex;gap:1rem;flex-wrap:wrap}
.site-footer{padding:1rem 0;text-align:center;color:var(--brand)}

/*.card is similar to my previous .main I think*/
.card{
	border-radius: 20px 20px 0px 0px;
	color: white;
	background-color: #316286;
	margin-left: 5%;
	margin-right: 5%;
	border-style: solid;
	border-color: #21526D;
	border-width: 8px;
}
.viewer-top{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.comic-title{margin:.25rem 0 0 0}
.comic-meta{color:var(--muted);font-size:.9rem}

.comic-figure{margin:1rem 0}
.comic-figure img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);display:block;background:rgba(255, 255, 255, 0.5)}
.alt-text{margin-top:.5rem;color:var(--muted);font-size:.95rem}

.pager{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.pager button{border:1px solid var(--line);background:var(--chip);color:var(--ink);padding:.5rem .75rem;border-radius:10px;cursor:pointer}
.pager button:disabled{opacity:.5;cursor:not-allowed}
.pager-status{color:var(--muted);min-width:7ch;text-align:center}

.search-row{display:flex;gap:.5rem;flex-wrap:wrap}
.search-row input{flex:1;min-width:220px;padding:.55rem .7rem;border-radius:10px;border:1px solid var(--line);background:var(--chip);color:var(--ink)}
.search-row button{border:1px solid var(--line);background:var(--chip);color:var(--ink);padding:.5rem .75rem;border-radius:10px;cursor:pointer}
.search-row .ghost{background:transparent}

.tag-row,.tag-cloud{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}
.tag{background:var(--chip);border:1px solid var(--line);padding:.25rem .6rem;border-radius:999px;font-size:.9rem;cursor:pointer}
.tag:hover{border-color:var(--brand)}

.results-list{list-style:none;margin:0;padding:0}
.results-list li{border-top:1px solid var(--line);padding:.75rem 0}
.result-title{display:block;font-weight:600}
.result-meta{color:var(--muted);font-size:.9rem}

/* Add to your existing styles.css */
.post-list{display:flex;flex-direction:column;gap:1rem}
/*.post{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem}*/
.post h3{margin:.25rem 0 .5rem 0}
.post-meta{color:var(--muted);font-size:.9rem;margin-bottom:.5rem}
.post .content{color:var(--ink)}
.list-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}



/* Okay I definately understand this next stuff. Probably :)*/

	.post{
		border-radius: 10px 10px 0px 0px;
		padding: .5%;
		border-style: solid;
		border-color: #604F95;
		background-image: linear-gradient(#604F95, #4878A7);
		margin: .5%;
	}
	
	img {
		max-width: 100%;
	}