/* ==================================================
    Name: Brandon Klein
    Course: ITWP 1050
    Assignment: Homework 2
    Description: This stylesheet controls the layout,
    typography, and styling for the Michigan State
    Basketball webpage.
=================================================== */

/* ============================================
   Universal Selector
   This sets the text color for ALL elements
============================================ */
* {
    color:black;
}

/* ============================================
   Body Styling
   Controls overall page layout and text
============================================ */
body {
    margin: 25px; /* Adds space around the page */
    font-family: Arial, Helvetica, sans-serif; /* Sets font */
    font-size: 1em; /* Default text size */
    text-align: center; /* Centers all text */
}

/* ============================================
   Header Styling
   Controls main title appearance
============================================ */
h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

/* ============================================
    Media Querry for screens 800px or smaller
============================================= */
@media screen and (max-width: 800px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 28px;
    }
}

/* ============================================
    Media Querry for screens 600px or smaller
============================================= */
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}


/* ============================================
   Paragraph Styling
   Improves readability of text sections
============================================ */
p {
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ============================================
   Image Styling
   Adds border and rounded corners to all images
============================================ */
img {
    border: 1px solid black; /* Solid border */
    border-radius: 10px; /* Rounded corners */
    margin: 10px;
    max-width: 100%;
    height: auto;
}

/* ============================================
   Footer Styling
   Adds spacing above and below footer
============================================ */
footer {
    margin-top: 50px;
    margin-bottom: 50px;
}

/* ============================================
   External Link Styling (::after pseudo-element)
   Adds "(external)" after links
============================================ */
.external::after {
    content: " (external)";
    color: blue; /* Change color if you want */
    font-size: 0.9em;
}

/* Responsive Grid Section */

.responsive-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin: 20px;
}

.grid-item {
    background-color: darkgreen;
    color: white;
    padding: 30px;
    text-align: center;
    font-size: 24px;
    border-radius: 10px;
}

/* Tablet Layout */
@media screen and (max-width: 900px) {

    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* Mobile Layout */
@media screen and (max-width: 600px) {

    .responsive-grid {
        grid-template-columns: 1fr;
    }

    .grid-item {
        font-size: 18px;
    }

}