/* This stylesheet was made by Alexander Durkin
   Macomb Community College, ITWP 1050 (CSS)
   Date: 4-21-2025
   Professor: Wanner */

/* This is where the document starts */
body {
    margin: 25px;
    font-family: Arial, Helvetica, sans-serif; /* I just stuck with the defaults */
    font-size: 1em; /* This fit better than the 1.1em */
    text-align: center;
    background-color: #FFEBCD; /* I like this color so I am sticking with it. */
}

/* This is the universal selector, borrowed from a previous assignment. */
* {
    color: black;
}

/* This is the header, which controls the text at the top and other elements. */
h1 {
    font-family: Arial, Helvetica, sans-serif; /* Just kept this the same as the body, would look out of place with different fonts. */
    text-align: center;
    font-size: 36px;
    letter-spacing: 2px; /* I put in letter spacing for better readability. */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Put this here because it would look cool */
    white-space: nowrap; /* Added this to specify how the browser handles the white space */
    color: black;
    margin: 10px;
}
  
.header {
        background: url('https://th.bing.com/th/id/R.97c2d17487672a5df6bc4e06381e25d3?rik=kpu1FCQHksn9hg&riu=http%3a%2f%2fgetwallpapers.com%2fwallpaper%2ffull%2fe%2fc%2f2%2f1150729-beautiful-forest-wallpaper-hd-3840x2160-for-pc.jpg&ehk=oMKHUzbmiBJAUGqV%2f6WOL5V%2bWfIyLbh%2bl2YQSBv8IdY%3d&risl=&pid=ImgRaw&r=0') center/cover no-repeat; /* This is for the header background */
    color: white;
    background-clip: border-box; /* Found that this was the best for making the image fit */
    border-radius: 10px; /* Added some rounded corners */
    min-height: 50px; /* I specified the minimum height here because it would try and stretch the image out */
}

/* I found that combining the different elements helped cut down on the amount of code lines, before I reworked this it was a mess with elements everywhere. */
.image-container,
.container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; /* Makes the content centered */
    gap: 1px; /* Puts a gap for spacing */
    text-align: center;
    align-items: center; /* Aligns the items center */
    margin-top: 10px;  /* Putting a space here helped the overall layout of the document */
}
  
.image-container figure,
.container .item { /* This was an absolute mess, I still do not feel confident that this section is bug free */
    flex: 1 1 200px; /* I put the flex here so that the containers don't adjust off the page or in funny ways */
    max-width: 350px;
    text-align: center;
    background-color: #FFEBCD; /* background color when windows is above 600px */
    padding: 8px;
    border-radius: 8px;
}
  
img { /* This controls what the image does, also mentioned in the @media section */
    max-width: 100%;
    height: auto;
    display: block;
    border: 2px solid black;
    border-radius: 10px;
}
  
.left-align-buttons { /* This section is mostly for the return to homepage button up top */
    text-align: left;
}
/* This is for the big boxes that surround the heading and images */
.text-box {
    color: black;
    padding: 10px; /* Added padding for better spacing */
    border-radius: 10px;
    display: inline-block;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* Box shadows always look good */
    background-color: white;
    margin-top: 10px; /* Added a margin so it would have soe room to breathe */
}
/* This is where the images reside within the textbox */
.container {
    background-color: #FFEBCD; /* keeps the same background when window is big */
    padding: 0.25rem;
    border-radius: 10px; /* added this to make corners round */
    flex-direction: row; /* Added this to make images line up into a row and not on top of each other. */
}
/* This is for the actual item, the image and the figure */
.item {
    background: #FFEBCD; /* I must really like this color fun fact my bedroom is painted in a lighter version of this color */
    color: white;
    text-align: center;
    margin: 0.25rem;
    font-size: 1rem;
}

@media only screen and (max-width: 800px) { /* This was added for the requirement, when window is 800px */
    h1 {
      font-size: 24px; /* Adjusts the font size for h1 when scaled down */
    }
    body { /* Also added this to change the font as per the requirements */
      font-family: 'Times New Roman', Times, serif;
    }
}

/* Media Query for  the screens that are 600px or less, must be a mini computer! */
@media (max-width: 600px) {
    h1 {
      font-size: 18px;
    }
    body {
      background-color: lightgray;
      font-size: 12px;
      margin: 10px;
    }
    .image-container figure, /* Again I grouped them here instead of having 3 different classes and clogging up the page */
    .container .item {
      flex: 1 1 100%;
      max-width: 100%;
      background-color: white;
    }
    img {
      border-width: 1px;
    }
    .text-box {
      padding: 8px;
    }
}
/* Here is where I had the most trouble, aside for the programming of the images, i did consult the textbook as well as the W3schools website */
.responsive-section {
    display: grid;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* I had to grab this from the W3Schools, this was the missing peice of the puzzle that makes the buttons adjust their size */
    gap: 15px;
    margin: 30px auto;
    padding: 20px;
    background-color: lightgrey;
    border-radius: 10px;
    max-width: 1400px;
}
/* This is for the items within the grid box, I still do not know why you have to click the text inead of clicking anywhere on the button. */
.grid-item {
    background-color: white;
    color: black;
    font-size: 1.2em;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1); /* Box shadows are pretty cool */
    text-align: center;
    justify-content: center;
    transition: transform 0.2s ease;
}
/* This contols the cool hover animation, it is pretty cool */
.grid-item:hover {
    transform: scale(1.05);
}
.wide {
    width: 300px;
}
/* Controls the footer we all know at the bottom of every website! */
footer {
    margin-top: 20px;  /* Sets the top margin to 50 pixels */
    margin-bottom: 20px;  /* Sets the bottom margin to 50 pixels */
    text-align: center;
}