/* Reset default styles */
			* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			}
			/* Body styling */
			body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
			display: flex;
			flex-direction: column;
			height: 100vh;
			overflow: hidden; /* Prevent body from scrolling */
			}
			/* Header (optional) */
			.header {
			padding: 15px;
			background-color: #fff;
			text-align: center;
			color: #ff5eec;
			font-size: 1.6em;
			font-weight: 700;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
			flex-shrink: 0; /* Prevent header from shrinking */
			}
			/* Main content area */
			.content {
			flex: 1;
			overflow-y: auto;
			height: 80vh;
			padding: 20px 20px 60px 20px;
			}
			/* cta */
			.cta {
			display: block;
			font-size: 0.8em;
			background-color: rgba(135, 135, 135, 0.23);
			margin-top: 5px;
			text-align: center;
			padding: 5px;
			width: intrinsic;
			border: 2px solid rgba(135, 135, 135, 0.23);
			border-radius: 20px; 
			float: left;
			margin-right: 12px;
			}
			.ctaaccept {
			display: block;
			font-size: 0.8em;
			background-color: rgba(23, 132, 23, 0.06);
			margin-top: 5px;
			text-align: center;
			padding: 5px;
			width: intrinsic;
			border: 2px solid rgba(23, 132, 23, 1);
			border-radius: 20px; 
			float: left;
			margin-right: 12px;
			color: #000000;
			}
			.ctareject {
			display: block;
			font-size: 0.8em;
			background-color: rgba(133, 22, 24, 0.06);
			margin-top: 5px;
			text-align: center;
			padding: 5px;
			width: intrinsic;
			border: 2px solid rgba(133, 22, 24, 1);
			border-radius: 20px; 
			float: left;
			margin-right: 12px;
			color: #000000;
			}
			/* Timestamp styling */
			.timestamp {
			display: block;
			font-size: 0.8em;
			background-color: rgba(135, 135, 135, 0.23);
			margin-top: 5px;
			text-align: center;
			padding: 5px;
			width: intrinsic;
			border: 1px solid #888888;
			border-radius: 20px;
			margin-left: auto;
			}
			/* Tab bar */
			.tab-bar {
			display: flex;
			justify-content: space-around;
			background-color: #13459c;
			border-top: 1px solid #ccc;
			padding: 10px 0;
			position: fixed;
			bottom: 0;
			width: 100%;
			box-shadow: 0 -1px 4px rgba(0,0,0,0.1);
			}
			/* Tab buttons */
			.tab-button {
			flex: 1;
			text-align: center;
			padding: 10px 0;
			cursor: pointer;
			color: #b6c8fc;
			font-size: 0.9em;
			transition: background-color 0.3s, color 0.3s;
			}
			.tab-button.active {
			color: #ffffff;
			border-top: 2px solid #fff;
			}
			/* Content sections */
			.tab-content {
			display: none;
			}
			.tab-content.active {
			display: block;
			padding-bottom: 25vh;
			}
			/* User Profile Styling */
			.profile {
			text-align: center;
			padding-bottom: 30vh;
			}
			.profile img {
			width: 130px;
			height: 130px;
			object-fit: cover;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);            
			border: 6px solid transparent;
			background: linear-gradient(-45deg, #ff5eec, #FEB47B, #ff5eec);
			border-radius: 50%;
			text-align: center;
			display: inline-block;
			}
			.profile img:hover {
			transform: scale(1.95);
			margin-top: 86px;
			}
			.profile h2 {
			margin-bottom: 10px;
			color: #333;
			}
			.profile p {
			color: #777;
			line-height: 140%;
			}
			.bar {
			width: 100%;
			display: block;
			border: 1px solid black;
			background-color: rgba(128, 126, 126, 0.21);
			border-radius: 25px;
			height: 26px;
			max-height: 26px;
			}
			.progress {
			background-color: #20e24e;
			display: block;
			height: 24px;
			max-height: 24px;
			padding-top: 3px;
			border-radius: 25px;
			border-right: 3px solid #a4a1a1;
			color: #000000;
			}
			/* Posts Feed Styling */
			.feed {
			display: flex;
			flex-direction: column;
			gap: 15px;
			padding-bottom: 120px;
			}
			.post {
			background-color: #ffffff;
			padding: 15px;
			border-radius: 8px;
			box-shadow: 0 1px 3px rgba(0,0,0,0.1);
			margin-top: 15px;
			}
			.post .post-header {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			}
			.post .post-header img {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			object-fit: cover;
			margin-right: 10px;
			}
			.post .post-header .username {
			font-weight: bold;
			color: #333;
			}
			.infraction {
			background: rgba(255, 0, 0, 0.03);
			border: dotted 4px  rgba(255, 0, 0, 0.13);
			padding: 14px;
			font-size: 90%;
			}
			.post .post-content {
			color: #555;
			}
			.post .post-responses {
			margin-top: 10px;
			padding-left: 50px;
			border-left: 2px solid #f2f2f2;
			}
			.post .post-responses .response {
			background-color: #f9f9f9;
			padding: 8px;
			border-radius: 6px;
			margin-bottom: 5px;
			color: #666;
			}
			.gold,
			.gold strong {
			color: #b89733 !important;
			}
			.admin,
			.admin strong {
			color: #ef1010 !important;
			}
			.gold::after {
			content: ' 🔶'; /* Adds a space before the emoji for separation */
			font-size: 1em; /* Adjusts the size of the emoji relative to the text */
			}
			.admin::after {
			content: ' 🔺'; /* Adds a space before the emoji for separation */
			font-size: 1em; /* Adjusts the size of the emoji relative to the text */
			}
			.locked {
			border: 1px red dashed;
			}
			/* Rules Styling */
			.rules {
			color: #555;
			line-height: 140%;
			padding-bottom: 30vh;
			}
			.rules ul, .rules ol {
			padding-left: 28px;
			}
			/* Premium Content Styling */
			.premium {
			background-color: #ffe0b2;
			padding: 15px;
			border-radius: 8px;
			color: #333;
			margin-top: 15px;
			}
			.premium ul {
			margin-left: 24px;
			}
			
			ol, ul {
				padding-bottom: 24px;
			}
			/* spoiler */
			.spoiler {
				display: none;
				visibility: hidden;
			}
			
			.spoiler::after {
			font-size: 1em; /* Adjusts the size of the emoji relative to the text */
			}
			
			.response:hover .spoiler {
				visibility: visible !important;
				display: inline !important;
			}
			
			/* Responsive adjustments */
			@media (min-width: 600px) {
			.content,
			.tab-bar,
			.phone {
			max-width: 400px;
			margin: 0 auto;
			}
			}