/* --- Global Resets & Fonts --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #e3fafc; /* Very soft baby blue background */
    color: #2b4560; /* Soft dark slate blue for cozy text contrast */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
}

/* --- Header Styling --- */
header {
    background-color: #a5d8ff; /* Soft sky blue wrapper */
    text-align: center;
    padding: 3rem 1rem;
    border-bottom: 4px dashed #74c0fc;
}

header h1 {
    font-size: 2.5rem;
    color: #1c7ed6;
    text-shadow: 2px 2px 0px #fff;
    margin-bottom: 0.5rem;
}

header h1 span {
    color: #ffd43b; /* Little golden accent star */
}

header p {
    font-size: 1.1rem;
    color: #495057;
    font-style: italic;
}

/* --- CSS TAB LOGIC (The Magic Behind the Pages) --- */

/* 1. Hide the ugly radio button circles completely */
input[type="radio"] {
    display: none;
}

/* 2. Hide ALL page content boxes by default */
.tab-content {
    display: none;
    background-color: white;
    padding: 2.5rem;
    border-radius: 15px;
    border: 3px solid #d0ebff;
    box-shadow: 0 8px 24px rgba(77, 171, 247, 0.08);
}

/* 3. When a specific radio button is checked, display ONLY its matched section */
#tab-anime:checked ~ .container #content-anime { display: block; }
#tab-games:checked ~ .container #content-games { display: block; }
#tab-art:checked ~ .container #content-art { display: block; }
#tab-music:checked ~ .container #content-music { display: block; }
#tab-tech:checked ~ .container #content-tech { display: block; }

/* 4. When a tab is active, highlight the menu button dynamically */
#tab-anime:checked ~ nav #nav-anime,
#tab-games:checked ~ nav #nav-games,
#tab-art:checked ~ nav #nav-art,
#tab-music:checked ~ nav #nav-music,
#tab-tech:checked ~ nav #nav-tech {
    background-color: #1971c2;
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.15);
}

/* --- Navigation Sticky Menu --- */
nav {
    background-color: #74c0fc;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 0.8rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Labels styled as clickable menu buttons */
.nav-btn {
    color: white;
    font-weight: bold;
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, transform 0.1s ease;
    background-color: #4dabf7;
}

.nav-btn:hover {
    background-color: #339af0;
}

/* --- Container Layout --- */
.container {
    max-width: 850px;
    margin: 3rem auto;
    padding: 0 1rem;
    min-height: 400px; /* Keeps your footer cleanly separated even on smaller text tabs */
}

/* --- Section Titles --- */
.section-title {
    color: #1c7ed6;
    font-size: 1.8rem;
    border-bottom: 2px solid #e7f5ff;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* --- Blog Post Article Styling --- */
.post {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed #d0ebff;
}

.post:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.post h3 {
    color: #228be6;
    margin-bottom: 0.4rem;
    font-size: 1.35rem;
}

.date {
    display: inline-block;
    font-size: 0.85rem;
    color: #adb5bd;
    margin-bottom: 0.8rem;
}

.post p {
    margin-bottom: 1rem;
    color: #495057;
    text-align: justify;
}

.post em {
    color: #15aabf;
    font-weight: 500;
}

/* --- Tech Section Grid (Spec Cards) --- */
.tech-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 650px) {
    .tech-grid {
        grid-template-columns: 1fr; /* Stack single column on mobile screens */
    }
}

.tech-card {
    background-color: #f8f9fa;
    border-left: 4px solid #339af0;
    padding: 1.2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.tech-card h3 {
    color: #1c7ed6;
    font-size: 1.15rem;
    margin-bottom: 0.8rem;
}

.tech-card ul {
    list-style-type: none;
}

.tech-card li {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: #495057;
}

.tech-card strong {
    color: #212529;
}

/* --- Footer --- */
footer {
    text-align: center;
    padding: 2rem;
    background-color: #d0ebff;
    color: #495057;
    margin-top: 4rem;
    font-size: 0.9rem;
}