/* style.css - DARK MODE IMAGE */
body { margin: 0; padding: 0; font-family: 'Helvetica', sans-serif; background: #000; color: #fff; }
a { text-decoration: none; color: white; transition: 0.3s; }

/* NAV */
nav { position: absolute; top: 0; width: 100%; padding: 30px; display: flex; justify-content: space-between; box-sizing: border-box; }
.logo { font-weight: 900; font-size: 1.5rem; letter-spacing: -1px; }
.links a { margin-left: 20px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; }

/* HERO SECTION (The Image Engine) */
.hero { 
    height: 100vh; /* Full Screen */
    width: 100%;
    
    /* HERE IS YOUR IMAGE SETTINGS */
    background-image: url('black.jpg'); 
    background-size: cover; 
    background-position: center;
    
    /* This makes the image dark so text pops out */
    background-color: #000;
    background-blend-mode: multiply; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* TYPOGRAPHY */
h1 { font-size: 5rem; margin: 10px 0; text-transform: uppercase; line-height: 0.9; letter-spacing: -3px; }
.small-text { font-size: 1rem; letter-spacing: 2px; color: #ccc; text-transform: uppercase; margin: 0; }

/* BUTTON */
.btn { 
    margin-top: 30px; 
    padding: 15px 40px; 
    background: #fff; 
    color: #000; 
    font-weight: bold; 
    text-transform: uppercase; 
    display: inline-block;
}
.btn:hover { background: #ccc; }