/* ========================= */
/* GLOBAL */
/* ========================= */

html,
body
{
	margin:0;
	height:100%;
	font-family:Arial, Helvetica, sans-serif;
	background:#070707;
	color:white;

	overflow:hidden;
	touch-action:none;
	overscroll-behavior:none;
}

body
{
	display:flex;
	flex-direction:column;
	position:relative;
}
body > *
{
	position:relative;
	z-index:1;
}

/* ========================= */
/* CANVAS */
/* ========================= */

#snow
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:var(--app-height); /* key fix */
	pointer-events:none;
	z-index:0;
}

/* ========================= */
/* SCROLL AREA */
/* ========================= */

.content-scroll
{
	flex:1;
	min-height:0;

	overflow-y:auto;

	-webkit-overflow-scrolling:touch;
	touch-action:pan-y;
}

/* SCROLLBAR */

.content-scroll::-webkit-scrollbar
{
	width:5px;
}

.content-scroll::-webkit-scrollbar-track
{
	background:transparent;
}

.content-scroll::-webkit-scrollbar-thumb
{
	background:#b100ff;
	border-radius:6px;
}

.content-scroll::-webkit-scrollbar-thumb:hover
{
	background:#d44cff;
}

/* ========================= */
/* TOP BAR */
/* ========================= */

.topbar
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:10px 40px;
	background:#0d0d0d;
	border-bottom:2px solid #b100ff;
	flex-shrink:0;

	position:sticky;
	top:0;
	z-index:1000;
}

/* LEFT */

.topbar .left img
{
	height:45px;
	display:block;
}

/* CENTER */

.topbar .center
{
	display:flex;
	gap:40px;
}

/* RIGHT */

.topbar .right a
{
	text-decoration:none;
	color:white;
	font-size:14px;
	transition:0.2s;
}

.topbar .right a:hover
{
	color:#b100ff;
}

/* NAV LINKS */

.nav-link
{
	text-decoration:none;
	color:white;
	font-weight:600;
	font-size:15px;
	position:relative;
	padding:6px 0;
	transition:0.2s;
}

.nav-link::after
{
	content:"";
	position:absolute;
	left:0;
	bottom:-4px;
	width:0%;
	height:2px;
	background:#b100ff;
	transition:0.2s;
}

.nav-link:hover::after
{
	width:100%;
}

.nav-link.active
{
	color:#b100ff;
}

/* ========================= */
/* MAIN CONTENT */
/* ========================= */

main
{
	max-width:900px;
	margin:10px auto 0 auto;
	text-align:center;
	padding:20px;
	box-sizing:border-box;
	width:100%;
}

h1
{
	font-size:48px;
	margin-top:20px;
	margin-bottom:20px;
}

p
{
	font-size:20px;
	line-height:1.6;
}

/* HOME LOGO */

.home-logo
{
	width:420px;
	max-width:90%;
	margin-top: 10px;
	margin-bottom:-40px;
}

/* ========================= */
/* SOCIAL BUTTONS */
/* ========================= */

.social-buttons
{
	display:flex;
	justify-content:center;
	gap:16px;
	margin-top:10px;
}

.social-btn
{
	display:flex;
	width:210px;
	height:46px;
	border-radius:7px;
	overflow:hidden;
	text-decoration:none;
	font-weight:bold;
	font-size:17px;
	color:white;
}

/* ICON */

.social-btn .icon
{
	width:50px;
	min-width:50px;
	background:#3a3a3a;
	display:flex;
	align-items:center;
	justify-content:center;
}

.social-btn .icon img
{
	width:23px;
	height:auto;
	object-fit:contain;
	display:block;
}

.roblox .icon img
{
	width:24px;
}

/* LABEL */

.social-btn .label
{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* COLORS */

.discord .label
{
	background:#5865F2;
}

.roblox .label
{
	background:#e2231a;
}

/* HOVER */

.social-btn:hover
{
	transform:translateY(-2px);
	filter:brightness(1.15);
	transition:0.2s;
}

/* ========================= */
/* WORK LIST */
/* ========================= */

.work-list
{
	list-style:none;
	padding:0;
}

.work-list li
{
	margin:10px 0;
	font-size:18px;
}

/* ========================= */
/* PROJECT GRID */
/* ========================= */

.project-grid
{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	gap:40px;
	margin-top:40px;
	margin-bottom:15px;
	justify-items:stretch;
}

.project-grid > *
{
	grid-column:span 2;
}

/* LAST ROW ALIGNMENT */

.project-grid > :last-child:nth-child(3n+1)
{
	grid-column:3 / span 2;
}

.project-grid > :nth-last-child(2):nth-child(3n+1)
{
	grid-column:2 / span 2;
}

.project-grid > :last-child:nth-child(3n+2)
{
	grid-column:4 / span 2;
}

/* ========================= */
/* PROJECT CARD */
/* ========================= */

.project-card
{
	background:#111;
	border-radius:10px;
	overflow:hidden;
	text-align:center;
	cursor:pointer;
	transition:0.2s;
}

.project-card img
{
	width:100%;
	height:180px;
	object-fit:cover;
	display:block;
}

.project-card h2
{
	padding:15px;
	font-size:18px;
	margin:0;
}

.project-card:hover
{
	transform:translateY(-6px);
	box-shadow:0 0 15px #b100ff;
}

/* ========================= */
/* PAGE SYSTEM */
/* ========================= */

.page
{
	position:absolute;
	top:0;
	left:0;
	width:100%;

	opacity:0;
	transform:scale(0.92);
	transform-origin: top center;

	pointer-events:none;

	will-change: transform, opacity;
	backface-visibility: hidden;

	transition:
		opacity 0.25s ease,
		transform 0.38s cubic-bezier(0.22,1.3,0.3,1);
}

.page.active
{
	opacity:1;
	transform:scale(1);
	pointer-events:auto;
	z-index:2;
}

.page
{
	height:100%;
	display:flex;
	flex-direction:column;
}

/* CONTAINER */

#pages
{
	position:relative;
	height:100%;
	display:flex;
	flex-direction:column;
}

/* ========================= */
/* EXPERIENCE GRID */
/* ========================= */

.experience-grid
{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:18px;
	margin-top:30px;
}

/* CARD */

.exp-card
{
	display:flex;
	align-items:center;
	gap:12px;

	background:#0f0f0f;
	border-radius:10px;
	padding:14px 18px;

	font-size:15px;
	font-weight:500;

	border:1px solid rgba(177,0,255,0.15);

	transition:0.25s;
}

/* HOVER */

.exp-card:hover
{
	transform:translateY(-3px);
	border-color:#b100ff;
	box-shadow:0 0 12px rgba(177,0,255,0.35);
}

/* DOT */

.exp-card .dot
{
	width:8px;
	height:8px;
	border-radius:50%;

	background:#b100ff;

	box-shadow:0 0 8px #b100ff;
	flex-shrink:0;
}

/* ========================= */
/* MOBILE OPTIMIZATION */
/* ========================= */

@media (max-width: 768px)
{
	body
	{
		font-size:18px;
	}

	p
	{
		font-size:18px;
	}

	h1
	{
		font-size:34px;
	}

	.topbar
	{
		padding:14px 16px;
	}

	.topbar .center
	{
		gap:20px;
	}

	.nav-link
	{
		font-size:16px;
	}

	.home-logo
	{
		width:300px;
		margin-bottom:-30px;
	}

	.social-btn
	{
		width:90%;
		height:42px;
		font-size:15px;
	}

	.project-grid
	{
		grid-template-columns:1fr 1fr;
		gap:20px;
	}

	.project-grid > *
	{
		grid-column:span 1 !important;
	}

	.project-card img
	{
		height:140px;
	}

	.project-card h2
	{
		font-size:16px;
	}

	.experience-grid
	{
		grid-template-columns:1fr;
		gap:14px;
	}

	.exp-card
	{
		font-size:16px;
		padding:16px;
	}
}