style.css

/************************
Theme Name: m20T1
Theme URI: https://github.com/midkiffaries/m20T1
Author: Ted Balmer
Author URI: https://www.marchtwenty.com
Description: m20T1 is a light-weight WordPress theme that I created from scratch that I use on my own website. The intention is for this theme is to be minimally reliant on 3rd party plugins, and to do what it needs to do relying on the built in WordPress automation and features. 
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.0 and above
Version: 1.8.6
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: m20t1
Tags: original, one-column, custom-colors, custom-menu, custom-logo, featured-images, sticky-post, threaded-comments, accessibility-ready, footer-widgets, flexible-header, editor-style, woocommerce, blog, portfolio, news
************************/

/************************************
Theme Variables
************************************/

:root {
	--footer-bg-color: #212121;
	--footer-bg-image: linear-gradient(135deg, #eaeaea0f 0%, #eaeaea0f 50%,#a9a9a90f 50%, #a9a9a90f 100%),linear-gradient(90deg, #141414,#141414);

	--featured-img-bg-color: linear-gradient(135deg, #205380 0%,#40a5ff 82%,#205380 100%);
	--featured-img-bg: linear-gradient(135deg, #06060603 0%, #06060603 1%,#83838303 1%, #83838303 14%,#fafafa03 14%, #fafafa03 26%,#1e1e1e03 26%, #1e1e1e03 62%,#75757503 62%, #75757503 66%,#f8f8f803 66%, #f8f8f803 76%,#27272703 76%, #27272703 100%),linear-gradient(135deg, #3939390f 0%, #3939390f 4%,#e3e3e30f 4%, #e3e3e30f 26%,#4343430f 26%, #4343430f 27%,#7e7e7e0f 27%, #7e7e7e0f 39%,#6767670f 39%, #6767670f 72%,#1010100f 72%, #1010100f 76%,#1515150f 76%, #1515150f 88%,#4545450f 88%, #4545450f 100%),linear-gradient(135deg, #9c9c9c0d 0%, #9c9c9c0d 12%,#3636360d 12%, #3636360d 48%,#a9a9a90d 48%, #a9a9a90d 59%,#6868680d 59%, #6868680d 62%,#a5a5a50d 62%, #a5a5a50d 68%,#7c7c7c0d 68%, #7c7c7c0d 77%,#bdbdbd0d 77%, #bdbdbd0d 85%,#adadad0d 85%, #adadad0d 100%),linear-gradient(135deg, #b6b6b612 0%, #b6b6b612 22%,#7a7a7a12 22%, #7a7a7a12 28%,#3e3e3e12 28%, #3e3e3e12 44%,#59595912 44%, #59595912 61%,#6e6e6e12 61%, #6e6e6e12 83%,#b9b9b912 83%, #b9b9b912 86%,#c0c0c012 86%, #c0c0c012 100%),linear-gradient(135deg, #0808080f 0%, #0808080f 54%,#3030300f 54%, #3030300f 57%,#f5f5f50f 57%, #f5f5f50f 86%,#0c0c0c0f 86%, #0c0c0c0f 94%,#e1e1e10f 94%, #e1e1e10f 100%), var(--featured-img-bg-color);
	--featured-img-bg-over: #fff1 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='78mm' height='78mm' viewBox='0 0 78 78'><g fill-opacity='.04'><circle cx='38.6' r='9.5'/><circle cx='78' cy='39.5' r='9.5'/><g transform='scale(-1)'><circle cx='-38.6' cy='-78.2' r='9.5'/><circle cy='-39.5' r='9.5'/></g></g></svg>") repeat 0 0;
	
	--body-top-background: linear-gradient(0deg, #fefefe 8%, #fefefe4d 66%), 
						linear-gradient(45deg, #fefefe 25%, #fefefe00 80%),
						url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10mm' height='10mm' viewBox='0 0 78 78'><g fill-opacity='.1'><circle cx='38.6' r='9.5'/><circle cx='78' cy='39.5' r='9.5'/><g transform='scale(-1)'><circle cx='-38.6' cy='-78.2' r='9.5'/><circle cy='-39.5' r='9.5'/></g></g></svg>");
	--body-bottom-background: linear-gradient(0deg, #fefefe99 5%, #fefefe 100%), 
						url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' clip-rule='evenodd' viewBox='0 0 571.3 1152.8'><clipPath id='a'><path d='M0 0h571.3v1152.8H0z'/></clipPath><g fill='none' stroke='lightgrey' stroke-linecap='butt' stroke-width='12' clip-path='url(%23a)'><path d='M285.6 0 0 576.4l285.6 576.4L569 576.4zM0 0h571.3M0 1152.8h571.3M0 576.4h571.3'/></g></svg>");
	
	--portfolio-view-background: url("../../uploads/2023/07/portfolio-view-more-badge.svg");
}

/* Animate header background image if there is no featured image */
.header-single-page:has(.header-hero-image:not([style^="background"])),
.header-single-post:has(.header-hero-image:not([style^="background"])) {
	background-size: 104% 104%, 101% 101%, 108% 108%, 100% 100%, 100% 100%, 150% 150%;
	animation: head-grad 20s ease infinite !important;
}

@keyframes head-grad {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

/************************************
Global Font Declarations
************************************/

/* .the-content [href$=".pdf"]::before, */
.icon-document::before {
	font-family: 'icomoon' !important;
	content: "\e907"; /* document */
	padding-right: 2px;
	font-size: 1rem;
}

/* .the-content [href^="mailto:"]::before, */
.icon-mail::before {
	font-family: 'icomoon' !important;
	content: "\e903"; /* envelope */
    padding-right: 1px;
}

/* .the-content [href^="tel:"]::before, */
.icon-phone::before {
    font-family: 'icomoon' !important;
	content: "\e942"; /* phone */
    padding-right: 1px;
    font-size: 0.9rem;
}

.icon-arrow-right::before {
    font-family: 'icomoon' !important;
	content: "\e90e"; /* arrow */
    font-size: 1.6rem;
	vertical-align: -4px;
}

.icon-arrow-left::before {
    font-family: 'icomoon' !important;
	content: "\e90d"; /* arrow */
    font-size: 1.6rem;
	vertical-align: -4px;
}


/*****************************************
Typography for the page title and subtitle
******************************************/

/* Page and Post title */
.page-title,
.is-style-header-title,
.blog-page-title h1,
.porfolio-page-title h1,
.single-entry-title {
	font-weight: 700;
	font-size: 3.6rem;
	letter-spacing: -0.1rem;
	background-color: var(--wp--preset--color--secondary);
	background-image: linear-gradient(0deg, #e65100 0%, #f4971c 54%, #ffe700 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(1px 1px 0 #444) drop-shadow(1px 1px 0px #777);
	padding-bottom: 4px;
}

.page-title a:hover,
.is-style-header-title a:hover {
	background-color: var(--wp--preset--color--secondary);
	-webkit-background-clip: text;
	background-clip: text;
}

/* Blog post title */
.single-entry-title {
	font-size: 3.4rem;
}

@media (max-width: 849px) {
	.page-title,
	.is-style-header-title,
	.page-image .page-title,
	.single-entry-title,
	.blog-page-title h1,
	.porfolio-page-title h1 {
		font-size: 2.7rem;
	}
}

/* Page Subtitle */
.subtitle {
	font-family: var(--wp--preset--font-family--secondary-font);
	color: #444;
	font-size: 1.5rem;
	margin: 0.6em 0.1em;
	line-height: 1;
	letter-spacing: -1px;
}

/* Page subtitle on landing pages */
.blog-page-title .subtitle,
.porfolio-page-title .subtitle,
.archive-header .subtitle {
	margin-top: -0.3em !important;
}

/* Portfolio pages */
.portfolio-name {
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Courier New', Courier, monospace;
}

.portfolio-name a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* Portfolio page 'view all' badge */
.portfolio-view-all {
	width: 142px;
	height: 142px;
	background-position: 50% 50%;
	background-size: contain;
	background-image: var(--portfolio-view-background);
	text-align: center;
	transition: all 0.2s cubic-bezier(.14,.7,.87,.54);
	transform: scale(1) rotate(18deg);
	filter: drop-shadow(3px 3px 0 #0003);
}

.portfolio-view-all:hover {
	transform: scale(1.1) rotate(2deg);
	filter: drop-shadow(3px 5px 2px #0002);
}

.portfolio-view-all:active {
	transform: scale(0.94);
}

.portfolio-view-all a {
	display: block;
	padding: 3.45em 5px;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 2px 0 0 #d77a3c;
	text-decoration: none;
}

@media (max-width: 800px) {
	.portfolio-view-all {
		top: -1em;
		right: -1em;
		transform: scale(0.6) rotate(18deg);
	}
	.portfolio-view-all:hover {
		transform: scale(0.7);
	}
}

/************************************
Sticky/Featured article highlight
************************************/

.single-entry-sticky {
	border-radius: 0.5em;
	box-shadow: 4px 4px 0 0 #000b;
	background-color: var(--wp--preset--color--tertiary);
}

.entry-sticky {
	color: var(--wp--preset--color--tertiary);
	transform: rotate(-10deg) translate(-10px, 20px);
	transform-origin: 0 0;
	text-shadow: 2px 2px 0 #000;
}

.blog .sticky {
	background-image: radial-gradient(circle at 47% 98%, #ffffff05 0%, #ffffff05 3%,transparent 3%, transparent 100%),radial-gradient(circle at 53% 90%, #ffffff05 0%, #ffffff05 3%,transparent 3%, transparent 100%),radial-gradient(circle at 17% 34%, #ffffff08 0%, #ffffff08 3%,transparent 3%, transparent 100%),radial-gradient(circle at 85% 36%, #ffffff08 0%, #ffffff08 3%,transparent 3%, transparent 100%),radial-gradient(circle at 22% 21%, #ffffff08 0%, #ffffff08 7%,transparent 7%, transparent 100%),radial-gradient(circle at 99% 30%, #ffffff03 0%, #ffffff03 7%,transparent 7%, transparent 100%),radial-gradient(circle at 82% 84%, #ffffff03 0%, #ffffff03 7%,transparent 7%, transparent 100%),radial-gradient(circle at 62% 49%, #ffffff05 0%, #ffffff05 7%,transparent 7%, transparent 100%),radial-gradient(circle at 85% 14%, #ffffff05 0%, #ffffff05 7%,transparent 7%, transparent 100%),radial-gradient(circle at 89% 22%, #ffffff08 0%, #ffffff08 7%,transparent 7%, transparent 100%),radial-gradient(circle at 37% 65%, #ffffff03 0%, #ffffff03 7%,transparent 7%, transparent 100%),radial-gradient(circle at 57% 27%, #ffffff08 0%, #ffffff08 7%,transparent 7%, transparent 100%),radial-gradient(circle at 95% 91%, #ffffff08 0%, #ffffff08 5%,transparent 5%, transparent 100%),radial-gradient(circle at 85% 34%, #ffffff05 0%, #ffffff05 5%,transparent 5%, transparent 100%),radial-gradient(circle at 7% 65%, #ffffff08 0%, #ffffff08 5%,transparent 5%, transparent 100%),radial-gradient(circle at 69% 41%, #ffffff08 0%, #ffffff08 5%,transparent 5%, transparent 100%),radial-gradient(circle at 33% 2%, #ffffff03 0%, #ffffff03 5%,transparent 5%, transparent 100%),radial-gradient(circle at 57% 84%, #ffffff08 0%, #ffffff08 5%,transparent 5%, transparent 100%),radial-gradient(circle at 80% 86%, #ffffff03 0%, #ffffff03 5%,transparent 5%, transparent 100%),radial-gradient(circle at 24% 45%, #ffffff08 0%, #ffffff08 5%,transparent 5%, transparent 100%),linear-gradient(45deg, #40a5ff,#11436f);
	color: #fff;
}

.blog .sticky a[href] {
	color: #fff;
}

/************************************
WordPress Gutenburg Content Styling
************************************/

.the-content p {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}

.content-excerpt p {
	line-height: 1.6;
}

.the-content li:not(.wp-social-link) {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

.the-content li::marker {
	font-size: 1.5rem;
	line-height: 1;
}

/* Images, Figures and Galleries */
.the-content .wp-block-image a img {
	transition: filter 0.4s ease-in-out, transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.the-content .wp-block-image a img:hover {
	filter: brightness(1.08);
	transform: scale(1.01);
}

.the-content .wp-block-image a img:active {
	filter: brightness(0.95);
	transform: scale(0.99);
}

.the-content .wp-block-image figcaption {
	padding-top: 4px;
}

.the-content figure.aligncenter {
	margin: 0.2rem auto;
}


/************************************
Custom Gutenburg Styling
***********************************/

/* Page content links */
.the-content a[href]:not(.wp-block-button__link):not(.wp-block-social-link-anchor) {
	transition: color 0.25s, filter 0.25s;
}

.the-content a[href]:not(.wp-block-button__link):not(.wp-block-social-link-anchor):hover {
	filter: brightness(1.08);
}

.the-content a[href]:not(.wp-block-button__link):not(.wp-block-social-link-anchor):active {
	filter: brightness(0.95);
}

/* Post content links */
.post .the-content a[href]:not(.wp-block-button__link):not(.wp-block-social-link-anchor) {
	color: var(--wp--preset--color--primary);
	transition: color 0.25s;
}

.post .the-content a[href]:not(.wp-block-button__link):not(.wp-block-social-link-anchor):hover {
	color: var(--wp--preset--color--primary-pale);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary-dark);
}

.post .the-content a[href]:not(.wp-block-button__link):not(.wp-block-social-link-anchor):active {
	color: var(--wp--preset--color--primary-dark);
}


/************************************
Sidebar and Widgets Styling
***********************************/

.widget_block h4 {
	text-transform: uppercase;
	font-size: 1.2rem;
	font-weight: 700;
}

.singlepost-widgets {
	font-size: inherit;
}

.singlepost-widgets section {
	margin-top: 3em;
}

.blogroll-widgets {
	font-size: inherit;
}

.frontpage-widgets {
	font-size: inherit;
}

.archive-widgets {
	font-size: inherit;
}

.attachment-widgets {
	font-size: inherit;
}

.page-sidebar .widget_recent_entries ul li {
	margin-bottom: 10px;
	line-height: 1.15;
}

/* Sidebar links */
.page-sidebar a[href] {
	text-decoration: none;
	transition: color 0.25s;
	line-height: 1.2;
}

.page-sidebar a[href]:hover {
	text-decoration: underline;
	color: var(--wp--preset--color--primary);
}

.page-sidebar a[href]:active {
	color: var(--wp--preset--color--primary-dark);
}

/* Hide extra label for side bar widgets */
.widget_archive label {
	display: none;
}

/************************************
Form Element Styling
************************************/

/* Input & Textarea Types */
[type="search"],
[type="text"],
[type="email"],
[type="url"],
textarea,
select {
	border-width: 2px;
	transition: border-color 0.4s, box-shadow 0.4s;
}

[type="search"]:hover,
[type="text"]:hover,
[type="email"]:hover,
[type="url"]:hover,
textarea:hover,
select:hover {
	border-color: var(--wp--preset--color--primary-dark);
}

[type="search"]:focus,
[type="text"]:focus,
[type="email"]:focus,
[type="url"]:focus,
textarea:focus,
select:focus {
	outline: none;
	box-shadow: 0 0 2px 1px var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* Deafult Buttons */
.wp-block-button,
button,
[type="button"],
[type="submit"],
[type="reset"] {
	transition: filter 0.5s;
}

.dialog-content [type="submit"],
.dialog-content button {
	color: #fff;
	background-color: var(--wp--preset--color--primary);
	border-width: 2px;
	border-color: transparent;
}

.wp-block-button:hover,
.dialog-content [type="submit"]:hover,
.dialog-content button:hover {
	filter: brightness(1.15);
}

.wp-block-button:active,
.dialog-content [type="submit"]:active,
.dialog-content button:active {
	filter: brightness(0.96);
}

.wp-block-button:focus,
.dialog-content [type="submit"]:focus,
.dialog-content button:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary-dark);
}


/************************************
Blog Post Styling
************************************/

/* Pagination links */
.blog-pagination nav a {
	border-radius: 0.3em;
	border-bottom: 2px solid transparent;
	font-weight: 500;
	transition: all 0.4s;
}

.blog-pagination nav a:hover {
	color: #fff;
	background-color: var(--wp--preset--color--secondary);
	border-bottom-color: #0006;
}

.blog-pagination nav a:active {
	filter: brightness(75%);
}

.single-author-bio {
	outline: 3px dashed var(--wp--preset--color--primary-dark);
	border: 1px solid #00000014;
	background-image: repeating-linear-gradient(135deg, hsla(35,0%,71%,0.09) 0px, hsla(35,0%,71%,0.09) 1px,transparent 1px, transparent 11px),repeating-linear-gradient(45deg, hsla(35,0%,71%,0.09) 0px, hsla(35,0%,71%,0.09) 1px,transparent 1px, transparent 11px),linear-gradient(90deg, hsla(0,0%,100%,0),hsla(0,0%,100%,0));
}

.author-bio-title {
	margin-top: -6px;
	color: var(--wp--preset--color--primary-dark);
}


/************************************
Global Page Styling
************************************/

/* Site header text highlights */
.header-logo {
	filter: drop-shadow(1px 1px 0 #fff3);
	transition: opacity 0.2s ease-in-out;
	opacity: 1;
}

.dark-mode .header-logo {
	filter: drop-shadow(1px 1px 0 #111);
}

.header-logo:hover {
	opacity: 0.8;
}

.nav-primary-navigation,
.header-widgets {
	text-transform: uppercase;
	filter: drop-shadow(1px 1px 0 #fff9);
}

.header-widgets {
	vertical-align: 3px;
}

.dark-mode .nav-primary-navigation,
.dark-mode .header-widgets {
	filter: none;
}

.page-header .menu-item-sub {
	display: none;
}

/* Page Footer */
.page-footer {
	background-color: var(--footer-bg-color);
	background-image: var(--footer-bg-image); 
	background-size: 72px 72px;
	position: relative;
}

/* Add saw effect to top of footer */
.page-footer::before {
    background: linear-gradient(-45deg, var(--footer-bg-color) 16px, transparent 0), linear-gradient(45deg, var(--footer-bg-color) 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: "";
    display: block;
    position: absolute;
    top: -28px;
    left: 0;
    width: 100%;
    height: 35px;
	filter: drop-shadow(-4px -1px 0px #aaa);
}

/* Footer Widgets */
.footer-widgets .widget_nav_menu a {
	color: #fff;
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
}

.footer-widgets .widget_nav_menu a:hover {
	text-decoration: underline;
	text-decoration-color: #aaa;
}

.footer-widgets .redbubble-logo,
.footer-widgets .spring-logo {
	margin: 12px 16px;
	transition: transform 0.2s ease;
	font-weight: 600;
}

.footer-widgets .spring-logo img {
	filter: invert(50%)
}

.footer-widgets .redbubble-logo:hover,
.footer-widgets .spring-logo:hover {
	transform: scale(1.1);
}

.footer-notice a {
	color: #eee;
}

/* Buttons with Icons */
.square-button {
	padding: 1.2em;
	margin: 0 2px;
	border: 0;
	background-color: transparent !important;
	background-position: 50% 50%;
	background-size: 1.9em;
	background-repeat: no-repeat;
	transition: transform 0.2s ease-in-out;
	transform-origin: 50%;
}

.square-button:hover {
	transform: scale(1.25);
}

.menu-email {
	background-image: var(--icon-mail);
}

.menu-search {
	background-size: 1.6em;
	background-image: var(--icon-search);
}

/* Comments section */
.list-comments .comment {
	background: #0001;
}

/* Blog Post Metadata links */
.entry-header a[href],
.single-entry-header a[href] {
	transition: color 0.25s;
	text-decoration: none;
}

.entry-header a[href]:hover,
.single-entry-header a[href]:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
}

.entry-header a[href]:active,
.single-entry-header a[href]:active {
	color: var(--wp--preset--color--primary-dark);
}
/*
.entry-header .entry-title a[href]:visited,
.single-entry-header .entry-title a[href]:visited {
	color: var(--wp--preset--color--primary-pale) !important;
}
*/
/* Add embellishment to last <p> in article */
.single-entry-content p:last-of-type::after {
	font-family: 'icomoon' !important;
	content: "\e902";
	margin-left: 0.5em;
	line-height: 1;
	opacity: 0.5;
}

/* Single Blog Post */
.single-entry-category {
	font-family: var(--wp--preset--font-family--secondary-font);
	font-size: 1.4rem;
	color: #666;
}

.single-entry-category a {
	color: #444;
	line-height: 1;
}

.single-entry-category a:hover {
	text-decoration: none !important;
}


/************************************
Page Background embellishments
************************************/

/* All pages/post body top background */
.body-top-background {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	height: 15em;
	background-image: var(--body-top-background);
}

/* All pages/posts content bottom background */
.body-bottom-background {
	position: relative;
	z-index: -1;
	width: 100%;
	height: 12em;
	margin-top: -12em;
	background-image: var(--body-bottom-background);
}

/* Pages/single posts with the-content top background */
.page .the-content::before,
.single .the-content::before {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 12em;
	right: 0;
	background: var(--body-top-background);
	z-index: -1;
	top: 12em;
}

@media (max-width: 850px) {
	.page .the-content::before,
	.single .the-content::before {
		top: -2em;
	}
}

.dark-mode .body-top-background,
.dark-mode .body-bottom-background,
.dark-mode.page .the-content::before,
.dark-mode.single .the-content::before {
	filter: invert(91.8%);
	opacity: 0.9;
}

.dark-mode .breadcrumbs .trail-items {
	background-color: #0008;
}


/************************************
Social Links
************************************/

/* Add additional brand icons for social links */
.the-content .wp-block-social-link a {
	line-height: 1.8;
}

.wp-social-link [href^="https://unsplash.com"] svg, 
.wp-social-link [href^="https://www.thingiverse.com"] svg {
	display: none;
}

.wp-social-link [href^="https://unsplash.com"]::before {
	content: "";
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024'><path d='M320 288V0h384v288zm384 160h320v576H0V448h320v288h384z' fill='white'/></svg>");
	width: 1em;
	height: 1em;
	background-size: 1em;
	margin-right: 0.2em;
}

.wp-social-link [href^="https://www.thingiverse.com"]::before {
	content: "";
	background-image: url("data:image/svg+xml,<svg height='2500' width='2500' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g fill='none' fill-rule='evenodd'><circle cx='256.962' cy='256.962' fill='dodgerblue' r='237.714'/><path d='M256 512C114.615 512 0 397.385 0 256S114.615 0 256 0s256 114.615 256 256-114.615 256-256 256zm0-36.571c121.187 0 219.429-98.242 219.429-219.429S377.187 36.571 256 36.571 36.571 134.813 36.571 256 134.813 475.429 256 475.429zm32.722-269.474v219.428h-65.444V205.955h-92.39V140.51h250.225v65.444z' fill='white'/></g></svg>");
	width: 1em;
	height: 1em;
	background-size: 1em;
	margin-right: 0.2em;
}

/* Print friendly styling */
@media print {
	.page-title,
	.single-entry-title,
	.blog-page-title h1,
	.porfolio-page-title h1 {
		color: var(--wp--preset--color--secondary);
		-webkit-text-fill-color: var(--wp--preset--color--secondary);
	}
	.page-footer {
		color: #333;
		background: #fff;
	}
	.page-footer::before {
		background: none;
	}
}