/* 
Name:Jordan Wlash
Course: ITWP 1050
Assignment: Homework 4
*/

/* Page Styling */
body {
 font-family: Arial, sans-serif;
 margin: 20px;
 background-color: #f4f4f4;
}
/* Headings */
h1 {
 text-align: center;
 color: #0b3d91; /* Detroit Lions blue */
}
/* Paragraphs*/
p {
 line-height: 1.6;
  margin-bottom: 15px;
}


/* Images*/
img {
 width: 300px;
 display: block;
 margin: 15px auto;
}
/* Footer*/
footer {
 margin-top: 20px;
 text-align: center;
 font-size: 14px;
}
/*  Rotation Transform */
/* hover to keep layout normal */
#rotateExample:hover {
 transform: rotate(2deg);
}

/*  Scale Transform */
/*zoom effect on hover */
.scaleExample:hover {
 transform: scale(1.05);
}
/*Skew Transform */
/* skew on hover*/
#skewExample:hover {
 transform: skew(3deg, 2deg);
}
/*  Multiple Transforms */
#multiTransform:hover {
 transform: rotate(-2deg) scale(1.03) skew(2deg, 2deg);
}
/* Smooth transition for transform effects */
#rotateExample,
.scaleExample,
#skewExample,
#multiTransform {
 transition: transform 0.3s ease;
}
/* Transition Box */
.transitionBox {
 background-color: white;
 padding: 10px;
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-delay: 0.2s;
}
/* Hover effect for transition */
.transitionBox:hover {
 background-color: lightblue;
}