/* File Name - Styles.CSS : homework3.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 */
}

.image-container img {
    width: 400px;
    height: 600px;      /* Fixed height */
    object-fit: cover;  /* Crops the image to fill the container */

    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;
  }