/* Reset and base styles */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Courier New",Courier, monospace;font-weight: bold;line-height:1.8;color:#e0e0e0;background:#2b2b2b url('https://pub-8c0c679088a444c68f4934a60360d485.r2.dev/IMG_20220621_085706~2.jpg');background-size:320px 479px;background-attachment:fixed;min-height:100vh}

.main-container{max-width:800px;margin:0 auto;padding:40px 60px;background:rgba(43,43,43,.95);min-height:100vh;border:solid #cecece;border-radius:2px;backdrop-filter:blur(1px)}
.main-container.blog-section{max-width:1000px}

header{text-align:center;margin-bottom:0;padding:0 0 20px 0;border-bottom:1px solid #555}
.header-content{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px}
.header-text{flex:1;min-width:300px}
h1{font-size:2.2em;margin-bottom:8px;color:#e0e0e0}

a{color:#e0e0e0;text-decoration:none}
a:hover{color:#fff;text-decoration:underline}

.main-container.blog-section .content a{text-decoration: underline;}
.main-container.blog-section .content a:hover {color: #fff;text-decoration: underline;}

.quote{text-align:left;font-style:italic;color:#b0b0b0;padding:15px 0 10px 0}
.quote_b{background:url('https://pub-8c0c679088a444c68f4934a60360d485.r2.dev/coffee_wall.jpg') center/100% no-repeat fixed;line-height:2.5;padding:50px 0 0 150px;margin:20px auto 40px;font-style:italic;text-align:left;border-radius:6px;max-width:500px;position:relative;overflow:hidden;min-height:250px;transform:translateZ(0);will-change:transform}
.quote_b::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:1}
.quote_b q{font-family:Georgia, serif;position:relative;z-index:2;color:#fff;font-size:1.2em;text-shadow:4px 4px 8px #000;display:block;font-weight:500}

.subtitle{font-size:1em;font-style:italic;margin-bottom:10px}

.document-navigation{text-align:center;padding:15px 0 30px 0;margin-bottom:20px}
.document-navigation a{color:#e0e0e0;text-decoration:none;margin:0 15px;font-size:1em;border: none;padding: 2px 5px;}
.document-navigation a::before{content: "[";color: #7f8c8d;margin-right: 5px;}
.document-navigation a::after{content: "]";color: #7f8c8d;margin-left: 5px;}
.document-navigation a:hover{background-color:#e0e0e0;color: #2b2b2b;text-decoration: none;}
.document-navigation a.current{font-weight:bold;color: #fff}

/* Content sections */
.intro,.content{background:transparent;padding:0;border-radius:0;box-shadow:none;margin-bottom:40px}
.intro h2,.content h2{font-size:1.6em;margin-bottom:15px;font-weight:bold}
.intro ul{margin-left:20px}
.content a{color:#e0e0e0;text-decoration:none}
.content a:hover{color:#fff;text-decoration:underline}

.post-list{margin-top:30px}
.post-item{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #eee}
.post-title{color:#2c3e50;text-decoration:none}
.post-title:hover{text-decoration:underline}
.empty-state{color:#7f8c8d;font-style:italic;margin-top:20px}

footer{text-align:center;padding:20px 0;color:#7f8c8d;border-top:1px solid #e0e0e0;margin-top:50px}

.badges{margin-bottom:5px;min-height:31px;display:flex;gap:5px;align-items:center;justify-content:center;flex-wrap:wrap}
.badges img{height:31px;width:88;margin:0 8px 10px 0;vertical-align:middle}

/* Responsive */
@media (max-width:768px){
.header-content{flex-direction:column;align-items:center;text-align:center}
.header-text{min-width:auto}
.header-navigation{justify-content:center;margin-top:20px}
.main-container{background:rgba(43,43,43,.98)}
}

@media (max-width:600px){
.main-container{padding:10px;background:rgba(43,43,43,.98)}
h1{font-size:2em}
.header-navigation{flex-direction:column;align-items:center;gap:8px}
.nav-button{width:120px;text-align:center;padding:10px 16px}
.intro,.content{padding:20px}
.badges img{margin:5px;display:inline-block}
}

.dashboard-grid{display:grid;grid-template-columns:200px 1fr 200px;gap:20px;margin-top:30px;align-items:start;}
.sidebar-left, .sidebar-right{display:flex;flex-direction:column;gap:20px;position:sticky;top:20px;}
.sidebar-box{border:1px solid #555;background:rgba(0, 0, 0, 0.2);padding:15px;text-align:center;border-radius:4px;}
.sidebar-box h4{border-bottom:1px dashed #777;margin-bottom:10px;padding-bottom:5px;font-size:0.9em;text-transform:uppercase;color:#b0b0b0;}
.center-content{min-width:0;}

@media (max-width: 900px){
.dashboard-grid{grid-template-columns: 1fr;}
.sidebar-left, .sidebar-right{display:none;}
}

.layout-wrapper {display: flex;justify-content: center;align-items: flex-start;gap: 20px;padding-top: 40px;max-width: 1600px;margin: 0 auto;}
.sidebar-outer {width: 220px;flex-shrink: 0;position: sticky;top: 20px;display: flex;flex-direction: column;gap: 20px;}
.sidebar-box {background: rgba(43, 43, 43, 0.95);border: 2px solid #cecece;border-radius: 4px;padding: 15px;text-align: center;backdrop-filter: blur(1px);color: #e0e0e0;}
.sidebar-box h4 {border-bottom: 1px dashed #777;margin-bottom: 10px;padding-bottom: 5px;font-size: 0.9em;text-transform: uppercase;color: #b0b0b0;}

.layout-wrapper .main-container {margin: 0;flex-grow: 1;max-width: 800px;}
.layout-wrapper .main-container.blog-section {max-width:1000px;width:100%;}

@media (max-width: 1300px) {
    .sidebar-outer {display: none;}
    .layout-wrapper .main-container {margin: 0 auto;}
}

.sidebar-box.no-padding {padding: 0;overflow: hidden;}
.sidebar-box img {width: 100%;height: auto;display: block;}
.flip-horizontal {transform: scaleX(-1);}