@tailwind base;
@tailwind components;
@tailwind utilities;
/*# TAILWIND #*/
@import "tailwindcss";

.subheader {
  @apply text-xs font-medium mt-0.5 mb-2;
}

h1 + .subheader,
h2 + .subheader,
h3 + .subheader,
h4 + .subheader,
h5 + .subheader,
h6 + .subheader {
  @apply mt-0;
}


/*# CUSTOM THEME #*/
.btn-primary {
	--bs-btn-bg: #A52DC0;
	--bs-btn-border-color: #A52DC0;
	--bs-btn-hover-bg: #bc4bd5;
	--bs-btn-hover-border-color: #bc4bd5;
	--bs-btn-active-bg: #812397;
	--bs-btn-active-border-color: #812397;
}

.btn-success {
	--bs-btn-bg: #3DBF2C;
	--bs-btn-border-color: #3DBF2C;
	--bs-btn-hover-bg: #59d549;
	--bs-btn-hover-border-color: #59d549;
	--bs-btn-active-bg: #309622;
	--bs-btn-active-border-color: #309622;
}

.btn-info {
	--bs-btn-bg: #2CBDBF;
	--bs-btn-border-color: #2CBDBF;
	--bs-btn-hover-bg: #49d3d5;
	--bs-btn-hover-border-color: #49d3d5;
	--bs-btn-active-bg: #229496;
	--bs-btn-active-border-color: #229496;
}

.btn-warning {
	--bs-btn-bg: #ECCF3E;
	--bs-btn-border-color: #ECCF3E;
	--bs-btn-hover-bg: #f1db6c;
	--bs-btn-hover-border-color: #f1db6c;
	--bs-btn-active-bg: #e1bf16;
	--bs-btn-active-border-color: #e1bf16;
}

.btn-danger {
	--bs-btn-bg: #BF2C2C;
	--bs-btn-border-color: #BF2C2C;
	--bs-btn-hover-bg: #d54949;
	--bs-btn-hover-border-color: #d54949;
	--bs-btn-active-bg: #962222;
	--bs-btn-active-border-color: #962222;
}

.btn-outline-primary {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: #A52DC0;
	--bs-btn-color: #A52DC0;
	--bs-btn-hover-bg: #bc4bd5;
	--bs-btn-hover-border-color: #bc4bd5;
	--bs-btn-active-bg: #812397;
	--bs-btn-active-border-color: #812397;
}

.btn-outline-success {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: #3DBF2C;
	--bs-btn-color: #3DBF2C;
	--bs-btn-hover-bg: #59d549;
	--bs-btn-hover-border-color: #59d549;
	--bs-btn-active-bg: #309622;
	--bs-btn-active-border-color: #309622;
}

.btn-outline-info {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: #2CBDBF;
	--bs-btn-color: #2CBDBF;
	--bs-btn-hover-bg: #49d3d5;
	--bs-btn-hover-border-color: #49d3d5;
	--bs-btn-active-bg: #229496;
	--bs-btn-active-border-color: #229496;
}

.btn-outline-warning {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: #ECCF3E;
	--bs-btn-color: #ECCF3E;
	--bs-btn-hover-bg: #f1db6c;
	--bs-btn-hover-border-color: #f1db6c;
	--bs-btn-active-bg: #e1bf16;
	--bs-btn-active-border-color: #e1bf16;
}

.btn-outline-danger {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: #BF2C2C;
	--bs-btn-color: #BF2C2C;
	--bs-btn-hover-bg: #d54949;
	--bs-btn-hover-border-color: #d54949;
	--bs-btn-active-bg: #962222;
	--bs-btn-active-border-color: #962222;
}

.table-primary {
	--bs-table-color: #fff;
	--bs-table-bg: #A52DC0;
	--bs-table-border-color: #812397;
	--bs-table-striped-bg: #bc4bd5;
	--bs-table-striped-color: #fff;
	--bs-table-active-bg: #701e82;
	--bs-table-active-color: #fff;
	--bs-table-hover-bg: #b436d0;
	--bs-table-hover-color: #fff;
	color: var(--bs-table-color);
	background-color: var(--bs-table-bg);
	border-color: var(--bs-table-border-color);
}

.table-primary tbody tr:nth-of-type(odd) {
	background-color: var(--bs-table-striped-bg);
	color: var(--bs-table-striped-color);
}

.table-primary tbody tr.active {
	background-color: var(--bs-table-active-bg);
	color: var(--bs-table-active-color);
}

.table-primary tbody tr:hover {
	background-color: var(--bs-table-hover-bg);
	color: var(--bs-table-hover-color);
}

.table-success {
	--bs-table-color: #fff;
	--bs-table-bg: #3DBF2C;
	--bs-table-border-color: #309622;
	--bs-table-striped-bg: #59d549;
	--bs-table-striped-color: #fff;
	--bs-table-active-bg: #29811e;
	--bs-table-active-color: #fff;
	--bs-table-hover-bg: #46d034;
	--bs-table-hover-color: #fff;
	color: var(--bs-table-color);
	background-color: var(--bs-table-bg);
	border-color: var(--bs-table-border-color);
}

.table-success tbody tr:nth-of-type(odd) {
	background-color: var(--bs-table-striped-bg);
	color: var(--bs-table-striped-color);
}

.table-success tbody tr.active {
	background-color: var(--bs-table-active-bg);
	color: var(--bs-table-active-color);
}

.table-success tbody tr:hover {
	background-color: var(--bs-table-hover-bg);
	color: var(--bs-table-hover-color);
}

.table-info {
	--bs-table-color: #fff;
	--bs-table-bg: #2CBDBF;
	--bs-table-border-color: #229496;
	--bs-table-striped-bg: #49d3d5;
	--bs-table-striped-color: #fff;
	--bs-table-active-bg: #1e7f81;
	--bs-table-active-color: #fff;
	--bs-table-hover-bg: #34ced0;
	--bs-table-hover-color: #fff;
	color: var(--bs-table-color);
	background-color: var(--bs-table-bg);
	border-color: var(--bs-table-border-color);
}

.table-info tbody tr:nth-of-type(odd) {
	background-color: var(--bs-table-striped-bg);
	color: var(--bs-table-striped-color);
}

.table-info tbody tr.active {
	background-color: var(--bs-table-active-bg);
	color: var(--bs-table-active-color);
}

.table-info tbody tr:hover {
	background-color: var(--bs-table-hover-bg);
	color: var(--bs-table-hover-color);
}

.table-warning {
	--bs-table-color: #000;
	--bs-table-bg: #ECCF3E;
	--bs-table-border-color: #e1bf16;
	--bs-table-striped-bg: #f1db6c;
	--bs-table-striped-color: #000;
	--bs-table-active-bg: #caab14;
	--bs-table-active-color: #000;
	--bs-table-hover-bg: #eed555;
	--bs-table-hover-color: #000;
	color: var(--bs-table-color);
	background-color: var(--bs-table-bg);
	border-color: var(--bs-table-border-color);
}

.table-warning tbody tr:nth-of-type(odd) {
	background-color: var(--bs-table-striped-bg);
	color: var(--bs-table-striped-color);
}

.table-warning tbody tr.active {
	background-color: var(--bs-table-active-bg);
	color: var(--bs-table-active-color);
}

.table-warning tbody tr:hover {
	background-color: var(--bs-table-hover-bg);
	color: var(--bs-table-hover-color);
}

.table-danger {
	--bs-table-color: #fff;
	--bs-table-bg: #BF2C2C;
	--bs-table-border-color: #962222;
	--bs-table-striped-bg: #d54949;
	--bs-table-striped-color: #fff;
	--bs-table-active-bg: #811e1e;
	--bs-table-active-color: #fff;
	--bs-table-hover-bg: #d03434;
	--bs-table-hover-color: #fff;
	color: var(--bs-table-color);
	background-color: var(--bs-table-bg);
	border-color: var(--bs-table-border-color);
}

.table-danger tbody tr:nth-of-type(odd) {
	background-color: var(--bs-table-striped-bg);
	color: var(--bs-table-striped-color);
}

.table-danger tbody tr.active {
	background-color: var(--bs-table-active-bg);
	color: var(--bs-table-active-color);
}

.table-danger tbody tr:hover {
	background-color: var(--bs-table-hover-bg);
	color: var(--bs-table-hover-color);
}


:root {
	--bs-primary: #A52DC0;
	--bs-secondary: rgba(255, 255, 255, 0.4);
  *  --bs-success: #3DBF2C;
	--bs-info: #2CBDBF;
	--bs-warning: #ECCF3E;
	--bs-danger: #BF2C2C;
	--bs-light: #e9e9e8;
	--bs-dark: #212529;
  
  /* Primary Colors */
  --bs-primary-rgb: 165, 45, 192;
  --bs-secondary-rgb: 255, 255, 255;
  *--bs-success-rgb: 61, 191, 44;
  --bs-info-rgb: 44, 189, 191;
  --bs-warning-rgb: 236, 207, 62;
  --bs-danger-rgb: 191, 44, 44;
  --bs-light-rgb: 233, 233, 232;
  --bs-dark-rgb: 33, 37, 41;
  
  /* Subtle Colors */
  --bs-primary-border-subtle-rgb: 205, 155, 232;
  *--bs-secondary-border-subtle-rgb: 255, 255, 255;
  --bs-success-border-subtle-rgb: 189, 233, 191;
  --bs-info-border-subtle-rgb: 176, 234, 244;
  --bs-warning-border-subtle-rgb: 255, 227, 131; /* Adjusted to match new warning color */
  --bs-danger-border-subtle-rgb: 254, 179, 159;
  --bs-light-border-subtle-rgb: 233, 233, 232;
  --bs-dark-border-subtle-rgb: 173, 181, 189;
  
  }
  
  
  .bg-primary {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
  }
  
  .bg-secondary {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
  }
  
  .bg-success {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
  }
  
  .bg-info {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
  }
  
  .bg-warning {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
  }
  
  .bg-danger {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
  }
  
  .bg-light {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
  }
  
  .bg-dark {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
  }
  
  .bg-black {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
  }
  
  .bg-white {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
  }
  
  .bg-body {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
  }
  
  .bg-transparent {
	--bs-bg-opacity: 1;
	background-color: transparent !important;
  }
  
  .bg-body-secondary {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
  }
  
  .bg-body-tertiary {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
  }
  
  
  
  
  .dropdown-menu {
	--bs-dropdown-link-active-bg: var(--bs-primary);
  
  }
  
  
  :root {
	  --custom-body-background: linear-gradient(#3B3345, #33013D);
	  --custom-nav: linear-gradient(to right, var(--bs-primary), #33013D);
  }
  
  body {
	background-image: var(--custom-body-background);
  }
  



  img {
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	pointer-events: none;
}
/*
.online-container {
	display: inline-block;
	position: relative;
}
.online {
	font-weight: bold;
	color: yellow;
}
.change-indicator {
	font-size: 14px;
	position: absolute;
	left: 0;
	top: -20px;
	opacity: 0;
	transition: all 0.5s ease;
	font-weight: bold;
}
.change-indicator.green {
	color: green;
}
.change-indicator.red {
	color: red;
}
*/
.carousel {
position: relative;
}

.logo {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
}

.logo img {
display: inline-block;
width: 50%; /* Default for larger screens */
max-width: 100%; /* Ensure it doesn't exceed container width */
height: auto; /* Maintain aspect ratio */
opacity: 0.5; /* Set opacity to 50% */
}

@media (max-width: 768px) {
.logo img {
width: 75%; /* Larger width for smaller screens */
opacity: 0.5; /* Set opacity to 50% */
}
}

@media (max-width: 480px) {
.logo img {
width: 90%; /* Even larger for very small screens */
opacity: 0.5; /* Set opacity to 50% */
}
}


.navbar-nav .nav-item.active .nav-link {
    color: #fff; /* White text color */
    font-weight: bold; /* Bold font weight */
}



body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	overflow-x: hidden; /* Hide horizontal scrollbar */
}
.header {
	width: 100%;
	height: 75vh; /* Full viewport height */
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0; /* Remove padding */
}
.header .carousel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.header .carousel-item {
	height: 75vh; /* Match header height */
	background-size: cover;
	background-position: center;
}
.header .carousel-caption {
	display: none; /* Hide default carousel captions */
}
.header .carousel-item .description {
	position: absolute;
	bottom: 20px;
	left: 20px;
	color: rgba(255, 255, 255, 0.8);
	background-color: rgba(0, 0, 0, 0.5);
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 1rem;
}
.header-content {
	position: relative;
	z-index: 1; /* Ensure content is above the carousel */
	text-align: center;
}
.header .logo {
max-width: 40%; /* Logo at most 40% of container width */
height: auto;
margin-bottom: 20px;
opacity: 0.5; /* Set opacity to 50% */
}

@media (max-width: 768px) {
.header .logo {
max-width: 70%; /* Increase logo size for small screens */
opacity: 0.5; /* Ensure opacity remains 50% for small screens */
}
}

  .header .connect {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 10px 20px;
	border-radius: 5px;
}
.ip {
	font-size: 1.5rem;
	color: #fff;
}
.online {
	font-size: 1.5rem;
	color: #fff;
}
/* CSS for spacer */
.spacer {
	display: block;
	width: 100%; /* For horizontal spacing */
	height: 1rem; /* Adjust this value to change the vertical spacing */
	content: "";
}
.post-author-container {
	width: 40px; /* adjust the width as needed */
	height: 40px; /* adjust the height as needed */
	overflow: hidden;
	border-radius: 50%; /* to make it round */
}
.post-author {
	width: 100%; /* make the image fill the container */
	height: auto; /* maintain aspect ratio */
	display: block; /* remove any spacing */
}
.post-author-name {
	margin-left: 10px; /* adjust the margin as needed */
}

.play-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.play-wrap .card {
	padding: 0; /* Remove padding from the card to stretch the image */
	overflow: hidden;
width: 100%;
max-width: 100%;

}

.p-left .p-image, .p-right .p-image {
width: 50%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}


.play-col {
	flex: 1;
	min-width: 300px;
	box-sizing: border-box;
}

.p-left, .p-right {
	display: flex;
	align-items: center;
}

.p-left .p-image, .p-right .p-image {
	width: 50%;
	padding-top: 28.125%; /* 16:9 aspect ratio for half width */
	background-repeat: no-repeat;
	background-size: cover;
}

.p-left .card-body p-text, .p-right .card-body p-text {
	width: 50%;
	padding: 0 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
.play-wrap {
	flex-direction: column;
}

.p-left, .p-right {
	flex-direction: column;
	text-align: center;
}

.p-left .p-image, .p-right .p-image {
	width: 100%;
	height: auto;
	padding-top: 56.25%; /* Maintain aspect ratio for full width */
}

.p-left .card-body p-text, .p-right .card-body p-text {
	width: 100%;
	padding: 20px 0;
}
}

  :root {
    --primary-foreground: #ffffff;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-zinc-500: #71717b;
    --spacing: 0.25rem;
    --font-weight-thin: 100;
    --font-weight-bold: 700;
    --text-base: 1rem;
    --text-4xl: 2.25rem;
    --radius: 0.375rem;
  }

  body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--color-black);
    color: var(--color-white);
    margin: 0;
  }

  /* Layout */
  .relative { position: relative; }
  .absolute { position: absolute; }
  .inset-0 { inset: 0; }
  .z-10 { z-index: 10; }

  .flex { display: flex; }
  .flex-col { flex-direction: column; }
  .items-center { align-items: center; }
  .justify-center { justify-content: center; }
  .inline-flex { display: inline-flex; }

  .gap-1 { gap: calc(var(--spacing) * 1); }
  .gap-2 { gap: calc(var(--spacing) * 2); }
  .gap-3 { gap: calc(var(--spacing) * 3); }
  .gap-3\.5 { gap: calc(var(--spacing) * 3.5); }

  .mt-4 { margin-top: calc(var(--spacing) * 4); }
  .mt-7 { margin-top: calc(var(--spacing) * 7); }

  .min-h-\[45rem\] { min-height: 45rem; }
  .min-h-screen { min-height: 100vh; }

  .bottom-16 { bottom: calc(var(--spacing) * 16); }

  /* Backgrounds */
  .bg-cover { background-size: cover; }
  .bg-center { background-position: center; }
  .bg-primary { background-color: var(--primary); }
  .bg-zinc-500\/85 { background-color: rgba(113, 113, 123, 0.85); }
  .bg-black\/75 { background-color: rgba(0, 0, 0, 0.75); }
  .bg-\[url\(\'\/media\/background\.png\'\)\] {
    background-image: url('/media/background.png');
  }

  /* Text */
  .text-white { color: var(--color-white); }
  .text-primary-foreground { color: var(--primary-foreground); }
  .text-4xl { font-size: var(--text-4xl); }
  .text-base { font-size: var(--text-base); }
  .font-thin { font-weight: var(--font-weight-thin); }
  .font-bold { font-weight: var(--font-weight-bold); }

  /* Sizing & Spacing */
  .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .h-10 {
    height: 2.5rem;
  }
  .rounded-md {
    border-radius: var(--radius);
  }

  /* Effects */
  .transition-opacity {
    transition: opacity 0.2s ease-in-out;
  }
  .hover\:opacity-75:hover {
    opacity: 0.75;
  }

  /* Animation */
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-25%); }
  }
  .animate-bounce {
    animation: bounce 1s infinite;
  }
  audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  vertical-align: middle;
  display: block;
}

img,
video {
  max-width: 100%;
  height: auto;
}
.size-40 {
  width: calc(var(--spacing) * 40);
  height: calc(var(--spacing) * 40);
}




/* Layout and Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-7 { gap: 1.75rem; }

.mt-7 { margin-top: 1.75rem; }
.mb-48 { margin-bottom: 12rem; }
.md\:mb-30 { margin-bottom: 7.5rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.p-6 { padding: 1.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pl-1 { padding-left: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }



/* Width and Max-Width */
.w-full { width: 100%; }
.max-w-\[57rem\] { max-width: 57rem; }
.w-fit { width: fit-content; }

/* Border Radius */
.rounded-lg { border-radius: 0.5rem; }
.rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
.rounded-b-lg { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

/* Box Shadows */
.shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); }
.shadow-xs { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }

/* Borders */
.border { border-width: 1px; }
.border-muted { border-color: rgba(255, 255, 255, 0.15); }
.border-muted\/75 { border-color: rgba(255, 255, 255, 0.75); }
.border-muted-foreground\/10 { border-color: rgba(163, 163, 163, 0.1); }
.border-gray-700 { border-color: #374151; }

/* Background Colors (example vars, customize as needed) */
.bg-card\/90 { background-color: rgba(24, 24, 27, 0.9); }
.bg-accent\/50 { background-color: rgba(63, 63, 70, 0.5); }
.bg-secondary { background-color: #3f3f46; }
.bg-secondary-foreground { background-color: #fff; }
.bg-border { background-color: #3f3f46; }
.bg-muted-foreground { background-color: #a3a3a3; }

/* Text Styles */
.text-2xl { font-size: 1.5rem; }
.text-xl { font-size: 1.25rem; }
.text-sm { font-size: 0.875rem; }
.text-muted-foreground { color: #a3a3a3; }
.text-secondary-foreground { color: #ffffff; }

.font-bold { font-weight: 700; }
.font-light { font-weight: 300; }
.font-extralight { font-weight: 200; }

/* Buttons and Interactive */
.transition-opacity { transition: opacity 0.2s ease-in-out; }
.hover\:opacity-75:hover { opacity: 0.75; }

/* Sizing Utilities */
.size-1 { width: 0.25rem; height: 0.25rem; }
.size-4 { width: 1rem; height: 1rem; }
.size-6 { width: 1.5rem; height: 1.5rem; }
.h-9 { height: 2.25rem; }

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }

/* Utility */
.opacity-90 { opacity: 0.9; }
.opacity-85 { opacity: 0.85; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Text Formatting */
.whitespace-pre-wrap { white-space: pre-wrap; }
.line-clamp-\[14\] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 14;
  overflow: hidden;
}
[mask-image\:linear-gradient\(to_bottom\,black_75\%\,transparent_100\%\)] {
  mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}


  /* Font Sizes */
  .text-sm {
    font-size: 0.875rem;   /* 14px */
    line-height: 1.25rem;  /* 20px */
  }

  .text-xl {
    font-size: 1.25rem;    /* 20px */
    line-height: 1.75rem;  /* 28px */
  }

  /* Font Weights */
  .font-extralight {
    font-weight: 200;
  }

  .font-light {
    font-weight: 300;
  }

  .font-medium {
    font-weight: 500;
  }

  .font-bold {
    font-weight: 700;
  }

  /* Text Colors */
  .text-muted-foreground {
    color: #a3a3a3;
  }

  .text-secondary-foreground {
    color: #ffffff;
  }

  .text-yellow-400 {
    color: #facc15;
  }

  /* Whitespace Handling */
  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  /* Hover Opacity */
  .hover-opacity-75:hover {
    opacity: 0.75;
  }