a {
  color: inherit;
  text-decoration: none;
}
.truncate-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px; /* adjust the width to fit your container */
}

body {
	background: #0e0e10 url('img/bg.png');
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
}

@keyframes gradient {
	0% {
    background-position: 0% 50%;
	}
	50% {
    background-position: 100% 50%;
	}
	100% {
    background-position: 0% 50%;
	}
}

.logo-image-container {
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
	max-width: 100%;
	padding-top: 0 !important;
}

.logo {
	width: 30%;
	height: auto;
	animation-name: flip;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-play-state: paused;

}

.rainbow {
	height: 8px;
	background: linear-gradient(324deg,#81c1d9,#9aabdd,#a8a9da,#ccb9b6,#afc2c4,#8ec4d1,#a8a9da);
    background-size: 1400% 1400%;
	animation: RainAni 20s ease infinite;
}

@keyframes RainAni {
	0% {
    background-position: 0% 99%;
}

50% {
    background-position: 100% 2%;
}
100% {
    background-position: 0% 99%;
}
}

@keyframes flip {
	0% {
    transform: rotateX(0deg);
	}
	100% {
    transform: rotateX(360deg);
	}
}

.no-padding-top {
	padding-top: 0 !important;
}

.date {
	top: 0;
	left: 50%;
	font-size: 11px;
	width: 186px;
	text-align: center;
	color: #000!important;
	transform: translateX(-50%);
	padding: 1px!important;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  transition: all 0.3s ease;
  transform: translateZ(0);
}

.col-md-4:nth-of-type(1) .card, .col-md-4:nth-of-type(1) .card .date{
	background-color: #81c1d9!important;
}

.col-md-4:nth-of-type(2) .card, .col-md-4:nth-of-type(2) .card .date{
	background-color: #9aabdd!important;
}

.col-md-4:nth-of-type(3) .card, .col-md-4:nth-of-type(3) .card .date{
	background-color: #a8a9da!important;
}

.col-md-4:nth-of-type(4) .card, .col-md-4:nth-of-type(4) .card .date{
	background-color: #ccb9b6!important;
}

.col-md-4:nth-of-type(5) .card, .col-md-4:nth-of-type(5) .card .date{
	background-color: #afc2c4!important;
}

.col-md-4:nth-of-type(6) .card, .col-md-4:nth-of-type(6) .card .date{
	background-color: #8ec4d1!important;
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: scale(1.05) translateZ(0);
}

.card-img-top {
	border-radius: 10px 10px 0 0;
}

.card-body {
	color: #000;
	padding: .5rem 1rem;
}

.card-title {
	color: #000;
}

.badge {
	font-weight: 600;
}
.text-muted {
	font-size: 11px;
}

.timestamp {
	background: #00000085;
    color: #fff;
    position: absolute;
    right: 5px;
	margin-top: -26px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 12px;
}

.bg-primary {
	background-color: #9147ff;
}

.bg-secondary {
	background-color: #00b5ad;
}

.bg-success {
	background-color: #4caf50;
}

.bg-danger {
	background-color: #f44336;
}

.bg-warning {
	background-color: #ffc107;
}

.bg-info {
	background-color: #03a9f4;
}

.pagination {
	display: flex;
	padding-left: 0;
	list-style: none;
	border-radius: 0.25rem;
}

.page-item:not(:last-child) {
	margin-right: 0.25rem;
}

.page-link {
	position: relative;
	display: block;
	padding: 0.5rem 0.75rem;
	margin-left: -1px;
	line-height: 1.25;
	color: #fff;
	background-color: #202225;
	border: 1px solid #45474c;
	text-decoration: none;
}

.page-link:hover {
	color: #fff;
	background-color: #45474c;
	border-color: #45474c;
}

.page-item.active .page-link {
	color: #fff;
	background-color: #45474c;
	border-color: #45474c;
}

.page-item.disabled .page-link {
	color: #999;
	pointer-events: none;
	cursor: not-allowed;
	background-color: #202225;
	border-color: #45474c;
}

@media (max-width: 575.98px) {
	.page-link {
		padding: 0.25rem 0.5rem;
	}
}

@media (max-width: 768px) {
	.logo-image-container {
		margin-top: 0;
	}

	.logo {
		max-width: 352px;
		max-height: 198px;
		width: 100%;
		height: auto;
	}
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.blinking {
  animation: blink 0.5s infinite;
}

    @keyframes rainbow {
      0% {background-color: red;}
      14% {background-color: orange;}
      28% {background-color: yellow;}
      42% {background-color: green;}
      57% {background-color: blue;}
      71% {background-color: indigo;}
      85% {background-color: violet;}
      100% {background-color: red;}
    }

    .badge-rainbow {
      position: relative;
      z-index: 1;
      color: white;
    }

    .badge-rainbow::before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      animation: rainbow 6s linear infinite;
    }