/* Emily Gorgees ITWP 1050 This
module’s homework assignment requires you to incorporate various element selectors,
transform, transitions, animations, an external CSS file, and then successfully validate
your work */

/* class for the rotate function I'll be using in the footer */
.rotate {
    width: 20rem;
    height: 5rem;
    background: plum;
    margin: 10rem;
    transform: perspective(200px) 
    rotateX(45deg);
    text-align: center;
    font-size: large;
}

/* class for the scale function I'll be using in h1 */
.scale {
    width: 100px;
    height: 40px;
    margin: 5rem;
    transform: scale(2);
    font-size: 20px;
    align-items: center;
    color: plum;
    justify-content: center;
}

/* class for the skew function I'll be using for image 2*/
.skew {
    transform: skew(35deg, 20deg);
    width: 10rem;
    margin: 5rem;
}

/* the transform shorthand property I'll be using for image 1 */
.transform {
    transform: scale(1,2) translate(2rem, 2rem) rotate(30deg);
    width: 10rem;
    margin: 10rem;
}

/* a class that uses the transiton-property, duration, and delay properties in h2 h3 and h4 */
.properties {
    background: plum;
    transition-property: background-color, transform;
    transition-duration: 500ms, 500ms;
    transition-delay: 0ms, 500ms;
    text-align: center;
}
.properties:hover {
    background-color: mediumvioletred; 
    transform: scale(1.5); 
}

p {
    font-size: 20px;
}