.pr-6 {
	padding-right:1.5rem
}

.anchor svg {
	display:inline;
}

.dark .toc-wrapper {
	background-color: var(--tw-prose-pre-bg)!important;
	border-color: rgb(55 65 81/var(--tw-divide-opacity))!important;
}

.light .toc-wrapper {
	border-color: rgb(229 231 235/var(--tw-divide-opacity))!important;
}

.toc-wrapper a, .related-posts a {
	text-decoration: none;
}

.toc-link a {
	display:none;
}

.toc-link:hover a{
	display:inline-block;
}

.tags a {
	margin-right: .75rem;
}

.category a {
	margin-right: .1rem;
}

.category {
	line-height:3.2rem;
}

.read-more {
	text-decoration:inherit;
}

.nav-top li {
	display:inline-block;
		margin-left: 1.5rem;
	font-weight: 500;
}

.nav-mobile li{
	outline-width: 0;
	outline-style: solid;
	letter-spacing: .1em;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 2rem;
	padding-right: 1rem;
	padding-top: .5rem;
	padding-bottom: .5rem;
	margin-bottom: 1rem;
}

.menu-mobile {
	display:none;
}

@media (max-width: 640px) {
	.nav-top {
		display:none;
	}
	.is-menu-open .menu-mobile {
		display:block!important;
	}
}

.search-form {
	display:none;
}

.is-search-open .search-form {
	display: flex;
}

/*.tags a:hover {
	color:rgb(190 24 93);
}


.dark .tags a:hover {
	color:rgb(244 114 182);
}*/

.nav li > ul {
	display:none;
}

.footnotes {
	margin-top:0;
	border:none;
}

.footnotes ol {
	margin-bottom:0;
	padding-top: 1.5em;
}

.footnotes > hr {
	margin:0;
}

.thumb-icon {
	background: rgba(0,0,0,0.7);
	color: #fff;
	text-align: center;
	display: block;
	width: 32px;
	height: 32px;
	position: absolute;
	bottom: 50%;
	left: 50%;
	margin-left: -16px;
	margin-bottom: -16px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-transition: all 0.7s ease;
	-webkit-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

.thumb-icon svg {
	margin: 1px 0 0 2px;
}

.thumbnail {
	position:relative;
	display:inline-block;
}

.thumbnail:hover .thumb-icon {
	background: #fff;
	color: #333;
}

/* vsxd customizations below sean2025.09.09 */
a:link {color: var(--link);text-decoration:none;}
a:link .el-path{color: var(--link);fill:var(--link);}
.dark a:link{color: var(--linkD);}
.dark a:link .el-path{color: var(--linkD); fill:var(--linkD);}
.external-link svg{display:inline; vertical-align: text-top;}
/*.text-primary-500, .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)){color: var(--link);text-decoration:none;}*/
a[href^="#"]:visited, .text-primary-500, .prose:visited :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):visited {color: var(--link);text-decoration: none;}
.dark a[href^="#"]:visited, .dark .text-primary-500, .dark .prose:visited :where(a):not(:where([class~="not-prose"], .dark [class~="not-prose"] *)):visited {color: var(--linkD);}
a:visited {color: var(--link-v);text-decoration: none;}
.dark a:visited {color: var(--linkD-v);}
a:hover {text-decoration: underline;}
a:focus {text-decoration: none;}
a:focus/*,:focus*/ {outline: 2px dotted var(--link);}
.dark a:focus/*,:focus*/ {outline: 2px dotted var(--linkD);}
a:hover,a:active {outline: none;}
a:active{color: var(--link-a);}

.hover\:text-primary-600:hover{
	color: var(--link);
}
.dark .hover\:text-primary-600:hover{
	color: var(--linkD);
}
.prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover {
	color: var(--link);
}
.dark .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)):hover {
	color: var(--linkD);
}

::selection{
	background:hsla(255, 100%, 50%, 1);
	color:white;
}
a::selection, a:visited::selection{
	color:magenta;
}
/* variable/responsive/adaptive/fluid font sizing */
/* set rem base font-size on html element to match what you set for body in elementor's global preset, this resets the 15px body font-size that comes from hello theme */
 html {
	scroll-behavior: smooth;
	font-size:calc(100% + .125vw);
	/* see type-scale.com */
	--type-scale: 1.250;
	/* do some letter-spacing scaling similar to your type scale value, wcag compliant letter-spacing = 0.12+ */
	--ls-scale: .0125em;
	/* wcag compliant word-spacing = 0.16+ */
	--vsxd-ws: 0.16em;
	/* wcag compliant line-height = 1.5+ */
	--vsxd-lh: 1.5;
	/* wcag space after p = 2x font-size+ */
	--vsxd-p-after: 2em;
	/* clamps vars for font-size calcs on h1 & h2 */
	--clamp-min: 2rem;
	/* magic number based on longest word problems */
	--clamp-pref: 7cqi;
	/* font size vars using numbers above, smallest first */
	/* small tags */
	--vsxd-fs-n1: calc(1em / var(--type-scale));
	/* big tags */
	--vsxd-fs-p1: calc(var(--type-scale) * var(--type-scale) * 1em);
	/* normal text content */
	--vsxd-fs1: 1rem;
	/* h6 */
	--vsxd-fs2: calc(1rem * pow(var(--type-scale), var(--type-scale)));
	/* h5 */
	--vsxd-fs3: calc(1rem * pow(var(--type-scale), 2));
	/* h4 */
	--vsxd-fs4: calc(1rem * pow(var(--type-scale), 3));
	/* h3 */
	--vsxd-fs5: calc(1rem * pow(var(--type-scale), 4));
	/* h2 */
	--vsxd-fs6: calc(1rem * pow(var(--type-scale), 5));
	/* h1 */
	--vsxd-fs7: calc(1rem * pow(var(--type-scale), 6));
	/* main content width */
	--content-width: 88ch;
	/* colors */
	/* 00F */
	--link: hsl(240, 100%, 50%);
	/* b3b3ff */
	/* 00d7eb */
	--linkD: hsl(185, 100%, 46%);
	/* 800080 */
	--link-v: hsl(300, 100%, 25%);
	/* ff99ff */
	--linkD-v: hsl(300, 100%, 80%);
	/* F00 */
	--link-a: hsl(0, 100%, 50%);
	--img-bd: hsla(0, 0%, 50%, 1);
}
body {
	line-height:var(--vsxd-lh);
	word-spacing: var(--vsxd-ws);
	font-weight: 400;
	/* remove empty space below footer on short content pages sean2022.02.03 */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.text-base {
	font-size:1rem;
	line-height:var(--vsxd-lh);
}
:is(h1, h2, h3, h4, h5, h6) {
	overflow-wrap: break-word;
	hyphens: auto;
	max-width: 80ch;
	letter-spacing: var(--ls-scale);
	font-weight: 600;
}
.content-body :is(h1, h2, h3, h4, h5, h6) {
	margin: 1em 0 0.125em 0;
}
.content-body{
	h2+h3, h3+h4, h4+h5, h5+h6{
		margin-top: 0.125em;
	}
}
small, .text-sm, footer h2 {
	font-size: var(--vsxd-fs-n1);
}

big {
	font-size: var(--vsxd-fs-p1);
}
/* the pow() css function changes everything here! sean2024.11.04 (MOB) css-expo-calc.jpg */
h6, .prose h6, .prose.related-posts h2 {
	font-size: var(--vsxd-fs2);
}

h5, .prose h5 {
	font-size: var(--vsxd-fs3);
}

h4, .prose h4 {
	font-size: var(--vsxd-fs4);
}

h3, .prose h3 {
	font-size: var(--vsxd-fs5);
}

h2, .prose h2 {
	font-size: var(--vsxd-fs6);
}

h1, .prose h1 {
	font-size: var(--vsxd-fs7);
}

img, video {
	max-width: 100%;
	height: auto;
	max-height: 100%;
}

.post-content footer h2{
	color: #6b7280;
	text-transform: uppercase;
}
.related-posts h2{
	text-transform: capitalize;
	margin-bottom:0;
}
.related-posts ul{
	margin: 0;
}

.vsxd-w{
	max-width: var(--content-width);
	width: 100%;
}

.prose :is(h1, h2, h3, h4, h5, h6) + p{
	margin-top: 0;
}

.prose :where(p):not(:where([class~=not-prose],
[class~=not-prose] *)) {
	margin-top: var(--vsxd-p-after);
	margin-bottom: var(--vsxd-p-after);
}
.prose :where(.prose>:first-child):not(:where([class~=not-prose],
[class~=not-prose] *)) {
	margin-top:0
}
.prose :where(.prose>:last-child):not(:where([class~=not-prose],
[class~=not-prose] *)) {
	margin-bottom:0
}

.prose :where(ul):not(:where([class~=not-prose],
[class~=not-prose] *)) {
	list-style-type:disc;
	margin-top: var(--vsxd-p-after);
	margin-bottom: var(--vsxd-p-after);
	padding-inline-start:1.625em
}
.prose :where(p+ul, p+ol, p+dl):not(:where([class~=not-prose],
[class~=not-prose] *)){
	margin-top: calc(var(--vsxd-p-after) * -.5);
}
.prose :where(ol>li):not(:where([class~=not-prose],
[class~=not-prose] *))::marker {
	font-weight:400;
	color:var(--tw-prose-counters)
}
.prose :where(ul>li):not(:where([class~=not-prose],
[class~=not-prose] *))::marker {
	color:var(--tw-prose-bullets)
}
.prose :where(dt):not(:where([class~=not-prose],
[class~=not-prose] *)) {
	color:var(--tw-prose-headings);
	font-weight:600;
	margin-top: var(--vsxd-p-after)
}
.content-layout img, .prose img{
	border: 1px solid var(--img-bd);
	margin-left: auto;
	margin-right: auto;
}
.prose :where(code):not(:where([class~=not-prose],
[class~=not-prose] *)) {
	display: inline-block;
	padding: .0125em .5em;
	font-weight: inherit;
	font-size: .875em;
	word-break: break-all;
	color: hsl(44 100% 20% / 1);
	color: hsl(0, 0%, 88%);
	background: hsl(44 50% 91% / 1);
	background: hsl(266, 15%, 8%);
	border-radius: .25em;
}
.dark .prose :where(code):not(:where([class~=not-prose],
[class~=not-prose] *)) {
	color: hsl(44 100% 80% / 1);
	background: hsl(44 50% 23% / 1);
	color: hsl(266, 15%, 8%);
	background: hsl(0, 0%, 88%);
}
/* disable the backticks on code elements from tailwind.css */
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before,
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after
{ content:''; }

/* need to write html in post content to align images left/right, sad! */
figure{
	display: flex;
	flex-direction: column;
	place-items: center;
	margin: 1em;
}
figure.vsxd-fr{
	margin-right:0;
	float: right;
}
figure.vsxd-fl{
	margin-right:0;
	float: right;
}

.tag-cloud-link{
	font-size: 1rem;
}
.tag-size-1{
	font-size: var(--vsxd-fs-n1);
}
.tag-size-2{
	font-size: var(--vsxd-fs1);
}
.tag-size-3{
	font-size: var(--vsxd-fs2);
}
.tag-size-4{
	font-size: var(--vsxd-fs3);
}
.tag-size-5{
	font-size: var(--vsxd-fs4);
}

.post-author img{
	height:40px;
	width: auto;
}

footer a:link, .tags a:link{
	display: inline-block;
	min-height: 24px;
}

/* animate blog title */
.home-link-container:hover{
	a{
		text-decoration: none;
	}
	.blog-title{
		animation-play-state: running;
	}
}
.blog-title{
	margin-left: -1.44rem;
	display: inline-block;
	animation: rollAndSlide 1.6s ease-in-out infinite alternate;
	/*animation-delay: 250ms;*/
	transform: rotate(-90deg);
	animation-play-state: paused;
}
@keyframes rollAndSlide {
	0% {
		transform: translateX(0) rotate(-90deg);
	}
	50% {
		transform: translateX(96px) rotate(0deg);
	}
	100% {
		transform: translateX(0) rotate(-90deg);
	}
}

.thumbnail img{
	max-width: 640px;
}

.featured-img, .thumbnail img{
	max-height: 480px;
	width: auto;
}

.ytbox{
	margin: var(--vsxd-p-after) 0;
}
/* https://www.labnol.org/internet/light-youtube-embeds/27941 */
/* Light YouTube Embeds by @labnol */
/* Web: https://www.labnol.org/ */
/* has issues, text on line before div gets sucked into the container */
.youtube-player, .youtube-player>div {
	display:grid;
	grid-template-columns: 1fr;
	place-items:center;
	width: 100%;
	height: auto;
	min-height:480px;
}

.youtube-player iframe {
	border:0px;
	width:100%;
	aspect-ratio:16/9;
}

.youtube-player img {
	grid-row-start: 1;
	grid-column-start: 1;
	height: auto;
	width: 100%;
}

.youtube-player img:hover {
	-webkit-filter: brightness(75%);
}

.youtube-player .play {
	grid-row-start: 1;
	grid-column-start: 1;
	height: 48px;
	width: 68px;
	background: url('https://i.ibb.co/j3jcJKv/yt.png') no-repeat;
	cursor: pointer;
}
/* link preview boxes */
#preview{
	position:absolute;
	padding: .5rem;
	max-width: 16rem;
	font-size:1rem;
	z-index:10;
	border:1px solid #ccc;
	background:white;
}
.dark #preview{
	background:black;
}
#preview img{
	width:auto;
}