/* General styles - put these straight into your stylesheet */

body {
    margin: 0;
}
  
html {
    font-family: 'Helvetica neue', Arial, 'sans serif';
    font-size: 10px;
    background-color: #ccc;
}
  
/* Selectors to be matched up with rulesets */

/* Rulesets to be matched up with selectors */

.card  {
    width: 35em;
    height: 22em;
    margin: 5em auto;
    background-color: red;
    border: 0.2em solid black;
    border-radius: 1.5em;
}

.card header {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
    border-radius: 1.5em 1.5em 0 0;
}
.card footer {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
    border-radius: 0 0 1.5em 1.5em;
}

.card article img {
    max-height: 100%;
    float: right;
}

.card header, .card footer {
    height: 3em;
    padding: 1em;
}

h2, p {
    margin: 0px;
}

article {
    color: white;
    height: 12em;
    background-color: rgba(0,0,0,.5);
    line-height: 1.5em;
}

h2 {
    font-size: 2em;
    line-height: 1.5em;
}

footer p {
    font-size: 1.5em;
    line-height: 2em;
}

article p {
    padding: 1em;
}