/* =====================
   Customizable Variables
===================== */
:root {
    --page-bg-color: #04356A;       /* Page background color */
    --title-color: #FFFFFF;         /* Title color */
    --title-font: Impact, Charcoal, sans-serif;  /* Title font */
    --link-font: Consolas, sans-serif; /* Button font */
    --button-bg: #FF0079;           /* Button background color */
    --button-text: #222222;         /* Button text color */
    --button-hover-bg: #FFFFFF;     /* Button hover background color */
    --button-hover-text: #222222;   /* Button hover text color */
}

/* =====================
   Mobile-first Base Styles
===================== */
body {
    margin: 0;
    font-family: var(--link-font);
    background-color: var(--page-bg-color);

    display: flex;
    flex-direction: column;      /* Stack items vertically */
    justify-content: center;     /* Vertical centering */
    align-items: center;         /* Horizontal centering */
    min-height: 100vh;           /* Fill full viewport height */
    text-align: center;
}

.container {
    padding: 20px;
    max-width: 100%;
}

/* Hero image: responsive for mobile */
.hero-image {
    width: 100%;
    height: auto;
    max-width: 600px;
    display: block;
    margin: 0 auto 20px auto;
}

/* Title styling */
.title {
    font-family: var(--title-font);
    color: var(--title-color);
    font-size: 3rem;
    margin: 10px 0;
}

/* Contact button styling */
.contact-button {
    font-family: var(--link-font);
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--button-text);
    background-color: var(--button-bg);
    border: none;
    padding: 6px 18px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: 10px;
}

.contact-button:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text);
}

/* =====================
   Desktop Styles
===================== */
@media (min-width: 768px) {
    .hero-image {
        width: 600px;
        /* height: 400px; */
        object-fit: contain;
    }

    .title {
        font-size: 5rem;
    }

    .contact-button {
        font-size: 1.5rem;
        padding: 6px 18px;
    }
}