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

a:link {
    color: white;
    background-color: transparent;
    text-decoration: none;
}
h2 { 
    text-align: center;    
}
a:visited {
    color: white;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: white;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: white;
    background-color: transparent;
    text-decoration: underline;
}  

body {
    font-family: Brush Script MT, cursive;
    /* NEW: Code-based horizontal & vertical merging gradient */
    background: radial-gradient(circle, #ff8a90 0%, #b8141c 70%, #a71d24 100%);
    background-attachment: fixed; /* Keeps gradient locked center when scrolling */
    color: #000;
    line-height: 1.6;
}

/* HEADER / HERO */
header {
    background-image: url('images/BigLogo.png'); /* Kept for your logo */
    background-size: contain; /* CHANGED FROM 'cover' TO FIX THE CLIPPING */
    background-position: center;
    background-repeat: no-repeat;
    
    height: 350px; /* ADD THIS LINE: Gives the logo vertical room so the bottom doesn't cut off */
    max-width: 800px; /* ADD THIS LINE: Prevents the logo from stretching too wide on big screens */
    margin: 0 auto; /* ADD THIS LINE: Centers the header on your webpage */
    
    padding: 120px 20px;
    text-align: center;
    position: relative;
}

}

/* Optional dark overlay for readability */
header::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.45);
}

header h1, header p {
    position: relative;
    z-index: 2;
}

header h1 {
    font-size: 3.2rem;
    letter-spacing: 2px;
    font-weight: bold;
    color: red;
}

header p {
    margin-top: 10px;
    font-size: 1.3rem;
    color: red;
}


/* SECTIONS */
.center {
    padding: 40px 20px;
    max-width: 2200px;
    margin: 0 auto;
    text-align: center;
}
.middle {
    padding: 0px 0px;
    max-width: 1100px;
    margin: 0;
    text-align: start;
}    

/* FLEX GRID */
.flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* IMAGE STYLING */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}

/* CARDS */
.card {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    flex: 1;
    min-width: 280px;
}

.card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

/* FOOTER */
footer {
    /* NEW: Changed footer from image to transparent so the body gradient seamlessly flows through it */
    background: transparent;
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 40px;
}