/* ===== index.css (page-specific), mobile-first ===== */
.tile{ display:flex; flex:1; border-radius:8px; padding:20px; margin-bottom:10px; cursor:pointer; background:#2c2f33; outline:1px solid #3a3e43; box-shadow:0 2px 4px rgba(0,0,0,.3); text-decoration:none; color:#fff; overflow:hidden; flex-direction:column; }
.tile h2{ margin-top:0; }
.tile p{ margin-bottom:10px; }
.tile img{ width:100%; height:auto; border-radius:8px; margin:0 0 10px 0; }
.Featuredtile{ display:flex; height:auto; border-radius:8px; padding:20px; margin:5px; cursor:pointer; background:#2c2f33; outline:1px solid #3a3e43; box-shadow:0 2px 4px rgba(0,0,0,1); text-decoration:none; color:#fff; position:relative; flex:1; }
.Featuredtile h2{ margin-top:0; }
.Featuredtile p{ font-size:14pt; }
.Featuredtile img{ width:100%; height:auto; border-radius:8px; margin-right:10px; position:relative; }
.Featuredartisttile{ width:100%; padding:20px; margin-bottom:5px; cursor:pointer; text-decoration:none; color:#fff; position:relative; flex:1; }
.Featuredartisttile h2{ margin-top:0; }
.Featuredartisttile p{ margin-bottom:10px; text-shadow:3px 3px 6px rgb(0 0 0); text-align:center; font-family:"EB Garamond", Sans-serif; font-size:20px; font-weight:800; font-style:italic; color:#f5d2a0; }
.Featuredartisttile img{ width:100%; height:100%; border-radius:8px; position:relative; aspect-ratio:9/16; object-fit:cover; outline:1px solid #3a3e43; box-shadow:0 2px 4px rgba(0,0,0,1); }
.Textbox{ display:flex; flex-direction:column; flex:1; height:auto; justify-content:center; }
.FeaturedBox{ width:100%; flex:1; align-items:stretch; display:grid; }
.FeaturedArticleBox{ width:100%; flex:1; align-items:start; display:grid; background:#2c2f33; box-shadow:0 2px 4px rgba(0,0,0,.3); border-radius:8px; margin-bottom:10px; }
.ToolsBox{ width:95%; flex:1; margin-right:10px; }
.banner{ width:100%; height:auto; position:relative; overflow:hidden; }
.banner img{ max-width:100%; height:auto; position:absolute; top:0; left:0; opacity:0; transition:opacity 1s ease-in-out; margin-left:0; }
.banner img:first-child{ opacity:1; }
.overlay-text{ position:absolute; bottom:0; right:0; background:rgba(0,0,0,.7); color:#fff; padding:10px; border-radius:5px; }
main{ display:flex; align-items:flex-start; position:relative; overflow-wrap:anywhere; justify-content:center; flex-direction:column; }
#center, #centernoside, #centernosidewide{ flex:1; width:100%; max-width:900px; padding:20px; margin-inline:auto; }
#centernosidewide{ max-width:1200px; }
.right, .left{ width:100%; position:static; top:auto; padding:20px; }
.fixed-div{ display:none; }
.box{ display:flex; justify-content:flex-start; align-items:center; flex-direction:column; width:100%; background:#00bfff0a; border:1px solid #dddddd16; box-shadow:0 2px 4px rgba(0,0,0,.3); border-radius:8px; padding:20px; margin-bottom:10px; text-align:center; overflow:hidden; box-sizing:border-box; }
.author-details-box{ background:#00bfff0a; border:1px solid #dddddd16; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,.3); padding:20px; margin-top:20px; margin-bottom:10px; }
.author-details{ display:flex; align-items:center; }
.author-details img{ max-width:50px; border-radius:50%; }
.author-info{ margin-left:20px; }
.author-info span{ font-size:1.5rem; font-weight:bold; margin:0; }
.author-info p{ margin:10px 0; }
.social-links{ list-style:none; padding:0; }
.social-links li{ display:inline; margin-right:10px; }
.social-links a{ text-decoration:none; color:#0074E4; }
.social-links a:hover{ text-decoration:underline; }
.step{ display:grid; grid-template-columns:auto 1fr; align-items:baseline; }
.StepsBlock{ width:3rem; height:3rem; background:#1a303d; border:1px solid #dddddd16; box-shadow:0 2px 4px rgba(0,0,0,.3); border-radius:5px; font-size:28pt; font-weight:bold; display:flex; align-items:center; justify-content:center; }
.step-content{ padding-left:.625rem; }
.step h2{ font-size:28pt; }
.inset-text{ color:#fff; padding:20px; border-left:8px solid #fff; margin:20px 0; }
.code-snippet-section{ display:flex; align-items:center; margin-top:5px; margin-bottom:5px; }
pre{ background:#0f0f0f; padding:5px 20px; border:1px solid #dddddd1f; border-radius:20px 0 0 20px; border-right:transparent; margin:0; overflow-wrap:break-word; text-wrap:balance; }
.amazon-container{ display:flex; gap:20px; flex-wrap:wrap; width:100%; }
.amazon-product{ flex:1; min-width:250px; padding:15px; text-align:center; box-sizing:border-box; background:#00bfff0a; border:1px solid #dddddd16; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,.3); padding:20px; margin-top:20px; margin-bottom:10px; }
.amazon-product img{ max-width:100%; height:auto; margin-bottom:10px; border-radius:10px; }
.amazon-product h3{ margin-top:0; border-bottom:0; font-size:16pt; }
.amazon-product p{ font-size:10pt; }
@media (min-width:768px){ .right, .left{ width:30%; position:sticky; top: var(--header-h); } }
@media (min-width:1024px){ .tile{ flex-direction:row; } .tile img{ width:150px; height:150px; margin:0 10px 0 0; } .box{ width:50%; } .fixed-div{ display:flex; flex-direction:column; position:fixed; top:200px; right:60px; } }