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

/* ===== BACKGROUND GRADIENT ===== */
body {
    margin: 0;
    font-family: Arial, sans-serif;

    /* Linear gradient with colors, stops, and transparency */
    background: linear-gradient(
        to right,
        rgba(0, 102, 0, 0.9) 0%,
        rgba(0, 153, 0, 0.7) 50%,
        rgba(204, 255, 204, 0.6) 100%
    );
}

/* ===== BACKGROUND IMAGE ===== */
header {
    height: 300px;

    background-image: url("images/oldTeam.jpg");

    /* REQUIRED properties */
    background-position: center;     /* positioning */
    background-size: cover;          /* size */
    background-repeat: no-repeat;    /* repeat value */
    background-clip: border-box;     /* clipping */
}

/* ==== H1 Element ==== */
h1 {
    /* a. Web font */
    font-family: 'Roboto', sans-serif;

    /* b. Text shadow */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);

    /* c. Letter spacing */
    letter-spacing: 3px;

    /* d. Small caps */
    font-variant: small-caps;

    /* e. No wrapping */
    white-space: nowrap;

    /* Extra */
    text-align: center;
    font-size: 40px;
    margin-top: 20px;
    color: #ffffff;
}

main {
    line-height: 1.8;
}

/* ===== SECOND IMAGE STYLING ===== */
.second-image {
    width: 60%;              /* controls size */
    max-width: 400px;        /* prevents it from getting too big */
    display: block;
    margin: 20px auto;       /* centers the image */

    border: 4px solid #145a32;   /* MSU green border */
    border-radius: 12px;         /* rounded corners */
    padding: 5px;

    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* shadow effect */
}

/* ===== LINK STYLING ===== */
footer a {
    color: #a8e6a3;           /* soft light green */
    text-decoration: none;    /* removes underline */
    font-weight: bold;
}

/* Hover effect */
footer a:hover {
    color: #ffffff;           /* turns white on hover */
    text-decoration: underline;
}