:root {
	--bg: #0e0f13;
	--panel: #161822;
	--panel-2: #1d2030;
	--text: #e6e6eb;
	--muted: #a0a3b1;
	--accent: #7aa2ff;
	--accent-2: #9ece6a;
	--border: #262a3d;
}

* {
	box-sizing: border-box;
}

body {
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	margin: 0;
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

a {
	color: var(--accent);
	text-decoration: none;
}

.title {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.badge {
	font-size: 0.8rem;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: rgba(122,162,255,0.15);
	border-color: rgba(122,162,255,0.4);
	color: var(--accent);
	box-shadow: 0 3px 10px rgba(153, 167, 201, 0.25);
	position: relative;
	top: -8px;

	&.inline {
		margin-left: 8px;
		vertical-align: middle;
		position: relative;
		top: -1px;
	}

	&.mobile {
		margin-left: 8px;
		vertical-align: middle;
		position: relative;
		top: -1px;
	}
}

.container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 24px;
}

.header {
	border-bottom: 1px solid var(--border);
	background: radial-gradient(900px 300px at 50% -150px, rgba(122,162,255,0.12), transparent 60%), linear-gradient(180deg, var(--panel), var(--bg));
	background: linear-gradient(180deg, rgb(8, 31, 80), rgba(122,162,255,0.12), transparent 60%);
	h1 {
		letter-spacing: -0.02em;
		font-size: 2.5rem;
		margin-bottom: 0.25em;
	}
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.header-text {
	max-width: 600px;
}

.capybara {
	width: 140px;
	opacity: 0.85;
	filter: saturate(0.9);
	box-shadow: 0 10px 20px rgba(111, 233, 255, 0.25);
	user-select: none;
}

.tagline {
	font-size: 1.1rem;
	color: var(--muted);
}

.actions {
	margin-top: 16px;
	display: flex;
	gap: 12px;
}

.btn {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	padding: 10px 16px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--panel);
	color: var(--text);
	position: relative;
	text-align: center;

	&:hover {
		transform: translateY(-2px);
		border-color: var(--accent);
		box-shadow: 0px 0px 20px 2px rgba(112,162,255,0.5);
		animation-name: hover;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	&.primary {
		background: linear-gradient(180deg, var(--accent), #5f7eea, #0035f3);
		color: #000;
		font-weight: 600;
		box-shadow: 0px 0px 40px 2px rgba(112,162,255,0.5);
		animation-name: glow;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}
}

.tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;

	button {
		position: relative;
		background: var(--panel);
		border: 1px solid var(--border);
		color: var(--text);
		padding: 8px 14px;
		border-radius: 8px;
		cursor: pointer;
		transition: transform 0.15s ease, border-color 0.15s ease;

		&:hover {
			transform: translateY(-2px);
			border-color: var(--accent);
			box-shadow: 0px 0px 10px 2px rgba(112,162,255,0.5);
			animation-name: hover;
			animation-duration: 2s;
			animation-iteration-count: infinite;
		}

		&.active {
			background: var(--panel-2);
			border-color: var(--accent);
			box-shadow: 0px 0px 10px 2px rgba(112,162,255,0.5);
		}
	}
}

.tab {
	display: none;

	&.active {
		display: block;
	}
}

.card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 24px;
	transition: transform 0.15s ease, border-color 0.15s ease;

	&:hover {
		transform: translateY(-2px);
		border-color: var(--accent);
		box-shadow: 0px 0px 10px 2px rgba(112,162,255,0.5);
		animation-name: hover;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	h2, h3 {
		margin-top: 0;
	}

	h3 {
		font-size: 0.85rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--muted);
		margin-bottom: 6px;
	}

	p {
		font-size: 1.05rem;
		font-weight: 500;
  		color: var(--text);
	}
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.changelog {
	border-left: 3px solid transparent;

	ul {
		padding-left: 18px;
	}

	li {
		margin-bottom: 6px;
	}

	&:hover {
		transform: translateY(-2px);
		border-color: var(--accent);
		box-shadow: 0px 0px 10px 2px rgba(112,162,255,0.5);
	}

	h2 {
		margin-top: 0;
	}

	h3 {
		font-size: 0.85rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--muted);
		margin-bottom: 6px;
		margin-top: 0;

	}

	h4 {
		font-size: 0.75rem;
		letter-spacing: 0.08em;
		text-transform: auto;
		color: var(--muted);
		transform: translate(2px,-15px);
		margin-bottom: 6px;
		margin-top: 0;

	}

	p {
		font-size: 1.05rem;
		font-weight: 500;
  		color: var(--text);
	}

	.meta {
		color: var(--muted);
		font-size: 0.9rem;
	}

	hr {
		transform: translate(0px,-20px);
	}

}

.modpack-installation {
	border-left: 3px solid transparent;

	ul {
		padding-left: 18px;
	}

	li {
		margin-bottom: 6px;
	}

	h2, h3 {
		margin-top: 0;
	}

	h3 {
		font-size: 0.85rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--muted);
		margin-bottom: 6px;
	}

	p {
		font-size: 1.05rem;
		font-weight: 500;
  		color: var(--text);
	}

	.meta {
		color: var(--muted);
		font-size: 0.9rem;
	}
}

.mod-search {
	width: 100%;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--panel-2);
	color: var(--text);
	font-size: 1rem;
}

.modlist {
	&:hover {
		transform: translateY(-2px);
	}

	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
}

.mod {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 6px 0;
	border-bottom: 1px solid var(--border);

	&:last-child {
		border-bottom: none;
	}

	a, .name {
		color: var(--text);
	}

	a:hover {
		color: var(--accent);
	}
}

.version {
	color: var(--muted);
	font-size: 0.85rem;
	white-space: nowrap;
}

.progression {
	font-family: ui-monospace, monospace;
	background: var(--panel-2);
	padding: 8px 12px;
	border-radius: 8px;
	display: inline-block;
}

.footer {
	margin-top: 48px;
	font-size: 0.9rem;
	opacity: 0.75;

	.container {
		display: flex;
		justify-content: space-between;
		color: var(--muted);
		position: fixed;
		bottom:0
	}
}

.spin {
	animation-name: capyspin;
	animation-duration: 2s;
	transition: transform 2s ease-in-out;
}

.icon {
	transform: translateX(5px);
	border-radius: 50%;
	background-color: transparent;
	width: 20px;
	transition: transform 2s ease-in-out;
	position: relative;
	top: 2px;
	animation-name: iconglow;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

/* Capybara Spin Animation */
@keyframes capyspin {
	from {
		transform: scaleY(1) rotateY(2turn) skew(20deg);
		box-shadow: 0px 0px 100px 2px rgba(154, 3, 255, 1);
	}
	to { transform: scaleY(1) rotateY(-1turn) skew(0deg); }
}

/* Download Button Effect Animation */
@keyframes glow {
	from { box-shadow: 0px 0px 10px 2px rgba(112,162,255,0.5); }
	to { box-shadow: 0px 0px 100px 2px rgba(50, 15, 74,0.5); }
}

/* Hovering Effect Animation */
@keyframes hover {
	from { box-shadow: 0px 0px 10px 2px rgb(112, 162, 255); }
	to { box-shadow: 0px 0px 10px 2px rgba(112, 162, 255, 0.495); }
}

/* Social Icons Effect Animation */
@keyframes iconglow {
	from { box-shadow: 0px 0px 10px 2px rgb(112, 162, 255); }
	to { box-shadow: 0px 0px 10px 2px rgba(112, 162, 255, 0.495); }
}

/* Hide Capy on Mobile */
@media screen and (max-width:450px) {
	.capybara {
		display: none;
	}
}

/* Hide Badges on Install Tab on Mobile */
@media screen and (max-width:500px) {
	.mobile {
		display: none;
	}
}

/* Adjust Button Sizes on Mobile */
@media screen and (max-width:500px) {
	.btn {
		margin: auto;
		line-height: 1.25rem;
	}
}