/* File Name - Styles.CSS : homework5.html. */
/* Sebastian Chavez Rivero */
/* ITWP-1050. Creating an External Style Sheet for a Web Page. */
/* style.css */


/* Added root selector as an example from last homework. Will help define colors globally. */
:root {
    --white: #ffffff;
  }
  header {
    text-align: center;
}

body {
    /* Vertical gradient background from transparent to pink */
    background-image: linear-gradient(to bottom, rgba(178,34,34,0) 0%, rgb(243, 198, 229) 100%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}
.image-container {
    /* Diagonal gradient background from red to light-blue */
    background-image: linear-gradient(to bottom right, red, rgb(193, 193, 255));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    justify-content: center; /* Center images horizontally */
    align-items: center;     /* Center images vertically */
    padding: 20px; /* Optional: Adds space around the images */
    gap: 20px; /* Adds space between images */
    display: flex; /* Use flexbox for layout */
}
/* This will help make the image responsive, step 3 (Homework 5) */
.image-container img {
    max-width: 100%;
    height: 600px;      /* Fixed height */
    object-fit: cover;  /* Crops the image to fill the container */

/* Homework 3 code below (Sorry I try to make it clear but didn't want to add another .image-container img below the new code to avoid redundancy. */
    background-color: var(--white); /* Uses a global white variable (Explained at beginning) */
    border-radius: 20px;              /* Rounded corners */
    box-shadow: inset 0 0 25px black;   /* Inset shadow for a subtle effect */
}
/* FONTS H1 and Else */

.bungee-tint-regular {
    font-family: "Bungee Tint", Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-shadow: 2px 2px 5px rgba(244, 0, 0, 0.5);
    letter-spacing: 3px;
    font-variant: small-caps;
    white-space: nowrap;
}

/* Will separate the footer using the content '|' */
footer {
    margin-top: 50px;
    margin-bottom: 50px;
}
/* Added a margin to the footer */
nav ul li {
    display: inline;
  }
  nav ul li:not(:last-child)::after {
    content: " | ";
    padding: 0 5px;
  }

/* Homework 5 - Module 5 */
/* Media Query with a Breakpoint */
/* 800px and below: shrink h1 and body text */
@media (max-width: 800px) {
    h1 {
      font-size: 2rem;   /* makes headings smaller on narrower screens */
    }
    body {
      font-size: 14px;   /* reduces the base text size for readability */
    }
  }
/* 600px and below: change background color */
@media (max-width: 600px) {
    body {
      background-color: #5cdff0;  /* switch the color to cyan/sky blue */
    }
  }

/* Responsive layout CSS Homework 5 main step guide */
.responsive-layout {
    display: grid;
    gap: 1rem;
    padding: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
  .responsive-layout .item {
    background-color: #e64601;
    color: #fff; /* White fff text color */
    font-size: 1rem;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(236, 100, 100, 0.1);
  }