/* Base Reset */
/* Base Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 1. Scalable CSS Gradient replacing bg.png 
       (45% to 55% replicates the 10% Scale from Photoshop) */
    background: linear-gradient(
        to bottom, 
        #93baba 0%, 
        #93baba 45%, 
        #2e3437 55%, 
        #2e3437 100%
    );
    
    /* 2. Inner Glow 
       (100% Choke at 76px equals a solid 76px border) */
    border: 0px solid #000000;
    
    position: relative;
    width: 100%;
    height: 100vh; /* Locks exactly to the viewport height */
    overflow: hidden; /* Prevents scrollbars when text drifts */
    font-family: 'Special Elite', monospace;
    color: #edbf4c; 
}

/* Updated Grunge Texture Overlay */
.texture-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('overlay-divide.png');
    background-size: cover;
    background-position: center;
    
    /* 'color-dodge' acts as the closest CSS sibling to 'divide' for this texture */
    mix-blend-mode: color-dodge; 
    
    /* You may need to tweak this opacity slightly depending on how the browser renders the dodge */
    opacity: 100%; 
    
    pointer-events: none; 
    z-index: 10;
}

/* Main Layout Container */
.container {
    position: relative;
    width: 100%;
    max-width: 500px; 
    height: 100%;
    margin: 0 auto;
    /* z-index: 5 has been removed from here so it no longer traps the logo */
}

/* Logo Positioning */
.logo {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 420px;
    pointer-events: none;
    
    /* This forces the logo above the texture-overlay (which is at z-index: 10) */
    z-index: 20; 
}

/* Base styles for drifting elements */
.drifting-text {
    position: absolute;
    font-size: 1.15rem;
    line-height: 1.5;
    will-change: transform;
    user-select: none;
}

/* Link styling */
.drifting-text a {
    color: inherit;
    text-decoration: none;
    transition: text-shadow 0.3s ease;
}

.drifting-text a:hover {
    text-shadow: 0 0 10px rgba(237, 191, 76, 0.8);
    cursor: pointer;
}

/* Individual Element Positioning (Matching whole-design.jpg) */
#text-mozz {
    top: 52%;
    left: 10%;
    font-size: 1.3rem;
}

#text-bio {
    top: 58%;
    left: 16%;
    font-size: 1.15rem;
}

#text-bandcamp {
    top: 76%;
    left: 12%;
}

#text-instagram {
    top: 81%;
    left: 55%;
}

#text-soundcloud {
    top: 88%;
    left: 18%;
}