/*!
Theme Name: The Lazy Cat Child
Author: Chi
Description: The child theme of a certain lazy cat.
Text Domain: thelazycat
Template: the-lazy-cat
*/

@import url('https://fonts.googleapis.com/css2?family=Croissant+One&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Hide */
form label,
header.site-header,
h1.entry-title,
h2.entry-title,
.entry-footer,
.comments-area,
.comment-notes,
.posted-on,
.byline,
.cat-links,
.edit-link,
.post-navigation,
.post-thumbnail {
	display: none !important;
}

/* Hide system cursor */
html:hover,
a:hover,
a:-webkit-any-link,
li:hover a,
textarea:hover,
input:hover,
select:hover,
option:hover,
footer a:hover,
button:hover,
.gravatarOption:hover,
.closeModal:hover {
	cursor: none;
}

/* Default custom cursor */
:root {
	-webkit-animation: cursor 600ms infinite;
	animation: cursor 600ms infinite;
	scroll-behavior: smooth;
}
@-webkit-keyframes cursor {
	0% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-idle-1.png),
		auto;}
	25% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-idle-2.png),
		auto;}
	50% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-idle-3.png),
		auto;}
	75% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-idle-4.png),
		auto;}
	100% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-idle-5.png),
		auto;}
}
@keyframes cursor {
	0% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-idle-1.png),
		auto;}
	25% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-idle-2.png),
		auto;}
	50% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-idle-3.png),
		auto;}
	75% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-idle-4.png),
		auto;}
	100% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-idle-5.png),
		auto;}
}

/* Pointer custom cursor */
a:hover,
input:hover,
textarea:hover,
select:hover,
option:hover,
button:hover,
footer a:hover,
.button:hover,
.gravatarOption:hover,
.closeModal:hover,
.swal2-confirm:hover {
	-webkit-animation: pointer 300ms infinite;
	animation: pointer 300ms infinite;
}
@-webkit-keyframes pointer {
	0% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-pointer-1.png),
		auto;}
	100% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-pointer-5.png),
		auto;}
}
@keyframes pointer {
	0% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-pointer-1.png),
		auto;}
	100% {cursor: url(https://thelazycat.xyz/wp-content/uploads/2025/05/cursor-pointer-2.png),
		auto;}
}

/* Global styling*/
* {
	transition: 0.3s all;
}

img,
.blocked {
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
	touch-action: none;
	tab-index: -1;
}
.pixel {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

button,
button:active,
button:visited,
button:focus {
	background-color: var(--d3);
	border-color: transparent;
	border-radius: 0px;
	color: var(--y1);
	font: 800 10px var(--inter);
	letter-spacing: 1px;
	line-height: 10px;
	outline-offset: 1px;
	outline: solid 1px var(--d3);
	padding: 13px;
	place-content: center;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: 0.5s;
}
button:hover {
	background-color: var(--y1);
	border-color: transparent;
	color: var(--d3);
	outline: solid 1px var(--y1);
}

:root { /* Variables */
	--d0: hsla(0,0%,12%,1);
	--d1: hsla(0,0%,14%,1);
	--d2: hsla(0,0%,16%,1); 
	--d3: hsla(0,0%,18%,1);
	--d4: hsla(0,0%,20%,1);
	--d5: hsla(0,0%,22%,1);
	--l1: hsla(0,0%,100%,1);
	--l2: hsla(0,0%,90%,1);
	--l3: hsla(0,0%,80%,1);
	--l4: hsla(0,0%,70%,1);
	--l5: hsla(0,0%,60%,1);
	--y1: hsla(42,37%,50%,1);
	--y2: hsla(44,62%,52%,1);
	--y3: hsla(44,90%,48%,1);

	--inter: Inter;
	--kanit: Kanit;
	--croissant: Croissant One;

	--bg1: url(https://thelazycat.xyz/wp-content/uploads/2025/05/bg1.webp);
	--bg2: url(https://thelazycat.xyz/wp-content/uploads/2025/05/bg2.webp);
}

html,
body {
	background-color: var(--d0);
	background-blend-mode: multiply;
	background-attachment: fixed;
	margin: 0;
	padding: 0;
	color: var(--l3);
	font: 500 1rem var(--inter);
}

a,
a:visited,
a:focus {
	color: var(--y2);
	text-decoration: none;
}
a:hover {
	color: var(--y3)
}

::selection { /* For modern browsers */
	background: var(--y1) !important;
	color: var(--d0) !important;
	text-shadow: none !important;
}
::-moz-selection { /* For Firefox */
	background: var(--y1) !important;
	color: var(--d0) !important;
	text-shadow: none !important;
}
@media (-webkit-touch-callout: default) { /* For Safari and Chrome on iOS */
	::selection {
		background: var(--y1) !important;
		color: var(--d0) !important;
		text-shadow: none !important;
	}
}

::-webkit-scrollbar { /* Scrollbar Track */
	width: 5px;
	height: 5px;
}
::-webkit-scrollbar-thumb { /* Scrollbar Thumb (draggable part) */
	background: var(--y1) !important;
	background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--y2) !important;
}
::-webkit-scrollbar-track { /* Scrollbar Track (background) */
	background: var(--d0) !important;
}
::-webkit-scrollbar-corner { /* Scrollbar Corner (where horizontal & vertical meet) */
	background: transparent;
}

.button {
	width: fit-content;
	background-color: var(--d5);
	color: var(--y1) !important;
	font: 800 10px var(--inter);
	letter-spacing: 1px;
	outline-offset: 1px;
	outline: solid 1px var(--d5);
	padding: 15px;
	place-content: center;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	margin: 5px;
	user-select: none;
	border: transparent;
}
.button a {
	color: var(--y1) !important;
}
.button:hover {
	background-color: var(--y1);
	color: var(--d3) !important;
	outline: solid 1px var(--y1);
}

:where(figure) {
	margin: auto;
}

.bg {
	position: fixed;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	mix-blend-mode: multiply;
}
.bg img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.window {
	background-image: var(--bg1);
	background-color: var(--y1);
	background-blend-mode: multiply;
	background-attachment: fixed;
	background-position-x: 72%;
	position: absolute;
	width: 100%;
	height: 100%;
}

.blank: {
	height: 1px;
}

.modal {
	display: none;
	text-align: center;
	text-align: -webkit-center;
	position: fixed;
	z-index: 9;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.7);
	align-content: center;
}

.modalContent {
	margin: 7px;
	padding: 25px;
	width: auto;
	max-width: 500px;
	text-align: center;
	position: relative;
	outline-offset: 1px;
	background-color: var(--d1);
	outline: solid 1px var(--d1);
}
.modalContent h3 {
	width: fit-content;
	margin: 10px auto;
	color: var(--l3);
	user-select: none;
	font: 400 1.5rem var(--inter);
	padding: 0 !important;
}

.closeModal {
	color: var(--l5) !important;
	position: absolute;
	top: 10px;
	right: 20px;
	transition: 0.3s;
	font: 800 28px var(--inter);
	user-select: none;
	pointer-events: auto;
}
.closeModal:hover {
	color: var(--l3) !important;
}

/* Header */
#header {
	position: sticky;
	top: 0;
	grid-template-columns: 1fr 1fr;
	height: fit-content;
	width: 100%;
	background: var(--d0);
	justify-content: center;
	align-content: center;
	text-align: center;
	padding: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	z-index: 100;
}
#header > :first-child {
	justify-self: start;
}
#header figure {
	width: auto;
	height: 90px ;
	transition: filter 0.3s ease !important;
}
#header figure img {
	height: inherit;
	filter: invert(61%) sepia(9%) saturate(1983%) hue-rotate(4deg) brightness(95%) contrast(89%);
}
#header > :last-child {
	justify-self: end;
	gap: 15px;
	flex-wrap: nowrap;
}
#header.hide {
    transform: translateY(-100%);
}
#header .button {
	display: grid;
	grid-template-columns: 24px 1fr;
	align-items: center;
	width: 80px;
	height: 15px;
	padding: 10px;
	justify-items: start;
	gap: 5px;
	background: var(--d3);
	outline-color: var(--d3);
}
#header .button:hover {
	background: var(--y1);
	outline-color: var(--y1);
}
#header object {
	height: 1rem;
	pointer-events: none;
	width: 100%;
}
#header p:hover object {
	filter: brightness(0);
}
#header p {
	margin: 5px;
}
#header h2 {
	font: 500 2rem var(--croissant);
	color: var(--y1);
}

/* Footer */
footer {
	position: relative !important;
	background: var(--d0) !important;
	padding: 25px 10px !important;
	text-align: center !important;
}
footer a {
	color: var(--l5) !important;
}
footer a:hover {
	color: var(--l3) !important;
}

/* Cookie */
#cookieConsentBanner {
    display: none; /* Initially hidden by script, shown if consent not given */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--d3, #2e2e2e); /* Using your theme variables with fallbacks */
    color: var(--l3, #cccccc);
    padding: 15px;
    text-align: center;
    z-index: 1000; /* Ensure it's on top of other content */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    font-family: var(--inter, sans-serif); /* Assuming --inter is defined */
    box-sizing: border-box; /* Good practice */
}

#acceptCookieButton {
    background-color: var(--y1);
    color: var(--d0);
}
#acceptCookieButton:hover {
    background-color: var(--y2);
	outline: none !important;
}

#declineCookieButton {
    background-color: var(--l5);
    color: var(--d0);
	outline: none !important;
}
#declineCookieButton:hover {
    background-color: var(--l4);
}

/* Reading settings */
#readingSettingsModal .modalContent .settingRow {
    margin-bottom: 18px;
    text-align: left;
}

#readingSettingsModal .modalContent .settingRow .settingLabelWithValue {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; 
}

#readingSettingsModal .modalContent .settingRow label {
    color: var(--l3);
    font-size: 0.9rem;
    margin-right: auto; 
}

#readingSettingsModal .modalContent .settingRow select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    background-color: var(--d2);
    color: var(--l3);
    border: 1px solid var(--d2);
    outline-offset: 1px;
    border-radius: 0px;
    font-family: var(--inter, sans-serif);
    font-size: 0.9rem;
}
#readingSettingsModal .modalContent .settingRow select:focus {
    border-color: var(--y1);
    outline: 1px solid var(--y1);
}

#readingSettingsModal .modalContent .settingRow input[type="range"] {
    width: 100%; 
    vertical-align: middle;
    cursor: pointer;
    margin-top: 2px; 
}

#readingSettingsModal .modalContent .settingRow .settingValueDisplay {
    font-size: 0.85rem;
    color: var(--l2);
    text-align: right; 
    min-width: 55px; 
}

/* Novel chapter */
.chapterSection {
	grid-template-columns: 1fr clamp(200px,100%,1000px) 1fr !important;
	gap: 0;
}

.chapter {
	background: var(--d0);
	padding: 15px;
	grid-column: inherit !important;
	grid-row: inherit !important;
	place-self: center !important;
}
.chapter .wp-block-separator {
	max-width: 90%;
	color: var(--l1)
}

.chapterTitle {
	background: var(--d2);
	margin: 0 0 25px 0;
	text-align: center;
	padding: 10px;
	font-size: 1.7rem;
	min-height: 108px;
	align-content: center;
	text-transform: capitalize;
	outline: solid 2px var(--d2);
	outline-offset: 2px;
}

.chapterText {
	background: var(--d2);
	padding: 0.1rem 1rem;
	outline: solid 2px var(--d2);
	outline-offset: 2px;
}
.chapterText p {
	font-size: 1.1em;
	line-height: 1.4em;
	margin: 1em 0;
}
.chapterText code {
	display: inline-block;
	width: 100%;
	text-align: center;
	font-family: inherit;
}
.chapterText mark {
	background: none;
	font-weight: bold;
	font-size: 1.5rem !important;
}
.chapterText sup {
	position: relative;
	top: -0.5em;
	line-height: 0;
	vertical-align: baseline;
}
.chapterText figure {
	text-align: center
}
.chapterText img {
	width: auto;
	height: auto;
	min-width: 80%;
}

.author {
	padding: 15px;
	margin: 1em 0;
	background: var(--d1);
}
.author h2 {
	margin: 0;
}
.author p {
	font-style: italic;
}

.translator h2 {
	margin: 0;
}
.translator li {
	list-style: none;
	padding: 0;
}
.translator ul {
	padding: 0;
}
.translator #caption {
	margin-top: 0;
	text-align: center;
}

.nav {
	justify-items: center;
	grid-template-columns: 1fr auto 1fr !important;
	gap: 15px;
}
.nav .button {
	font-size: 13px;
	padding: 5px 25px;
}
#nav-prev {
	justify-self: right;
}
#nav-toc {
}
#nav-next {
	transform: scaleX(-1);
	justify-self: left;
}

/* Social */
.social {
	width: 100%;
	max-width: 1000px;
	margin: 15px auto;
	padding: 0 15px;
	grid-column: inherit !important;
	grid-row: inherit !important;
}

.socialAvatar {
	width: 64px;
	height: 64px;
	min-width: 64px;
	min-height: 64px;
}

#kofi {
	background: white;
	max-width: 1000px;
	gap: 5px;
	height: 165px;
	padding: 25px;
	position: relative;
	margin-bottom: 25px;
	background-image: url("https://thelazycat.xyz/wp-content/uploads/2025/05/bg-asset-1.webp");
	background-repeat: no-repeat;
	background-position: left;
	background-size: 350px;
	background-position-y: 90%;
	background-blend-mode: luminosity;
}
#kofi .firstLine {
	color: #ff5e5b;
	font-size: 1.5rem;
	font-weight: 800;
	text-shadow:
		2px 2px 0 white,
		-2px 2px 0 white,
		2px -2px 0 white,
		-2px -2px 0 white;
}
#kofi .secondLine {
	color: #ff5e5b;
	font-style: italic;
	font-weight: 800;
	text-shadow:
		2px 2px 0 white,
		-2px 2px 0 white,
		2px -2px 0 white,
		-2px -2px 0 white;
}
#kofi .button {
	position: absolute;
	right: 15px;
	background-color: white;
	color: #ff5e5b !important;
	outline: solid 1px #ff5e5b;
}
#kofi .button:hover {
	background-color: #ff5e5b;
	color: white !important;
	outline: solid 1px #ff5e5b;
}
#kofiLogo {
	position: absolute;
	left: 10px;
	top: 10px;
}
#kofiLogo img {
	height: 25px;
}

#discord {
	background: #5865f2;
	max-width: 1000px;
	gap: 5px;
	height: 165px;
	padding: 25px;
	position: relative;
	margin-bottom: 25px;
	background-image: url("https://thelazycat.xyz/wp-content/uploads/2025/05/bg-asset-2.webp");
	background-repeat: no-repeat;
	background-position-x: -25px;
	background-position-y: 80%;
	background-size: 500px;
	background-blend-mode: overlay;
}
#discord .firstLine {
	color: white;
	font-size: 1.5rem;
	font-weight: 800;
	text-shadow:
		2px 2px 0 rgb(88,101,242,1),
		-2px 2px 0 rgb(88,101,242,1),
		2px -2px 0 rgb(88,101,242,1),
		-2px -2px 0 rgb(88,101,242,1);
}
#discord .secondLine {
	color: white;
	font-style: italic;
	font-weight: 800;
	text-shadow:
		2px 2px 0 rgb(88,101,242,1),
		-2px 2px 0 rgb(88,101,242,1),
		2px -2px 0 rgb(88,101,242,1),
		-2px -2px 0 rgb(88,101,242,1);
}
#discord .button {
	position: absolute;
	right: 15px;
	background-color: #5865f2;
	color: white !important;
	outline: solid 1px white;
}
#discord .button:hover {
	background-color: white;
	color: #5865f2 !important;
	outline: solid 1px white;
}
#discordLogo {
	position: absolute;
	left: 10px;
	top: 10px;
}
#discordLogo img {
	height: 25px;
}

/* Comments */
.blockSection {
	grid-template-columns: 1fr clamp(200px,100%,1000px) 1fr !important;
	gap: 0;
	justify-items: center;
}

.middleSection {
	width: 100%;
	max-width: 970px;
	gap: 0;
	background: var(--d1);
	justify-content: center;
	border-bottom: 10px solid var(--d0);
	grid-column: inherit !important;
	grid-row: inherit !important;
}

.sectionTitle {
	width: 100%;
	padding: 50px 0;
	border-bottom: 0px;
	position: relative;
}
.sectionTitle h1 {
	position: relative;
	letter-spacing: 2px;
	text-transform: uppercase;
	font: 400 2rem var(--kanit);
	padding: 10px 20px;
	background: var(--d1);
	margin: auto;
	width: fit-content;
	z-index: 2;
}
.sectionTitle .window {
	top: 0;
	height: 100% !important;
	z-index: 1;
}
.sectionTitle #chapters {
	background-image: var(--bg2);
}

.middleSection #comments {
	padding: 0 16px;
	width: 100%;
}

.userComment {
	background: var(--d2);
	padding: 10px;
	gap: 5px;
	margin: 0 0 10px 0;
	outline-offset: 2px;
	outline: 1px solid var(--d2);
	flex-wrap: nowrap !important;
}
@media (max-width: 781px) {
	.userComment.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
		flex-basis: inherit !important;
		flex-grow: inherit !important;;
	}
}
.userComment > :first-child {
	min-width: 40px;
}
.userComment:hover {
	background: var(--d4);
	outline-color: var(--d4);
}
.userComment .wp-block-comment-author-name {
	color: var(--y1);
}
.userComment .wp-block-comment-date {
	color: var(--l4);
}
.userComment .wp-block-comment-content {
	color: var(--l3);
	margin: 5px 0;
	padding: 0 0 0 10px;
}
.userComment .wp-block-comment-content p, h1, h2, h3, h4, h5, h6 {
	margin: 10px 0;
	font-weight: 300
}
.userComment .wp-block-comment-reply-link {
	padding: 5px;
	width: 50px;
	font: 400 0.6rem var(--inter) !important;
	text-transform: capitalize;
	margin: 0;
}
.userComment .wp-block-comment-reply-link:hover a {
	color: var(--d2) !important;
}

.comment-respond #reply-title{
	margin: 20px 0 0 0;
	padding: 0;
	font: 300 1rem var(--inter);
	user-select: none;
}

.comment-form-author input placeholder {
	user-select: none
}

input::placeholder,
textarea::placeholder {
	user-select: none;
}

form input,
form textarea,
form input,
form .button {
	border-radius: 0px !important;
	border: transparent !important;
	margin: 0px !important;
	width: 100% !important;
	background-color: var(--d2) !important;
	outline: solid 1px var(--d2) !important;
	color: var(--l3) !important;
	outline-offset: 1px !important;
	font: 300 1rem var(--inter) !important;
}
form .button {
	font: 400 1rem var(--inter) !important;
	text-transform: capitalize !important;
	padding: 10px !important;
	color: var(--l3) !important;
}
form input:hover,
form textarea:hover,
form input:hover,
form .button:hover{
	background-color: var(--d4) !important;
	outline: solid 1px var(--d4) !important;
	color: var(--l3) !important; 
}

textarea {
	resize: none;
	max-height: 100px;
}

.form-submit #submit {
	padding: 10px;
	font: 400 1rem var(--inter) !important;
}

.gravatars {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.gravatarOption {
	pointer-events: auto;
	width: 96px;
	height: 96px;
	transition: transform 0.2s ease;
}
.gravatarOption:hover {
	transform: scale(1.1);
}

/* Sweet Alert */
.swal2-modal {
	background: var(--d2);
	border-radius: 0;
	outline-offset: 1px !important;
	outline: solid 1px var(--d2) !important;
}

.swal2-modal h2 {
	color: var(--l2)
}

.swal2-modal .swal2-html-container {
	color: var(--l4)
}

.swal2-icon {
	border-color: var(--y1) !important;
}

.swal2-x-mark-line-left,
.swal2-x-mark-line-right {
	background-color: var(--y1) !important;
}

.swal2-confirm {
	box-shadow: none !important;
	width: fit-content;
	background: var(--d5) !important;
	color: var(--y1) !important;
	font: 800 10px var(--inter) !important;
	letter-spacing: 1px !important;
	outline-offset: 1px !important;
	outline: solid 1px var(--d5) !important;
	padding: 15px !important;
	place-content: center !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	margin: 5px !important;
	user-select: none !important;
	border: transparent !important;
	border-radius: 0 !important;
	cursor: none;
}
.swal2-confirm:hover {
	box-shadow: none !important;
	background-color: var(--y1) !important;
	color: var(--d3) !important;
	outline: solid 1px var(--y1) !important;
}

/* Responsiveness */
@media (min-width: 1921px) {
	.window {
		background-position-x: -200px;
		background-size: cover;
	}
}

@media (max-width: 799px) {
	.chapter {
		padding: 15px 5px;
	}
	.social {
		padding: 0 5px;
	}
	#kofi,
	#discord {
		padding: 0 5px;
		flex-wrap: nowrap;
	}
	#kofi .button,
	#discord .button {
		right: 5px;
	}
	#kofiLogo {
		position: absolute;
		left: 5px;
	}
	#header {
		grid-template-columns: 1fr;
		gap: 10px;
		padding-top: 0;
	}
	#header figure {
		height: 75px;
	}
	#header > :first-child,
	#header > :last-child {
		justify-self: center;
	}
	#header h2 {
		line-height: 1em;
	}
	#header .button {
		width: 20px;
	}
	#header .button span{
		display: none;
	}
	#header .button {
		display: grid;
		grid-template-columns: 1fr;
	}
	.chapterText {
		padding: 0.1rem 0.2rem;
	}
	.middleSection #comments {
		padding: 0 6px;
	}
	.wp-block-comment-template ol {
		padding-left: 0.5rem;
	}
}

@media (max-width: 499px) {
	.chapterTitle {
		font-size: 1.2rem;
	}
	.nav .button {
		padding: 5px 15px;
		height: 19px;
	}
	#header h2 {
		font-size: 1.5em
	}
	#header > :last-child {
		gap: 5px;
	}
	.modalContent {
		padding: 10px;
	}
	.modalContent h3 {
		font-size: 1rem;
	}
	.gravatarOption {
		width: 65px;
		height: 65px;
	}
	.gravatars {
		gap: 8px;
	}
	.userComment .wp-block-comment-content p, h1, h2, h3, h4, h5, h6 {
		font-size: 0.8rem;
	}
}