@import url(reset.css);

body {
    font-family: verdana;
    background-color: #234567;
    color: sandybrown;

}

h1 {
    text-align: right;
    text-transform: lowercase;
    background-color: black;
}

div.examples {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

article.flexchild {
    flex: 0 1 auto;
    width: 250px;
    height: 250px;
    margin: 1rem;
    border: 3px solid orange;
}

article.child1 {
    transform: rotate(-15deg) translate(6px, 10px) skew(10deg, 15deg);
}

article.child2 {
    background-image: url(../images/pumpkin.png), url(../images/pumpkins.jpg);
    background-size: 90px, cover;
    background-repeat: no-repeat;
    background-position: 50% 100%, center center;
    transition: all .4s linear;
}

article.child2:hover {
    background-position: 100% 0%, center, center;
}

article.child3 {
    border-radius: 20px/40px 20px 30px 40px;
    border: 6px solid #EEE;
}

article.child4 {
    width: 0;
    height: 0;
    border-width: 100px;
    border-left-width: 200px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: yellow;
    transition: transform 250ms ease-in;
}

article.child4:hover {
    transform: translateX(9px);
}

article.child5 {
    background-image: linear-gradient(to right, red, 50%, green, blue);
}