.archive-months a,
.post-header h1 {
text-transform: uppercase
}
.post-categories .cats a:hover,
.post-content a:hover {
text-decoration: underline
}
.post-content a {
color: #0c6c74;
font-weight: 500;
text-decoration: underline;
}
.post-header h1 {
font-family: "Open Sans";
font-size: 26px;
line-height: 30px;
color: #0c6c74;
margin: 20px 0 15px;
font-style: normal;
text-shadow: none
}
.blog-main-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 30px auto 50px;
padding: 0 20px;
max-width: 1000px
}
.cat-list,
article {
flex-direction: column;
display: flex
}
.archive-months,
.year {
margin-left: 7px
}
.post-header .byline {
font-family: "Open Sans";
color: #f7a01c;
margin-bottom: 0;
padding-bottom: 20px;
font-weight: 700
}
.archive-months a,
.archive-months li,
.cat-list li,
.cat-list li a,
.year {
color: #464646;
font-family: "Open Sans";
text-decoration: none;
}
.archive-months li a:hover,
.cat-list li a:hover {
text-decoration: underline;
}
.cat-list {
gap: 5px;
padding-right: 10px;
padding-left: 15px;
list-style-type: none
}
.archive-list.archive-tree {
list-style-type: none;
padding-left: 0
}
.archive-months {
padding: 5px 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
list-style-type: none;
margin-right: 7px
}
.archive-months li {
display: flex;
justify-content: space-between;
padding: 5px;
width: 100%;
background-color: #e8e1d9
}
.cat-list li {
display: flex;
justify-content: space-between
}
.post-content h2,
.post-content h3,
.post-content h4 {
color: #000;
text-shadow: none;
margin-top: 10px;
margin-bottom: 15px
}
.post-header .featured {
width: 100%;
aspect-ratio: 3/2;
max-width: 670px;
margin: 0
}
.post-header .featured img {
max-width: 726px;
width: 100%
}
.post-content h2 {
font-size: 24px;
line-height: 28px;
padding-bottom: 0;
font-family: "Open Sans";
font-weight: 700
}
.post-categories .cats-header,
.post-content h3 {
line-height: 26px;
font-family: "Open Sans";
font-weight: 700
}
.post-content h3 {
font-size: 22px
}
.post-content h4 {
font-size: 20px;
line-height: 24px;
font-weight: 700;
font-family: "Open Sans"
}
.author-bio p,
.author-title {
font-size: 16px
}
.post-categories {
padding-left: 10px
}
.post-categories .cats-header {
font-size: 18px;
color: #464646;
padding: 15px 0 5px
}
.post-categories .cats {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
display: flex;
flex-direction: column;
align-items: start;
padding: 0
}
.post-categories .cats li {
text-align: center
}
.post-categories .cats a {
color: #0c6c74;
font-family: "Open Sans";
font-weight: 700;
padding: 5px 0;
display: block;
text-decoration: none
}
.blog-sidebar {
display: none
}
.author-box {
display: flex;
flex-direction: column;
padding: 15px 15px 0
}
.author-photo {
width: 96px;
height: 96px;
border-radius: 50%;
border: 2px solid #efebe6
}
#post-sources-h {
font-family: "Open Sans";
font-size: 21px;
font-weight: 700;
line-height: 28px;
color: #0c6c74;
text-transform: capitalize;
padding-left: 0;
margin: 0
}
.post-sources .post-sources-list {
display: flex;
flex-direction: column;
gap: 7px;
padding: 0 10px 20px 40px;
margin-bottom: 0;
margin-top: 5px
}
.post-sources .post-sources-list li {
font-family: "Open Sans";
font-size: 14px;
color: #2f3333;
line-height: 20px
}
.post-footer-sections {
background-color: #efebe6;
padding: 10px;
margin-top: 20px;
margin-bottom: 20px
}
.post-author {
background-color: #fff;
padding: 0
}
.author-title-container {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px
}
.author-name {
padding-bottom: 3px;
font-weight: 700
}
.author-title {
padding-bottom: 0;
line-height: 20px;
font-style: italic
}
.sources-and-author-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 0 10px
}
.sources-and-author-header .sources-icon {
font-family: Merriweather;
font-size: 30px;
font-weight: 700;
color: #0c6c74
}
.post-content ol+h2,
.post-content ol+h3,
.post-content ul+h2,
.post-content ul+h3 {
margin-top: 30px
}
.post-content ol,
.post-content ul {
margin-top: 0;
display: flex;
flex-direction: column;
gap: 10px
}
.post-content ol li,
.post-content ul li {
font-family: var(--font-body);
font-size: 18px;
color: #2f3333;
line-height: 1.6;
margin: 0
}
.post-content a {
color: #0c6c74
}
blockquote {
margin: 0 0 20px 20px;
border-left: 3px solid #0c6c74;
padding-left: 20px;
padding-right: 20px
}
blockquote p {
font-size: 18px;
color: #0c6c74;
line-height: 28px;
font-family: "Open Sans";
padding-bottom: 0;
font-weight: 700
}
@media (min-width:600px) {
.post-categories .cats {
flex-direction: row;
align-items: center;
gap: 20px;
margin-left: 20px
}
}
@media (min-width:1000px) {
.blog-main-container {
gap: 20px
}
.archive-year {
margin-top: 10px
}
.blog-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
width: 175px
}
.widget {
border: 1px solid #e8e1d9
}
.widget-title {
display: block;
text-transform: uppercase;
font-size: 24px;
font-weight: 500;
color: #0c6c74;
line-height: 34px;
background-color: #e8e1d9;
padding: 15px 0;
text-align: center;
box-shadow: none;
font-family: "Open Sans";
text-shadow: none
}
article {
width: 765px;
max-width: 775px
}
}
@media (min-width:1024px) {
article {
width: 100%
}
.blog-main-container {
padding: 0;
gap: 20px
}
.blog-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
width: 200px
}
}