/* Pirate Color Scheme */
:root {
    --pirate-gold: #FFC300;
    --ship-wood: #5D4037;
    --sea-blue: #0077B6;
    
    --background-url-1: url('media/ship-deck.jpg'); 
    --background-url-2: url('media/cracked-map.jpg');
}

body {
    font-family: 'Times New Roman', serif; 
    background-color: var(--ship-wood);
    color: white;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* CSS Transition for smooth background changes */
    transition: background-image 1s ease-in-out, background-color 1s ease-in-out;
    background-size: cover;
    background-position: center;
    
    /* Initial Background Styling - The script will swap between .background-1 and .background-2 */
    background-image: var(--background-url-1); 
}

/* Classes used by the JavaScript for switching backgrounds */
.background-1 {
    background-image: var(--background-url-1) !important;
}
.background-2 {
    background-image: var(--background-url-2) !important;
}

#ship-container {
    text-align: center;
    padding: 40px;
    background-color: rgba(0, 0, 0, 0.75); /* Dark, semi-transparent overlay */
    border: 5px solid var(--pirate-gold);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.9);
    border-radius: 10px;
    max-width: 90%;
    width: 650px;
}

/* Big Text: "HELLO HOW ARR YEA!" */
#main-heading {
    font-size: clamp(2.5em, 7vw, 5em); /* Responsive sizing */
    color: var(--pirate-gold);
    text-shadow: 4px 4px var(--ship-wood);
    border-bottom: 2px solid var(--pirate-gold);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.landing-message {
    font-size: clamp(1em, 2vw, 1.5em);
    margin-bottom: 30px;
}

/* Image Styling */
.pirate-image-container {
    margin: 20px 0;
}
#pirate-captain {
    max-width: 100%;
    height: auto;
    border: 3px solid var(--pirate-gold);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.buttons-bar {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.weather-button, #changeBackgroundBtn {
    background-color: var(--pirate-gold);
    color: var(--ship-wood);
    padding: 15px 30px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    border: 3px solid var(--ship-wood);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    border-radius: 5px;
}

.weather-button:hover, #changeBackgroundBtn:hover {
    background-color: #FFEA00;
    transform: scale(1.05);
}

.maintenance-note {
    margin-top: 40px;
    font-size: 1.8em;
    color: #FF6B6B; 
    font-weight: bold;
    animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
    from { opacity: 0.8; }
    to { opacity: 1; }
}