/* Name:        Farris Qureshi
   Course:      ITWP 1050
   Assignment:  Homework 4 - Transforms, Transitions & Animations
   Description: External CSS file for homework4.html
                Topic: The Evolution of Computing */

/* Global / Reset Styles
   Sets base font, colors, and box-sizing for the whole page */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Courier New', Courier, monospace;
    background-color: #f4f6f9;
    color: #1a1a2e;
    line-height: 1.85;
    font-size: 16px;
}

/* Page Header
   Styles the top banner with a dark tech-inspired look */
header {
    background-color: #1a1a2e;
    border-bottom: 5px solid #00b4d8;
    padding: 50px 40px 36px;
    text-align: center;
}

header h1 {
    font-size: 2.2em;
    color: #00b4d8;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-family: 'Courier New', Courier, monospace;
}

.subtitle {
    color: #90e0ef;
    font-style: italic;
    font-size: 0.95em;
}

/* Main Content
   Centers and constrains the main article width */
main {
    max-width: 900px;
    margin: 44px auto;
    padding: 0 30px;
}

/* Sections / Headings
   Styles the h2 content section headings */
section {
    margin-bottom: 40px;
}

section h2 {
    font-size: 1.25em;
    color: #0077b6;
    border-left: 5px solid #00b4d8;
    padding-left: 14px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Courier New', Courier, monospace;
}

section p {
    color: #2d2d44;
    font-family: Georgia, serif;
    font-size: 1em;
}

/* Figures / Images
   Base styling for figure elements wrapping images */
figure {
    margin: 32px auto;
    text-align: center;
}

figure img {
    max-width: 100%;
    border: 3px solid #00b4d8;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
    box-shadow: 4px 4px 14px rgba(0, 119, 182, 0.2);
}

figcaption {
    margin-top: 10px;
    font-size: 0.86em;
    color: #555577;
    font-style: italic;
}

/* Rotation Function
   Applies a rotation transform to the first figure/image.
   Uses rotate() to slightly tilt the image for visual interest.
   Location: .img-rotate class on the first <figure> element */
.img-rotate img {
    transform: rotate(-2deg);
}

/* Scale Function
   Applies a scale transform to the promo/did-you-know box.
   On hover, the box scales up slightly to draw attention.
   Location: .img-scale class on the .promo-box <div> */
.img-scale {
    transform: scale(1.0);
}

.img-scale:hover {
    transform: scale(1.04);
}

/* Skew Function
   Applies a skew transform to paragraph 3 (.highlight-skew),
   giving it a slanted, dynamic appearance using skewX().
   Location: .highlight-skew class on the <p> in section 3 */
.highlight-skew {
    transform: skewX(-1.5deg);
    background-color: #e8f4f8;
    border-left: 5px solid #00b4d8;
    padding: 16px 20px;
    border-radius: 3px;
    color: #1a1a2e;
    font-family: Georgia, serif;
}

/* Transform Shorthand
   Applies multiple transforms to a single element using the
   CSS transform shorthand property - combining rotate and scale.
   Location: .img-transform-multi class on the second <figure> */
.img-transform-multi img {
    transform: rotate(1.5deg) scale(0.97);
}

/* Transition Properties
   Uses all three required transition properties:
    - Transition-Property:   Specifies which CSS property animates
    - Transition-Duration:   How long the transition takes
    - Transition-Delay:      Delay before the transition begins
   On hover, the background color fades to a blue tint after delay.
   Location: .promo-box <div> (the "Did You Know?" callout box) */
.promo-box {
    background-color: #e8f4f8;
    border: 2px solid #00b4d8;
    border-radius: 6px;
    padding: 24px 28px;
    margin: 40px 0;
    cursor: default;

    /* Transition Properties */
    transition-property: background-color;   /* Animate background-color only */
    transition-duration: 0.6s;               /* Transition takes 0.6 seconds */
    transition-delay: 0.1s;                  /* Wait 0.1s before transition starts */
}

.promo-box:hover {
    background-color: #caf0f8;             /* lighter blue on hover */
}

.promo-box h3 {
    color: #0077b6;
    font-size: 1.1em;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Courier New', Courier, monospace;
}

.promo-box p {
    color: #2d2d44;
    font-size: 0.95em;
    font-family: Georgia, serif;
}

/* Footer - Styles the page footer containing the required links */
footer {
    background-color: #1a1a2e;
    border-top: 5px solid #00b4d8;
    text-align: center;
    padding: 28px 20px;
    margin-top: 60px;
}

footer a {
    color: #00b4d8;
    text-decoration: none;
    margin: 0 12px;
    font-size: 0.9em;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: 'Courier New', Courier, monospace;
}

footer a:hover {
    text-decoration: underline;
    color: #90e0ef;
}

.footer-credit {
    margin-top: 12px;
    font-size: 0.8em;
    color: #555577;
}