/* 
   ================================================================
   DREAMWEAVER OPTIMIZED THEME: JEWEL-TONED PORTFOLIO
   ================================================================ 
*/

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

:root {
    --bg-dark: #0a0b1e;
    --accent-emerald: #00ff88;
    --accent-amethyst: #9d50bb;
	--accent-gold: #c37d04;
    --card-bg: #161730; /* Solid background for easier editing */
    --text-main: #E29F27;
    --text-muted: #a0a0c0;
}

body {
    background-image: linear-gradient(rgba(10, 11, 30, 0.85), rgba(10, 11, 30, 0.85)), url('nitesky.png');
    background-size: cover;
    background-attachment: fixed;
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
}

/* SIMPLE HEADER (Non-Sticky for easier editing) */
header {
	background-image: url(backgroundheader.jpg);
	background-size: 1300px 150px;
    padding: 10px 20px;
    text-align: center;
    border-bottom: 2px solid var(--accent-amethyst);
}

nav {
    background-color: black;
    padding: 5px;
    text-align: center;
}

nav a {
    color: #E29F27;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-block;
    font-weight: bold;
    text-transform: uppercase;
}

nav a:hover {
    color: var(--accent-emerald);
}

/* SIMPLE GRID SYSTEM */
.container {
    width: 90%;
    max-width: 1100px;
    margin: 40px auto;
}

/* Standard Box for Gallery Items */
.gallery-item {
    background-color: var(--card-bg);
    margin-bottom: 30px;
    border: 1px solid #333;
    padding: 15px;
    border-radius: 10px;
    display: inline-block;
    vertical-align: top;
    width: 25%; /* Standard width for 3 columns */
    margin-right: 2%;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* SPLIT PAGE (Detail View) */
.full-image-display {
    width: 100%;
    height: 400px; /* Specific height for easier visual selection */
    background-color: #000;
    margin-bottom: 20px;
    border: 2px solid var(--accent-emerald);
    border-radius: 15px;
}

.text-story-box {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 15px;
    border-left: 5px solid var(--accent-amethyst);
}

.text-story-box2 {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 15px;
	border-right: 5px solid var(--accent-gold);
}
	
	.text-story-box3 {
    background-color: var(--card-bg);
    padding: 10px;
	text-align: center;
    border-radius: 10px;
    border-left: 5px solid var(--accent-emerald);
}

.video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 21/9;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
h1, h2 { font-family: 'Playfair Display', serif; }