/* =========================
   Variables for Colors
========================= */
:root {
    --primary-color: #27ae60;
    --secondary-color: #7251d1;
    --gradient-start: #51d172;
    --gradient-end: #32bd56;
    --text-color: #444444;
    --secondary-text-color: #f5f5f5;
    --bg-color: #333333;
    --background-image: url('/assets/images/pattern.jpg');
}

/* Ensure the HTML and body take full height */
html,
body {
    height: 100%; /* Full height for the page */
    margin: 0; /* Remove any default margin */
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack children vertically */
}

main {
    flex: 1; /* Allow the main content to grow and push the footer down */
}

body {
    margin: 0;
    padding: 0;
    background: var(--background-image) center center fixed;
    background-size: cover;
    color: var(--text-color);
    font-family: Arial, sans-serif;
}