/*CSS Document used for Homework 5 Assignment
Author: Marcus Shutran 0612328
Course: ITWP1050
File: styles.css
*/

body {
    background-image: url("images/bigKittyBkgrnd.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: 1em;
    margin-bottom: auto;
    font-family: Arial, sans-serif;
    color: darkgreen;
}

h1 {
  background-image: url('images/nicodemus02.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* Ensures the image fills the space */
  text-align: center;
  font-size: 40px;
    color:lime;
  padding: 100px 0; /* Adjust to show more/less of the image */
  background-color: rgb(0, 0, 0, 0.7); /* Optional: ensures text is readable */
}

h2 {

    text-align: center;
    font-size: 2.5em;
    color: black;
    background-color: rgb(144, 238, 144, 0.4);
}

body {
    font-size: 18px;
}

p, div {
    text-align: center;
    margin: 10px;
    padding: 20px;
    line-height: 1.5em;
    color: black;
    background-color: rgb(144, 238, 144, 0.6);
}

/* Media query for viewports 800px or less */
@media screen and (max-width: 800px) {
  h1 {
    font-size: 28px; /* Changes h1 font size */
  }

  body {
    font-size: 16px; /* Changes body text font size */
  }
}

/* Default background color (for screens wider than 600px) */
body {
  background-color: white;
}

/* Media query for screens 600px or less */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive container with Flexbox */
.services-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to next line */
    gap: 10px; /* Space between items */
    padding: 20px;
    background-color: #f4f4f4;
}

/* Individual Item Styling */
.service-item {
    background-color: #007bff; /* Background Color */
    color: white;
    padding: 20px;
    font-size: 1.2em; /* Font Size */
    text-align: center;
    border-radius: 5px;
    
    /* Responsive width: 100% on mobile, 
       approx 48% (2 per row) on medium,
       approx 18% (5 per row) on desktop */
    flex: 1 1 100%; 
}

/* --- Responsive Media Queries --- */

/* Medium Devices (Tablets) */
@media (min-width: 600px) {
    .service-item {
        flex: 1 1 calc(50% - 10px); /* 2 items per row */
    }
}

/* Large Devices (Desktops) */
@media (min-width: 1024px) {
    .service-item {
        flex: 1 1 calc(20% - 10px); /* 5 items per row */
    }
}

/*caption tag*/

.caption {
    font-family: Impact, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    font-weight: bold;
    font-size: 1.75em;
    padding-bottom: 0.5em;
}

/*responsive image class*/

.responsive {
    max-width: 100%;
    height: auto;
    border: 1px solid #51471A;
    border-radius: 10px;
}