/* 1. Global Setup */
body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    
    /* Global Cursor: Sword with 'auto' (arrow) fallback */
    cursor: url('sword.png'), auto;
}

/* 2. Background & Overlay */
.hero-bg {
    /* Replace with your actual background image filename */
    background-image: url('cozy corner.jpg'); 
    height: 100vh; 
    
    /* Centers and scales the image properly */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Flexbox to center the content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Dark Overlay effect */
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
}

/* 3. Text Styles */
.content {
    text-align: center;
    color: #ffcc00; 
}

h1 {
    font-family: "VT323", monospace;
    font-weight: 400;
    font-size: 5rem;
    margin-bottom: 1rem;
    
    /* Red text shadow */
    text-shadow: 4px 4px 0px #8b0000; 
}

/* 4. Button Styles */
.pixel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;

    font-family: "VT323", monospace;
    font-size: 2rem;
    text-decoration: none;
    
    /* Colors */
    color: #ffcc00;
    background-color: rgba(0, 0, 0, 0.6);
    
    /* Pixel border and shadow */
    border: 4px solid #ffcc00;
    padding: 15px 30px;
    box-shadow: 6px 6px 0px #8b0000; 
    
    transition: all 0.1s ease-in-out;
    
    /* IMPORTANT: Cursor on Button */
    /* Sword with 'pointer' (hand) fallback so it feels clickable */
    cursor: url('sword.png'), pointer;
}

/* Hover Effect (Button moves down slightly) */
.pixel-btn:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0px #8b0000;
    background-color: #8b0000;
    color: #ffcc00;
    border-color: #ffcc00;
}

/* Active Effect (Button presses all the way down) */
.pixel-btn:active {
    transform: translate(6px, 6px);
    box-shadow: none;
}