@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* --- Deep Slate Blue Space Reset --- */
body {
    background-color: #0b0b14;
    background-image: radial-gradient(circle at center, #1e1d30 0%, #0b0b14 100%);
    color: #d0d0e6;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 11px;
    margin: 0;
    padding: 0; 
    overflow-x: hidden;
}

a { color: #8e8cf0; text-decoration: none; font-weight: bold; }
a:hover { color: #fff; background-color: #8e8cf0; text-decoration: none; cursor: help; }

/* --- Blinking Background Stars --- */
#star-field { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.bg-star { position: absolute; background-color: #fff; border-radius: 50%; animation: twinkle infinite alternate; }
@keyframes twinkle { 0% { opacity: 0.1; transform: scale(0.5); } 100% { opacity: 0.8; transform: scale(1.2); box-shadow: 0 0 4px #fff; } }

/* --- Classic MySpace-Style Layout Container --- */
.wrapper {
    width: 750px; margin: 0 auto; min-height: 100vh; 
    background-color: rgba(15, 15, 25, 0.8);
    border-left: 1px dotted #5c5a8a; border-right: 1px dotted #5c5a8a;
    padding: 30px 20px; box-sizing: border-box; z-index: 10; position: relative;
}

/* --- Header & Navigation --- */
.header { text-align: center; border-bottom: 1px dashed #48476e; padding-bottom: 15px; margin-bottom: 25px; }
.header h1 { 
    font-family: 'Orbitron', sans-serif;
    font-size: 28px; 
    color: #c4c3f5; 
    letter-spacing: 4px; 
    text-shadow: 0 0 10px #8e8cf0, 0 0 20px #5c5a8a; 
    margin: 5px 0; 
    font-weight: bold; 
}
.nav-bar { text-align: center; margin-bottom: 30px; word-spacing: 15px; }
.nav-bar a { font-size: 12px; }

/* --- 2-Column Layout (Home Page) --- */
.columns { display: flex; gap: 20px; }
.left-col { width: 220px; }
.right-col { width: 480px; }

.box { background-color: rgba(51, 50, 82, 0.6); border: 1px solid #48476e; padding: 10px; margin-bottom: 20px; }
.box-title {
    background-color: #5c5a8a; color: #0b0b14; font-weight: bold; padding: 2px 5px;
    margin: -10px -10px 10px -10px; font-size: 10px; text-transform: uppercase;
}
.profile-img {
    width: 100%; height: 180px; border: 1px dotted #5c5a8a;
    background-image: url('/img/Pic.png'); background-size: cover; background-position: center; margin-bottom: 10px;
}

/* --- Blog Entries (Home Page) --- */
.blog-entry { margin-bottom: 25px; }
.blog-header { border-bottom: 1px dotted #48476e; padding-bottom: 3px; margin-bottom: 8px; display: flex; justify-content: space-between; }
.blog-title { font-weight: bold; font-size: 14px; color: #c4c3f5; }
.blog-date { color: #8382ad; }
.blog-content { line-height: 1.6; text-align: justify; }

/* --- Terminal Search Bar --- */
.search-container {
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-prompt {
    color: #8e8cf0;
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
    text-shadow: 0 0 5px #8e8cf0;
}

#search-bar {
    background-color: rgba(5, 5, 10, 0.8);
    border: 1px solid #48476e;
    color: #c4c3f5;
    padding: 10px 15px;
    width: 60%;
    max-width: 450px;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    outline: none;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}

#search-bar:focus {
    border: 1px solid #8e8cf0;
    background-color: rgba(20, 20, 35, 0.9);
    box-shadow: 0 0 12px rgba(142, 140, 240, 0.4), inset 0 0 5px rgba(0,0,0,0.8);
}

#search-bar::placeholder { 
    color: #5c5a8a; 
    font-style: italic; 
}

/* --- Gallery Grid (Creations Page) --- */
.gallery-container { width: 100%; margin-top: 20px; }
.gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px;
}
.gallery-item {
    background-color: rgba(51, 50, 82, 0.6); border: 1px solid #48476e; padding: 8px; text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
}
.gallery-item:hover { border-color: #8e8cf0; background-color: rgba(92, 90, 138, 0.6); cursor: pointer; }
.gallery-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px dotted #5c5a8a; margin-bottom: 8px; }
.gallery-title { color: #c4c3f5; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Fullscreen Lightbox (Creations Page) --- */
#lightbox {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(5, 5, 16, 0.95); z-index: 100000;
    justify-content: center; align-items: center; flex-direction: column; padding: 20px; box-sizing: border-box;
}
#lightbox-close {
    position: absolute; top: 25px; left: 30px; background: transparent; color: #8e8cf0; border: none;
    font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.2s, text-shadow 0.2s; z-index: 100001; 
}
#lightbox-close:hover { color: #fff; text-shadow: 0 0 8px #fff; }
#lightbox-content-box {
    background-color: rgba(30, 29, 48, 0.9); border: 1px dotted #8e8cf0; padding: 15px; 
    width: 90vw; max-width: 1200px; max-height: 95vh; display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}
#lightbox-img { max-width: 100%; max-height: 80vh; border: 1px solid #48476e; margin-bottom: 15px; }
#lightbox-title { color: #c4c3f5; font-size: 16px; font-weight: bold; margin-bottom: 5px; text-align: center; }
#lightbox-desc { color: #d0d0e6; line-height: 1.5; text-align: center; max-width: 800px; font-size: 12px; }

/* --- Star Mouse Trail --- */
.trail-particle {
    position: absolute; width: 12px; height: 12px; pointer-events: none; 
    z-index: 999999; transform: translate(-50%, -50%) scale(1); transition: transform 0.6s linear, opacity 0.6s linear;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 3px #c4c3f5);
}