body {

font-family: $pd-font-family-sans-serif;
font-size: $font-size-base;
background-color: $pd-off-white;
margin: 0;

}

a:link {

border-bottom: 1px black dotted;
text-decoration: none;
color: $pd-black;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;

}

a:visited {

text-decoration: none;
color: $pd-black;

}

a:hover{

text-decoration: none;
color: $pd-dark-blue;

}

.meta {

color: $pd-light-gray;

}

banner {

background-color: $pd-banner; 
text-align: center;
color: $pd-white;
h4 {
  font-style: italic;
}

}

.banner-text {

display: inline-block;

}

quick-nav {

background-color: $pd-banner-light;
max-width: 650px;
margin: auto;
margin-top:5px;
padding: 5px;
text-align: center;
@media only screen and (max-width: $screen-phone) {
  margin-top: 0px;
}

}

.quick-nav-item {

display: inline-block;
padding: 3px;
margin: 0 0.25em;

}

a.quick-nav-item {

border-bottom: 0px;
color: $pd-white;

}

a.quick-nav-item:hover {

color: $pd-banner-dark;

}

.circle {

display: inline-block;
background: #84BE62;
padding: 3px 9px;
border: 2px solid $pd-white;
border-radius: 100px;

}

.back-to-top {

text-align: right;

}

feed-container {

max-width: 700px;
margin: auto;
padding: 1em;

}

.article-header {

margin-left: -1em;

}

footer {

border-top: 1px dotted $pd-light-gray;
text-align: center;
padding-top: 3em;
margin-bottom: 3em;

}