/* Klajdi Bicaku - ITWP 1050 Homework 4 */

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
    color: #222;
}

h1 {
    text-align: center;
}

.title-effect {
    text-align: center;
    transition: transform 0.5s;
}

.title-effect:hover {
    transform: scale(1.2) rotate(5deg);
}

img {
    width: 250px;
    margin: 15px;
    transition: transform 0.5s;
}

.rotate:hover {
    transform: rotate(20deg);
}

.scale:hover {
    transform: scale(1.2);
}

.multi {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    text-align: center;
    line-height: 100px;
    margin-top: 20px;
    transition: transform 0.5s;
}

.multi:hover {
    transform: rotate(10deg) scale(1.2) skew(10deg);
}

.transition-box {
    width: 250px;
    height: 100px;
    background-color: coral;
    text-align: center;
    line-height: 100px;
    margin-top: 20px;

    transition-property: background-color, transform;
    transition-duration: 0.5s;
    transition-delay: 0.2s;
}

.transition-box:hover {
    background-color: purple;
    transform: scale(1.2);
}