/* 
   Homework 4 - CSS Transforms & Transitions
   Author: Samuel Barnes II
   Course: ITWP 1050
   Date: 04/26/2026
*/

/* Reset */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* Page styling */
body {
   font-family: Arial, sans-serif;
   width: 900px;
   margin: 0 auto;
   background: #f2f2f2;
}

/* Header */
header {
   background: #2c3e50;
   color: white;
   text-align: center;
   padding: 20px;
}

/* Section */
section {
   background: white;
   padding: 20px;
}

/* Paragraph styling */
p {
   margin-bottom: 20px;
   line-height: 1.6;
}

/* Images */
img {
   width: 250px;
   margin: 10px;
   display: inline-block;
}

/* ---------------- TRANSFORMS ---------------- */

/* Rotation */
.rotate-img:hover {
   transform: rotate(20deg);
}

/* Scale */
.scale-img:hover {
   transform: scale(1.2);
}

/* Skew */
.skew-img:hover {
   transform: skewX(15deg);
}

/* Transform shorthand (ALL IN ONE) */
.combo-img:hover {
   transform: rotate(15deg) scale(1.1) skewY(10deg);
}

/* ---------------- TRANSITIONS ---------------- */

img {
   transition-property: transform, background-color;
   transition-duration: 0.5s;
   transition-delay: 0.1s;
   transition-timing-function: ease-in-out;
}

/* CSS COMMENT EXAMPLE: hover effects applied to images */

/* Footer */
footer {
   text-align: center;
   padding: 20px;
}