style.css

/*******  Cache Busting >> styles.css v1.8  *******/

/*  Additional styles to enhance the demo webpage */

body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
}

header {
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Vertically center items */
  justify-content: center; /* Center the content horizontally */
  padding: 10px 20px;
  background-color: #0000FF;     /* #2E6F40; Forest Green vs #0000FF; Lovely Blue */
  text-align: center;
}

header .container {
  background-color: #000000;
  display: flex;      /* Nested flexbox for layout within the header */
  align-items: center;
  justify-content: space-between; /* Space between logo and header content */
  max-width: 800px; /* Match the central column width */
  width: 100%;      /* Ensure it spans the full width */
}

header .logo {
  flex: 0 0 auto; /* Fixed size for the logo container */
  margin-right: 20px; /* Space between logo and header content */
}

header .logo-img {
  max-width: 100%;
  height: auto; 
}

header .header-content {
  flex: 1; /* Take the remaining space */
}

header h1 {
  color: #00FF00;
}

header p {
  color: #FFFF00;     /* Yellow for better contrast */
  font-size: 1.2rem;  /* rem font sizes ensures a predictable scaling behavior across different devices */
}

.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

h1, h2, h3, h4, h5, h6 {
  color: #333;  /* Dark gray for headings */
}

p {
  color: #000000;  /* Black for body text */
}

a {
  color: #0000FF;          /* Lovely blue for links */
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;  /* Add underline on hover for better accessibility */
}

.center-image {
  display: flex;
  justify-content: center;
  align-items: center;   
  height: auto;          
  margin: 0 auto;         /* Centers the container in the parent block */
}

/* Separate the concerns for centering and responsiveness of images */
.responsive-image {
    max-width: 100%;
    height: auto;
    display: block; /* Remove extra space under the image */
}

.center-decorative {
  text-align: center;
  font-size: 2rem;  
  color: #333; 
  margin: 1rem 0;    /* Add vertical spacing */
}


/* Interactive Section of Display Buttons */

.interactive-section {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center;
    padding: 20px;
    margin: 0 auto;
    max-width: 800px; /* Optional: Limit the width */
    text-align: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.interactive-section .content {
    margin-bottom: 10px;  /* Space between text and buttons, styling for Header and Paragraph text */
}

.interactive-section .buttons {
    display: flex;
    justify-content: space-between;  /* Align buttons to left and right */
    width: 100%;
    max-width: 600px;  /* Optional to limit button container width */
}

.hello-btn {
  background-color: #FF0000;  /* Red background for the button */
  color: #000000;
  font-weight: bold;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;  /* Smooth transition for hover effect */
}

.hello-btn:hover {
  background-color: #45A049;  /* Slightly darker green on hover */
}

.download-btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    color: #FFFF00;   
    background-color: #0000FF;  /* Lovely Blue */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.download-btn:hover {
    background-color: #218838;
}

/* Footer Copyright & Social Media Links */

footer {
  text-align: center;
  padding: 10px 0;
  background-color: #2E6F40;  /* Forest Green */
  color: white;
  margin-top: 20px;
}

footer p {
  color: #FFFF00;  
  font-size: 1rem;  /* Slightly larger text for footer */
  font-weight: bold;
}

/* Media Query for Smaller Screens */
@media (max-width: 768px) {
  header .container {
    flex-direction: column;  /* Stack the header items vertically */
    align-items: center;     /* Center items vertically */
  }

  /* Adjust logo image size between 300, 600, 1100px wide */
  header .logo-img {
    width: 100%;
    height: auto;
  }
  /* Adjust image size on body container between 300, 600, 1100px wide */
  .center-image {
    width: 100%;
    height: auto;
  }

  /* Adjust header text size and spacing */
  header h1 {
    font-size: 1.5rem;
  }

  header p {
    font-size: 1rem;
  }

  /* Ensure container within header has full width and adjusts margins */
  header {
    padding: 15px;
    margin: 0 auto;  /* fallback margin to ensure spacing remains consistent */
  }

  /* Adjust container layout on smaller screens */
  .container {
    max-width: 100%;
    padding: 15px;
    box-sizing: border-box;  /* Prevents padding from expanding the container beyond its intended width */
  }

.interactive-section .buttons {
        flex-direction: column;   /* Stack buttons vertically */
        align-items: center; 
        gap: 10px;     /* Add spacing between stacked buttons */
    }
}
/*EOF*/