/* ================================================= */
/* 0. FONT THEMES                                    */
/* ================================================= */
@font-face {
    font-family: 'Press Start'; /* This is the custom name you'll use in your CSS */
    src: url('fonts/sharetechmono-regular-webfont.woff2') format('truetype');
    /* If you had a .woff2 file, you'd use: 
       src: url('./fonts/PressStart2P-Regular.woff2') format('woff2'); 
    */
    font-weight: normal;
    font-style: normal;
  }
/* ================================================= */
/* 1. DEFINE THEME PALETTES WITH SEMANTIC NAMES      */
/* ================================================= */

:root, .windows95-scheme { /* Default Theme */
    --main-bg: #c3c7cb;
    --secondary: #ece9d8;
    --projects-box-bg: #ece9d8;
    --blog-box-bg: #ffffff;
    --text-color: #000000;
    --border-color: #000080;
}

/* .gamecube-scheme { 
    --main-bg: #8F7FC6;
    --secondary: #85878C;
    --projects-box-bg: #F0B23E;
    --blog-box-bg: #F0B23E;
    --text-color: #B12424;
    --border-color: #3F8D92;
} */

.gameboy-scheme {
    --main-bg: #d7d7d7;
    --secondary: #cadc9f;
    --projects-box-bg: #9bbc0f;
    --blog-box-bg: #8bac0f;
    --text-color: #222222;
    --border-color: #306230;
}

/* .c64-scheme {
    --main-bg: #403294;
    --secondary: #5a4ca5;
    --projects-box-bg: #80c0ff;
    --blog-box-bg: #6bff5e;
    --text-color: #ffffff;
    --border-color: #ffb000;
} */

.apple2-scheme {
    --main-bg: #000000;
    --secondary: #dd270e;
    --projects-box-bg: #0044ff;
    --blog-box-bg: #00a74f;
    --text-color: #00ff00;
    --border-color: #ffcc00;
}

.atari-scheme {
    --main-bg: #1c1c1c;
    --secondary: #ff0000;
    --projects-box-bg: #ff5f00;
    --blog-box-bg: #ff9f00;
    --text-color: #ffffff;
    --border-color: #0055ff;
}

.internet-cults-scheme {
    --main-bg: #3D4D9C;
    --secondary: #F9E567;
    --projects-box-bg: #F9E567;
    --blog-box-bg: #F9E567;
    --text-color: #CB383C;
    --border-color: #CB383C;
}


/* ================================================= */
/* 2. STYLE YOUR WEBSITE USING SEMANTIC VARIABLES    */
/* ================================================= */

body {
    background-color: var(--main-bg);
    color: var(--text-color);
    font-family: 'Press Start', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    margin: 20px;
}

/* The main grid container */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr; 
    grid-template-rows: 1fr 4fr 4fr;
    gap: 20px;
    height: calc(100vh - 40px); 
}

.grid-container h2 {
    font-weight: bold;        /* Makes the font bold */
    font-size: 1.5rem;        /* Increases font size (adjust value as needed) */
    margin-top: 0;            /* Removes extra space above the title */
    border-bottom: 2px dashed var(--border-color); /* Optional: adds a nice separator */
    padding-bottom: 10px;     /* Optional: adds space below the separator */
}

/* Common styling for all boxes */
.grid-container > div {
    padding: 20px;
    border: 2px dashed var(--border-color);
    transition: background-color 0.3s, border-color 0.3s;
    overflow: auto;
}

/* Assigning specific background colors to each box */
.title-box {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    
    /* NEW: Center the ASCII art perfectly */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* Reduced padding for more art space */
    overflow: hidden; /* Hide any part of the art that spills out */
}

.projects-box {
    background-color: var(--projects-box-bg);
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.crafts-box {
    background-color: var(--projects-box-bg);
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.blog-box {
    background-color: var(--blog-box-bg);
    grid-column: 2 / 3;
    grid-row: 1 / 4;
    overflow: auto;
}

/* NEW styling for the responsive ASCII art */
.title-box pre {
    margin: 0;
    text-align: center;
    line-height: 1.2; /* Keeps lines tight */
    /* This is the key: font-size is 1.2% of the viewport width */
    /* You can adjust the 1.2 value slightly if needed */
    font-size: 0.30vw; 
}

/* Styling for the blog list */
.blog-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--border-color);
}

.blog-header h2 {
    cursor: pointer; /* Indicates the headers are clickable */
    margin: 0;
    user-select: none; /* Prevents text selection on click */
    
    /* NEW: Remove the inherited underline and padding from the generic h2 style */
    border-bottom: none;
    padding-bottom: 0;
}

/* Individual post item styling */
.post-item {
    padding: 15px 5px;
    border-bottom: 1px solid var(--border-color);
}

.post-item-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.post-item-title {
    font-weight: bold;
}

.post-item-date {
    font-style: italic;
    white-space: nowrap;
    padding-left: 20px;
}

/* Styling for the expandable content */
.post-content {
    max-height: 0; /* Hidden by default */
    overflow: hidden;
    transition: max-height 0.5s ease-out; /* Smooth animation */
    padding-top: 0;
}

.post-content.active {
    max-height: 10000px; /* An arbitrary large height to expand to */
    padding-top: 15px;
}

/* Style for images inside posts to make them responsive */
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ================================================= */
/* 3. STYLE THE THEME SWITCHER UI                    */
/* ================================================= */

.theme-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
}

.settings-btn {
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
}

.theme-menu {
    position: absolute;
    top: 40px;
    right: 0;
    background-color: var(--blog-box-bg);
    border: 1px solid var(--border-color);
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.theme-menu.hidden {
    display: none;
}

.theme-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.theme-menu li {
    padding: 8px 12px;
    cursor: pointer;
}

.theme-menu li:hover {
    background-color: var(--main-bg);
}


/* ================================================= */
/* 4. NEW: RESPONSIVE DESIGN FOR MOBILE              */
/* ================================================= */

/* These rules apply only when screen width is 768px or less */
@media (max-width: 768px) {
    body {
        margin: 10px;
    }

    /* Switch to a single-column layout */
    .grid-container {
        grid-template-columns: 1fr; /* One column */
        grid-template-rows: auto;    /* Rows size to content */
        height: auto;                /* Let container grow */
        gap: 10px;
    }

    /* Reset all grid item positions so 'order' works */
    .grid-container > div {
        grid-column: auto;
        grid-row: auto;
    }

    /* Re-order the items for the mobile view */
    .title-box    { order: 1; }
    .blog-box     { order: 2; }
    .projects-box { order: 3; }
    .crafts-box   { order: 4; }
    
    /* Adjust ASCII art font size for smaller screens */
    .title-box pre {
        /* 2.5vw is a bit larger relative to the smaller screen */
        font-size: 0.90vw;
    }
}