/*
Name: Raneen Algamal
Course: ITWP 1050
Assignment: Homework 4
*/

/* basic page styling */
body {
    margin: 25px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f2f7ff;
    color: #102033;
    text-align: center;
}

/* heading style */
h1 {
    background-color: #1e3a8a;
    color: white;
    padding: 20px;
    border-radius: 12px;
}

/* paragraph style */
p {
    max-width: 900px;
    margin: 25px auto;
    line-height: 1.7;
    font-size: 1.1em;
}

/* general image styling */
img {
    width: 350px;
    max-width: 90%;
    height: auto;
    margin: 20px;
    border: 3px solid #1e3a8a;
    border-radius: 12px;
    padding: 5px;
    background-color: white;
}

/* rotation transform requirement */
.rotate-img {
    transform: rotate(3deg);
}

/* scale transform requirement */
.scale-box {
    background-color: #dbeafe;
    padding: 20px;
    border-radius: 12px;
    transform: scale(1.02);
}

/* skew transform requirement */
.skew-img {
    transform: skew(-4deg);
}

/* transform shorthand with multiple transforms requirement */
.multi-transform {
    background-color: #fff7ed;
    padding: 20px;
    border-radius: 12px;
    transform: rotate(-1deg) scale(1.03) skew(1deg);
}

/* transition properties requirement */
.transition-box {
    background-color: #e0f2fe;
    padding: 20px;
    border-radius: 12px;
    transition-property: background-color;
    transition-duration: 2s;
    transition-delay: 1s;
}

/* hover effect for transition */
.transition-box:hover {
    background-color: #bfdbfe;
}

/* footer styling */
footer {
    margin-top: 40px;
    padding: 20px;
    font-size: 14px;
}

/* link styling */
a {
    color: #1d4ed8;
    font-weight: bold;
}