@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap');

:root {
	--color-bg-main: #11191f;
	--color-bg-secondary: #161b22;
	--color-border: #1f2d38;
	--color-accent: #58a6ff;
	--color-primary: #8037da;
	--color-primary-hover: #5c2f9b;
	--color-secondary: #6537da;
	--color-secondary-hover: #4d2f9b;
	--color-text-main: hsl(210, 7%, 71%);
	--color-title: hsl(205deg, 20%, 94%);
	--color-subtext: #555;
	--color-bg-alt: #161b22;
	--color-bg-hover: #21262d;
	--color-bg-violet: #1c1327;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	color: var(--color-text-main);
	scrollbar-width: thin;
	scrollbar-color: #21262d #0d1117;
}

html {
	background: transparent !important;
}


body {
	padding: 0 20px;
	background: none;
	font-family: 'Poppins', sans-serif;
}

img,
span,
header,
h1,
h2,
h3,
h4,
p {
	background: none;
}

header {
	padding: 20px 0 !important;
}

hr {
	border-color: var(--color-border);
}

h1,
h2,
h3,
h4 {
	color: var(--color-title);
	margin: 40px 0 0 0;
}

p {
	color: var(--color-text-main);
	font-size: 0.95rem !important;
}

.collapsible {
	background-color: var(--color-bg-secondary);
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
	margin: 20px auto;
	overflow: hidden;
	transition: box-shadow 0.3s, transform 0.3s;
	cursor: pointer;
	max-width: 800px;
}

.collapsible-header {
	font-size: 1rem;
	font-weight: bold;
	padding: 10px 15px;
	margin: 0;
	background-color: var(--color-bg-secondary);
	color: var(--color-title);
	display: flex;
	align-items: center;
	gap: 30px;
	transition: background-color 0.3s, color 0.3s;
}

.collapsible-header img.logo {
	width: 70px;
	height: 70px;
	object-fit: contain;
	border-radius: 5px;
}

.collapsible-header:hover {
	background-color: var(--color-bg-hover);
	color: #fff;
}

.collapsible-body {
	background-color: var(--color-bg-secondary);
	color: var(--color-text-main);
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: scaleY(0.95);
	transition: opacity 0.3s, transform 0.3s, max-height 0.3s;
}

.collapsible-content {
	padding: 20px;
}

.subtitle {
	font-size: 0.8rem;
	color: var(--color-subtext);
}

.collapsible-category-title {
	font-size: 1.6rem;
	font-weight: bold;
	margin-top: 40px;
	color: var(--color-title);
	text-align: center;
}

.collapsible.expanded .collapsible-body {
	max-height: 100vh;
	overflow-y: auto;
	opacity: 1;
	transform: scaleY(1);
}

.collapsible:hover {
	transform: scale(1.02);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.6);
}

.collapsible-body h4 {
	margin-top: 15px;
	color: var(--color-title);
	font-size: 1.1rem;
}

.collapsible-body ul {
	padding-left: 20px;
	list-style: disc;
}

.collapsible-body ul li {
	margin: 5px 0;
}

.repo-link,
.secondary,
.outline {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 40px 0 0 0;
	padding: 8px 12px;
	font-weight: bold;
	text-align: center;
	font-size: 0.6rem;
	cursor: pointer;
	text-decoration: none;
	border-radius: 5px;
	transition: background-color 0.3s, color 0.3s, transform 0.2s, border-color 0.3s;
}

.repo-link {
	background-color: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.repo-link:hover {
	border-color: var(--color-secondary-hover);
	color: #fff;
}

.secondary {
	background: var(--color-primary);
	color: #fff;
	border: 2px solid var(--color-primary);
	transition:
		background 0.4s,
		color 0.3s,
		border-color 0.3s,
		transform 0.2s,
		box-shadow 0.3s;
}

.secondary:hover,
.secondary:focus {
	border-color: var(--color-secondary-hover);
	background: var(--color-secondary-hover);
	color: var(--color-title);
	transform: translateY(-3px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}

.outline {
	background-color: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	transition:
		background 0.4s,
		color 0.3s,
		border-color 0.3s,
		transform 0.2s,
		box-shadow 0.3s;
}

.outline:hover,
.outline:focus {
	border-color: var(--color-secondary-hover);
	color: var(--color-title);
	background: transparent;
	transform: translateY(-3px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}

.skills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.skill {
	display: inline-block;
	padding: 5px 10px;
	font-size: 0.65rem;
	font-weight: 500;
	background-color: var(--color-secondary);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	transition: background-color 0.3s, color 0.3s;
}

.skill:hover {
	background-color: var(--color-secondary-hover);
	color: var(--color-subtext);
	cursor: pointer;
}

.social-badge {
	background-color: var(--color-bg-secondary);
	border-radius: 15px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
	text-align: center;
	padding: 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	color: #fff;
	transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.social-badge img {
	width: 60px;
	height: 60px;
	margin-bottom: 10px;
	transition: transform 0.3s;
}

.social-badge span {
	font-size: 1rem;
	font-weight: bold;
	margin-top: 5px;
}

.social-badge:hover {
	transform: translateY(-5px) scale(1.05);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.6);
	background-color: var(--color-bg-hover);
}

.social-badge:hover img {
	transform: scale(1.1);
}

::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background: #0d1117;
}

::-webkit-scrollbar-thumb {
	background-color: #21262d;
	border-radius: 10px;
	border: 3px solid #0d1117;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #2c3138;
}

*::-ms-scrollbar {
	width: 12px;
}

*::-ms-scrollbar-track {
	background: #0d1117;
}

*::-ms-scrollbar-thumb {
	background-color: #21262d;
	border-radius: 10px;
	border: 3px solid #0d1117;
}

*::-ms-scrollbar-thumb:hover {
	background-color: #2c3138;
}

.btn-header-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	list-style: none;
	padding: 15px 0;
}

.btn-header {
	position: relative;
	background: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	border: none;
	letter-spacing: 0.1rem;
	font-size: 0.5rem;
	padding: 0.5rem 1rem;
	transition: 0.2s;
	cursor: pointer;
}

.btn-header:hover {
	letter-spacing: 0.2rem;
	padding: 0.55rem 1.1rem;
	color: var(--color-primary);
	animation: box-purple 3s infinite;
}

.btn-header::before,
.btn-header i::before,
.btn-header i::after {
	content: "";
	position: absolute;
	background: none;
	transition: 0.2s;
}

.btn-header::before {
	inset: 1px;
}

.btn-header span {
	position: relative;
	z-index: 1;
}

.btn-header i {
	inset: 0;
	display: block;
}

.btn-header i::before {
	width: 5px;
	height: 1px;
	left: 80%;
	top: -1px;
	border: 1px solid var(--color-primary);
}

.btn-header:hover i::before {
	width: 7.5px;
	left: 20%;
	animation: move-purple 3s infinite;
}

.btn-header i::after {
	width: 5px;
	height: 1px;
	left: 20%;
	bottom: -1px;
	border: 1px solid var(--color-primary);
}

.btn-header:hover i::after {
	width: 7.5px;
	left: 80%;
	animation: move-purple 3s infinite;
}

@keyframes move-purple {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(2.5px);
	}
}

@keyframes box-purple {

	0%,
	100% {
		box-shadow: none;
	}

	50% {
		box-shadow: 0 0 12.5px var(--color-primary);
	}
}

@keyframes move {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(2.5px);
	}
}

@keyframes box {

	0%,
	100% {
		box-shadow: none;
	}

	50% {
		box-shadow: 0 0 12.5px var(--color-accent);
	}
}

nav,
.social-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 20px;
	justify-content: center;
	align-items: center;
}

.social-grid {
	margin: 40px auto 0 auto;
	max-width: 800px;
}

.cursor-halo {
	position: fixed;
	top: 0;
	left: 0;
	width: 700px;
	height: 700px;
	pointer-events: none;
	z-index: 9999;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(29, 172, 216, 0.10), transparent 75%);
	opacity: 0.6;
	transform: translate(-50%, -50%);
	transition: width 0.2s, height 0.2s, opacity 0.2s;
}

.cursor-halo.hover {
	width: 200px;
	height: 200px;
	opacity: 0.8;
}

.separator {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 60px;
	width: 50%;
}

.language-selector {
	position: fixed;
	top: 15px;
	right: 30px;
	cursor: pointer;
	z-index: 1000;
	background: var(--color-bg-alt);
	border-radius: 8px;
	padding: 5px;
	display: flex;
	align-items: center;
	gap: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	opacity: 0.5;
	transition: background 0.3s, opacity 0.2s;
}

.language-selector:hover {
	background: var(--color-bg-hover);
	opacity: 0.8;
}

.lang-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

.lang-menu {
	position: absolute;
	top: 40px;
	right: 0;
	background: var(--color-bg-alt);
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	list-style: none;
	padding: 5px;
	margin: 0;
	display: none;
	min-width: 110px;
}

.lang-menu.show {
	display: block;
}

.lang-menu li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px;
	cursor: pointer;
	font-size: 0.85rem;
	transition: background 0.2s, opacity 0.2s;
}

.lang-menu li img {
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

.lang-menu li:hover {
	background: var(--color-bg-hover);
	opacity: 1;
	border-radius: 6px;
}

.category-slider-wrapper {
	overflow-x: auto;
	margin: 1.5rem auto 0 auto;
	padding-bottom: 0.5rem;
	max-width: 800px;
}

.category-slider {
	display: flex;
	gap: 0.75rem;
	padding: 0.5rem 0.25rem;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	margin: 0 auto;
}

.category-card {
	flex: 0 0 auto;
	width: 120px;
	padding: 0.5rem;
	border-radius: 0.8rem;
	background-color: var(--color-bg-secondary);
	color: var(--color-subtext);
	font-size: 0.65rem;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: transform 0.3s, background-color 0.3s, color 0.3s, box-shadow 0.3s, border-color 0.3s;
	scroll-snap-align: start;
	user-select: none;
	overflow-wrap: break-word;
	hyphens: auto;
	border: 1px solid var(--color-border);
	line-height: 1.1rem;
	white-space: pre-line;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

.category-card:hover {
	transform: translateY(-5px) scale(1.05);
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.6);
	background-color: var(--color-bg-hover);
	color: #fff;
}

.category-card.active {
	background: linear-gradient(135deg, var(--color-primary) 60%, var(--color-secondary) 100%);
	color: #fff !important;
	transform: scale(1.05);
	font-weight: 600;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	border-color: var(--color-primary);
}

.banner-image {
	width: 100%;
	height: calc(100% - 100px);
	object-fit: cover;
	border: 2px solid var(--color-border);
	border-radius: 10px;
}

.date {
	margin-bottom: 15px;
	color: var(--color-secondary) !important;
	font-size: 0.8rem;
}

.background-layer {
	position: fixed;
	inset: 0;
	z-index: -1000;
	pointer-events: none;
	background: linear-gradient(160deg,
			var(--color-bg-main) 0%,
			var(--color-bg-main) 40%,
			var(--color-bg-violet) 100%);
}