/* Tabs */
.tab {
   overflow: hidden;
   border: 1px solid var(--border);
   background-color: var(--accent-extra);
   border-radius: 8px;
}

.tab button {
   background-color: inherit;
   float: left;
   border: none;
   outline: none;
   padding: 14px 16px;
   transition: 0.3s;
   font-family: var(--font-body);
}

.tab button:hover {
   background-color: var(--accent);
   color: var(--box-bg);
}

.tab button.active {
   background-color: var(--accent-dim);
   color: var(--box-bg);
}

.tabcontent {
   display: none;
   padding: 6px 15px;
   margin-top: 10px;
   text-align: justify;
}


/* Sliding Wall */
@keyframes slide {
   0%   { transform: translateX(400%); }
	100% { transform: translateX(-520%); }
}

.marquee-grid {
	overflow: hidden;
	padding: 2px;
}

.marquee-animation {
	display: flex;
	width: 200px;
	animation: slide 12s linear infinite;
}

.marquee-animation:hover {
	animation-play-state: paused;
}

.marquee-sequence{ 
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
}