/* Style for the container */
.image-container {
  display: flex; /* set display type to flex */
  flex-wrap: wrap; /* allow items to wrap to the next line when necessary */
  justify-content: center; /* center align items along the horizontal axis */
  max-width: 1400px; /* set maximum width of container to 1400 pixels */
  min-width: 440px; /* set minimum width of container to 440 pixels */
  margin: 0 auto; /* center the container horizontally */
}

/* Style for image container at max width of 960px */
@media screen and (max-width: 960px) {
  .img-container {
    width: 25%; /* set width of image container to 25% */
    margin: 5px; /* add a margin of 5 pixels */
  }
}

/* Style for info header at max width of 760px */
@media screen and (max-width: 760px) {  
  .info-header__line {
    flex-direction: column; /* set the flex direction to column to stack items vertically */
  }
}

/* Style for image container at max width of 640px */
@media screen and (max-width: 640px) {
  .img-container {
    width: 33.33%; /* set width of image container to 33.33% */
    margin: 5px; /* add a margin of 5 pixels */
  }  
}

/* Style for image container at max width of 400px */
@media screen and (max-width: 400px) {
  .img-container {
    width: 50%; /* set width of image container to 50% */
    margin: 5px; /* add a margin of 5 pixels */
  }
}

body {
  background-image: linear-gradient(45deg, #1ff0e8 0%, #85FFBD 50%, #FFFB7D 100%); /* set background to a gradient color */
  background-size: cover; /* scale the background image to cover the entire screen */
  background-repeat: no-repeat; /* prevent the background image from repeating */
  background-attachment: fixed; /* keep the background image fixed in place */
}

h3 {
  font-family: "Open Sans", sans-serif; /* set the font family to Open Sans */
  display: flex; /* set display type to flex */
  flex-wrap: wrap; /* allow items to wrap to the next line when necessary */
  max-width: 1200px; /* set maximum width of header to 1200 pixels */
  margin: 0 auto; /* center the header horizontally */
}

h6 {
  margin-top: 10px; /* add margin to top of header */
  margin-bottom: 10px; /* add margin to bottom of header */
  font-family: "Open Sans", sans-serif; /* set the font family to Open Sans */
}

.img-container {
  width: 200px; /* set width of image container to 200 pixels */
  height: 200px; /* set height of image container to 200 pixels */
  margin: 10px; /* add a margin of 10 pixels */
  cursor: pointer; /* set cursor to pointer when hovering over the image */
}

img:hover {
  transform: scale(1.15); /* add a scale transform to the image when hovering (115% zoom) */
}

.info-header__line {
  display: flex; /* Set display property to flex */
  width: 50%; /* Set width of info header line */
  justify-content: space-around; /* Distribute items in the line with equal space around them */
}

.info-header__line > * {
  margin-right: 15px; /* Set right margin for all direct children of info header line */
  font-size: 12px; /* Set font size for all direct children of info header line */
}

.info-header {
  margin-top: 30px; /* Set top margin for info header */
  padding: 10px 20px; /* Set padding for info header */
  border-radius: 5px; /* Set border radius for info header */
  background-color: white; /* Set background color for info header */
  box-shadow: 2px 2px 5px #888888; /* Add shadow effect to info header */
  display: flex; /* Set display property to flex */
  justify-content: space-between; /* Distribute items in the line with equal space between them */
  flex-wrap: wrap; /* Allow info header to wrap its contents to next line */
  max-width: 1200px; /* Set maximum width for info header */
  margin: 0 auto; /* Center align info header */
}

.info-footer {
  padding: 60px 40px 20px 40px; /* Set padding for info footer */
  border-radius: 5px; /* Set border radius for info footer */
  display: flex; /* Set display property to flex */
  flex-wrap: wrap; /* Allow info footer to wrap its contents to next line */
  max-width: 1200px; /* Set maximum width for info footer */
  margin: 0 auto; /* Center align info footer */
  color: darkslategray; /* Set text color for info footer */
  justify-content: center; /* Center align contents of info footer */
}
  
/* Styling for daily zodiac section */
.daily-zodiac {
  margin-top: 30px; /* adds margin to top of section */
  padding: 20px; /* adds padding to section */
  border-radius: 5px; /* adds border radius to section */
  background-color: white; /* sets background color of section */
  box-shadow: 2px 2px 5px #888888; /* adds box shadow to section */
  display: flex; /* sets display property to flex */
  flex-wrap: wrap; /* sets flex-wrap property to wrap */
  max-width: 1200px; /* sets maximum width of section */
  margin: 0 auto; /* centers the section horizontally */
}

/* Styling for weekly zodiac section */
.weekly-zodiac {
  margin-top: 30px; /* adds margin to top of section */
  padding: 20px; /* adds padding to section */
  border-radius: 5px; /* adds border radius to section */
  background-color: white; /* sets background color of section */
  box-shadow: 2px 2px 5px #888888; /* adds box shadow to section */
  display: flex; /* sets display property to flex */
  flex-wrap: wrap; /* sets flex-wrap property to wrap */
  max-width: 1200px; /* sets maximum width of section */
  margin: 0 auto; /* centers the section horizontally */
}

/* Styling for monthly zodiac section */
.monthly-zodiac {
  margin-top: 30px; /* adds margin to top of section */
  padding: 20px; /* adds padding to section */
  border-radius: 5px; /* adds border radius to section */
  background-color: white; /* sets background color of section */
  box-shadow: 2px 2px 5px #888888; /* adds box shadow to section */
  display: flex; /* sets display property to flex */
  flex-wrap: wrap; /* sets flex-wrap property to wrap */
  max-width: 1200px; /* sets maximum width of section */
  margin: 0 auto; /* centers the section horizontally */
}