/* Noah Amman
   CIS 130-101
   Date: 2024-10-23
   Assignment: Funyon Website
*/

/* ----------------------------------------------------------------------
   Base / Reset
   - Global body styles: background, font, and removal of default margins
   ---------------------------------------------------------------------- */
body {
    background-color: #2D0320; /* deep brand background on small screens */
    font-family: Arial, sans-serif; /* fallback-safe sans-serif stack */
    margin: 0; /* remove default page margin */
    padding: 0; /* remove default page padding */
}

/* ----------------------------------------------------------------------
   Content card: .funyon
   - White cards used for each story; padding, radius, and drop shadow
   ---------------------------------------------------------------------- */
.funyon {
    background: white; /* card background */
    padding: 15px; /* inner spacing */
    margin: 10px 0; /* spacing between cards */
    border-radius: 5px; /* rounded corners for a softer look */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* subtle depth */
}

/* Make images inside cards responsive and inherit the card radius */
.funyon img {
    width: 100%; /* fill the card */
    border-radius: 5px; /* match the card rounding */
}

/* ----------------------------------------------------------------------
   Header / Navigation
   - Sticky top header with a subtle bottom border for separation
   ---------------------------------------------------------------------- */
header {
    background-color: #392B58; /* dark accent behind header content */
    border-bottom: 2px solid #2D0320; /* separation line */
    padding: 10px 0; /* vertical spacing */
    position: sticky; /* keep header at top while scrolling */
    top: 0; /* distance from top when sticky */
    z-index: 1000; /* ensure header floats above other content */
}

/* ----------------------------------------------------------------------
   Headings
   - H1 is the page title and H2 are story titles
   ---------------------------------------------------------------------- */
h1 {
    text-align: center; /* center the site title */
    color: #99D5C9; /* light accent color for contrast */
}

h2 {
    text-align: center; /* center story headings */
    color: #2D0320; /* dark color used for headings */
}

/* ----------------------------------------------------------------------
   Content container
   - .story centers the main column and constrains width on small screens
   ---------------------------------------------------------------------- */
.story {
    width: 90%; /* leave a small margin on either side */
    margin: 0 auto; /* center horizontally */
}

footer {
    color: white;
}

/* ----------------------------------------------------------------------
   Responsive breakpoints
   - Adjust layout and visual rules for wider viewports
   ---------------------------------------------------------------------- */
@media (min-width: 500px) {
    /* background color brightens on small tablets */
    body {
        background-color: #392B58;
    }

    /* paragraph alignment for medium screens */
    p {
        text-align: center;
    }

    /* ensure story container acts as a block element */
    .story {
        display: block;
    }

    /* thin decorative border on images at this size (mobile -> tablet) */
    img {
        border: 2px solid #2D0320; /* small image frame for contrast */
    }

    /* layout two cards per row where space allows */
    .funyon {
        width: 40%;
        display: block; /* stack by default; layout handled by container */
    }

    /* navigation becomes visible and centered on wider screens */
    nav {
        display: block;
        text-align: center;
    }

    .menu li {
        display: inline-block; /* horizontal menu items */
    }

    /* hide the mobile menu icon on larger screens */
    .menu-icon {
        display: none;
    }
}

@media (min-width: 768px) {
    /* tablet / small desktop background color */
    body {
        background-color: #645E9D;
    }

    /* narrower cards on larger screens */
    .funyon {
        width: 30%;
        display: inline-block; /* allow cards to sit side-by-side */
    }

    /* remove the small image border on medium screens for a cleaner look */
    img {
        border: none;
    }

    /* paragraph alignment preference for medium screens */
    p {
        text-align: left;
    }

    /* emphasize h2 headings with a border for visual separation */
    h2 {
        border: 3px solid #392B58;
    }

    /* header reverts to normal flow at this breakpoint */
    header {
        position: static;
    }

    /* footer background uses site palette on medium screens */
    footer {
        background-color: #6C969D;
    }

    .menu li {
        display: inline-block;
        margin: 0 8px; /* spacing between menu items */
    }
}

@media (min-width: 1024px) {
    /* desktop background color */
    body {
        background-color: #6C969D;
    }

    /* align paragraphs to the right on large screens for a playful layout */
    p {
        text-align: right;
    }

    .funyon {
        width: 30%; /* keep the three-column layout */
        border: 5px solid; /* decorative thick border (color inherited) */
    }

    header {
        border-radius: 20px; /* soften header corners on desktop */
        position: static; /* normal flow */
    }

    footer {
        color:#2D0320;
        text-align: center; /* center the footer text */
        border-top: 5px solid #2D0320; /* strong top border for separation */
    }
}