body {
    max-width: 40em;
    margin: 1em auto;
    padding: 0 .62em;
    font: 1.2em/1.62 sans-serif;
    text-align: center;
    color: #444;
}
h1, h2, h3 {
    line-height: 1.2;
    margin-bottom: .5em;
    /* white-space: nowrap; */
}
article {
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    padding: 5px 20px 20px 20px;
    /* padding: 5px 5px 20px 5px; */
    margin: 0 5px 20px 10px;
    opacity: 0.7;
}
.active {
    opacity: 1;
    border: 1px solid #039335;
    margin-top: -30px;
    font-family: 'Candara', sans-serif;
}
article:hover {
    opacity: 1;
    border: 1px solid #039335;
}
a:link{
    color: #039335;
    padding-right: .62em;
    text-decoration: none;
}
a:visited {
    color: #039335;
}
a:hover {
    color: #444;
}
@media print{
    body{
        max-width: none
    }
}
.social-media {
    size: 40px;
    padding: 0px 10px 0px 10px;

    color: #444;
}
.social-media:hover {
    opacity: 0.7;
}