html {
	background-color: white !important;
}

body {
	overflow: hidden;
}

#overlay {
	position: fixed;
	/* Sit on top of the page content */
	display: none;
	/* Hidden by default */
	width: 100%;
	/* Full width (cover the whole page) */
	height: 100%;
	/* Full height (cover the whole page) */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, .5);
	/* Black background with opacity */
	z-index: 2;
	/* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer;
}

#overlay iframe {
	justify-self: center;
	z-index: 10;
	max-width: 80%;
	max-height: 80%;
	margin-top: 10%;
}

:root {
	--site_width: 100% !important;
}

.disclaimer {
	display: flex;
	flex-direction: row;
	justify-content: center;
	color: #33a9ff;
}

.threads {
	margin-top: 24px;
}

#daily-fix-container .dfx-title {
	margin-top: clamp(10px, 2.5vh, 30px);
	margin-bottom: clamp(15px, 3vh, 40px);
	font-size: clamp(28px, 8.5vw, 66px);
	line-height: 1.25;
}

#daily-fix-container  h1 {
	font-size: 64px;
	line-height: 1;
	font-family: "Antonio";
}

#daily-fix-container .the-dfx h1 {
	font-size: clamp(64px, 10vw, 124px);
	line-height: 1;
	font-family: "Antonio";
}

.article-link {
	background-color: #0085e5;
	color: white;
	padding: 14px 20px;
	font-size: 16px;
	margin-top: 20px auto;
}

.archiveRow {
	justify-content: center;
	margin-top: 120px;
}

.archiveBtn {
	background-color: transparent;
	color: #000;
	border: 2px solid black;
	padding: 14px 20px;
	font-family: "Antonio";
	font-weight: 700;
	font-size: 24px;
	align-self: center;
}

.custom-row {
	display: flex;
	flex-wrap: wrap;
}

.commentBtnWrapper {
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 0;
	margin-right: 0;
	gap: 10px;
}

.non-body-img {
	position: relative;
}

.commentBtnWrapper, .commentBtn {
	align-content: center;
	height: fit-content;
}

.comment-line {
	justify-content: space-between;
	width: 100%;
	margin-top: clamp(32px, 5vh, 50px);
}

#daily-fix-container .date-str {
	font-family: "Plus Jakarta Sans" !important;
	color: #33a9ff !important;
	line-height: 24px;
	margin: 0;
}

#daily-fix-container .dfx-date-nav-btn {
	height: 48px;
	width: 48px;
	margin-top: 10px;
	align-self: center;
	background-color: transparent;
	border: 1px solid #000;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	color: black;
	cursor: pointer;
}

#daily-fix-container .dfx-date-nav-btn[aria-disabled='true'] {
	opacity: 25%;
	cursor: default;
}

#daily-fix-container .dfx-date {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1 !important;
	color: #33a9ff !important;
	font-family: "Antonio";
	font-size: clamp(50px, 6vh, 72px);
}

#daily-fix-container .day-nav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	margin-bottom: clamp(10px, 1.5vh, 30px);
}

#daily-fix-container {
	padding-top: clamp(80px, 8vh, 150px);
	padding-left: clamp(80px, 7vw, 150px);
	padding-right: clamp(80px, 7vw, 150px);
	align-self: center;
	margin-left: auto;
	margin-right: auto;
}

#bodyTabPhoto {
	width: clamp(80px, 8vw, 125px);
}

.body-img-header {
	justify-content: center;
	gap: clamp(20px, 4vw, 4rem);
	flex-wrap: nowrap !important;
}

.mobile-img-header {
	display: none;
	justify-content: center;
	gap: 4rem;
}

.header {
	display: flex;
	min-height: 600px;
	justify-content: space-between;
}

.left-column {
	flex: 0 0 30%;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
	position: relative;
}

.right-column {
	flex: 0 0 60%;
	align-content: flex-start;
	justify-content: space-between;
}

.right-column-belly {
	flex: 0 0 27%;
}

.right-column-brain {
	flex: 0 0 50%;
	justify-content: space-between;
}

.right-column-brain img {
	aspect-ratio: 16/9;
	object-fit: cover;
}

.img-fluid {
	aspect-ratio: 16/9;
	object-fit: cover;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%;
}

.nav-tabs {
	list-style-type: none;
	padding: 0;
	display: flex;
	width: 100%;
	gap: clamp(10px, 2vw, 32px);
	justify-content: space-between;
	margin-top: 10px;
	margin-bottom: 10px;
}

.nav-tabs .nav-item {
	cursor: pointer;
	font-family: Antonio;
	font-weight: 700;
	width: 100%;
	text-transform: uppercase;
}

.nav-tabs .nav-link, .tab-pane .nav-link {
	padding: clamp(8px, 1.5vh, 30px) clamp(10px, 1.3vw, 42px);
	border: 2px solid #002c4d;
	background-color: #000;
	color: white;
	font-size: clamp(22px, 6vw, 50px);
	line-height: .9;
	display: block;
	text-align: center;
	width: 100%;
}

.nav-tabs .nav-link.active {
	background-color: #0085e5;
	color: white;
}

.tab-content {
	margin-top: 20px;
	justify-items: center;
}

.tab-pane {
	display: none;
	width: 100%;
}

.tab-pane.active {
	display: block;
}

.scale-col {
	flex: 0 0 30%;
}

.body-col {
	flex: 0 0 60%;
}

#mod-watch-btn {
	position: absolute;
	top: 50%;
	/* position the top  edge of the element at the middle of the parent */
	left: 50%;
	/* position the left edge of the element at the middle of the parent */
	transform: translate(-50%, -50%);
	font-size: 6rem;
}

#mod-dfx-title-wrapper, #art-dfx-title-wrapper, #body-dfx-title-wrapper, #mod-exc-wrapper, #art-exc-wrapper, #body-exc-wrapper {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

#mod-dfx-title-wrapper, #art-dfx-title-wrapper, #body-dfx-title-wrapper {
	margin-bottom: clamp(10px, 1vh, 50px);
}

#mod-exc-wrapper, #art-exc-wrapper, #body-exc-wrapper {
	font-size: clamp(15px, 2vh, 24px);
}

#mod-exc-wrapper p, #art-exc-wrapper p, #body-exc-wrapper p {
	margin: 0;
}

#body-exc-wrapper {
	-webkit-line-clamp: 12;
}

@media screen and (min-width: 400px) {
	#body-exc-wrapper {
		-webkit-line-clamp: 12;
	}
}

.fa-play-circle {
	color: white;
}

#mod-watch-btn a {
	color: #33a9ff;
}

#bellyModalPhoto {
	align-self: center;
}

.comment {
	margin-bottom: 24px;
}

.comment-content {
	margin-top: 24px;
}

.comment-name {
	color: #0067b2;
}

.reply-section {
	margin-top: 24px;
	margin-bottom: 24px;
}

.reply-btn {
	margin-top: 24px;
}

.liked {
	color: #0067b2;
}

.comment-name {
	margin-bottom: 24px;
}

.replies {
	padding-left: 24px;
}

.reply-comment {
	margin-top: 24px !important;
}

.toggle-replies-btn, .reply-btn, .like-btn {
	background-color: transparent;
	padding: 0;
	border: 0;
	font-size: 20px;
	margin-right: 20px;
}

.reply-btn:hover, .like-btn:hover {
	color: #0085e5;
	cursor: pointer;
}

#commentContainer {
	width: clamp(800px, 68vw, 1300px);
	margin-left: auto;
	margin-right: auto;
}

#commentHeader {
	padding: 0px 100px;
	margin-bottom: 48px;
	margin-top: 64px;
}

#commentHeader * {
	color: #0085e5 !important;
}

#commentBody {
	background-color: rgba(0, 133, 229, .1);
	padding: 100px;
	display: flex;
	flex-direction: column;
}

.addCommentBtn {
	padding: 14px 20px;
	background-color: #0067b2;
	color: white;
	font-size: 24px;
	font-family: "Antonio";
	font-weight: 700;
	width: fit-content;
	margin-top: 40px;
}

.submitReplyBtn {
	padding: 14px 20px;
	background-color: #0067b2;
	color: white;
	font-size: 24px;
	font-family: "Antonio";
	font-weight: 700;
	width: fit-content;
	border: 0px;
}

.commentInput {
	margin-bottom: 40px;
}

.nav-tabs a.nav-link[aria-disabled="true"] {
	pointer-events: none;
	/* Disable interaction */
	color: black;
	/* Change text color */
	cursor: not-allowed;
	/* Change cursor to not-allowed */
	opacity: .6;
	/* Optional: reduce opacity */
	background-color: gray;
}

#the-daily-fix-parent-overlay {
	pointer-events: none;
}

@media screen and (max-width: 992px) {
	.mobile-img-row {
		display: flex;
		flex-direction: row;
		/* Keep items in a row */
		justify-content: center;
		/* Align items to the start */
		align-items: flex-start;
		padding-left: 2.5%;
		padding-right: 2.5%;
		/* Vertically align image and text */
		gap: 20px;
	}
	
	#daily-fix-container {
		padding-left: 0px;
		padding-right: 0px;
	}
	
	/* Image should grow to fill remaining space */
	.mobile-img-row img {
		max-width: 100%;
		/* Prevent image from exceeding container width */
		height: auto;
		/* Maintain aspect ratio */
		object-fit: contain;
		/* Ensure image scales appropriately */
		flex-grow: 1;
		/* Allow image to grow to fill remaining space */
		flex-shrink: 1;
		/* Allow image to shrink if necessary */
		max-height: 100%;
	}
	
	/* Adjust header text */
	#daily-fix-container .mobile-img-row h1 {
		font-size: clamp(30px, 5vw, 42px);
		line-height: 1;
		/* Adjust font size for responsiveness */
		white-space: nowrap;
		/* Prevent text from wrapping */
		margin: 0;
		/* Remove default margin */
		flex-shrink: 0;
	}
	
	.right-column-belly, .right-column-brain, .left-column, .scale-col, .body-col {
		flex: 0 0 100%;
		padding-left: 0%;
		padding-right: 0%;
		margin-top: clamp(32px, 6vh, 48px);
		margin-top: 0;
	}
	
	#tabExcerpt {
		padding-bottom: 20px;
	}
	
	.header {
		flex-direction: column;
		justify-content: flex-start;
		margin-bottom: .8rem;
	}
	
	.mobile-img-header {
		display: flex;
	}
	
	#daily-fix-container {
		padding-top: .75rem;
		padding-left: 0;
		padding-right: 0;
		width: 95%;
	}
	
	.body-img-header {
		display: none !important;
	}
	
	#bodyTabPhoto {
		max-width: 65%;
	}
	
	#commentBody {
		padding: 15px;
	}
	
	#commentContainer {
		min-width: 100%;
		justify-self: center;
		max-width: 120%;
		margin-left: -10%;
		margin-right: -10%;
	}
	
	#commentHeader {
		padding: 0 5%;
		margin-top: 20px;
	}
	
	.archiveRow {
		margin-top: 20px;
	}
}