/* Base styles, variables, and resets */

:root {
	--font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono: "Courier New", monospace;

	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;

	--section-padding-desktop: 20%;
	--section-padding-tablet: 10%;
	--section-padding-mobile: 8%;

	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 12px;
	--border-radius-round: 50%;

	--shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);

	--transition-fast: 0.2s ease;
	--transition-normal: 0.3s ease;
	--transition-medium: 0.4s ease;

	/* UI Component sizes */
	--button-icon-size: 40px;
	--material-icon-size: 1.2rem;
	--typewriter-font-size: 2.5rem;
	--subtitle-font-size: 1.2rem;
	--contact-item-font-size: 0.9rem;
	--form-label-font-size: 0.9rem;
	--footer-h3-font-size: 1.3rem;
	--waving-icon-font-size: 2rem;
	
	/* Layout constants */
	--header-fixed-height: 60px;
	--main-padding-top: 60px;
	--section-padding-top: 80px;
	--welcome-max-width: 600px;
	--portrait-max-width: 300px;
	--footer-max-width: 1200px;
	--contact-left-max-width: 45%;
	--contact-form-max-width: 500px;
	--about-content-max-width: 60%;
	
	/* Project card styling */
	--project-border-radius: 20px;
	--project-backdrop-blur: 20px;
	
	/* LYF section */
	--lyf-indicator-max-width: 400px;
	--lyf-controls-height: 120px;
	--lyf-dpad-size: 100px;
	--lyf-dpad-button-size: 30px;
	--lyf-action-button-size: 60px;
	--lyf-dpad-font-size: 16px;
	--lyf-action-font-size: 18px;
	
	/* Form styling */
	--form-textarea-min-height: 120px;
	
	/* Footer styling */
	--footer-gif-max-width: 300px;
	--footer-personal-note-flex: 50%;
	--footer-gif-flex: 45%;
	--footer-bottom-font-size: 0.8rem;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	scrollbar-width: none; /* Firefox */
}

*::-webkit-scrollbar {
	display: none; /* WebKit */
}

html {
	scroll-behavior: smooth;
	scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar {
	display: none; /* WebKit */
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
	min-height: 100vh;
	width: 100%;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* Internet Explorer 10+ */
}

body::-webkit-scrollbar {
	display: none; /* WebKit */
}

a {
	text-decoration: none;
}

ul,
ol {
	list-style: none;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

button {
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url('/assets/icons.woff2') format('woff2');
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	display: inline-block;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	direction: ltr;
	text-align: center;
}

/* Force hide all scrollbars globally */
::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

*::-webkit-scrollbar {
	display: none !important;
}

/* For Firefox - ensure all elements */
* {
	scrollbar-width: none !important;
}

/* For Internet Explorer and Edge */
* {
	-ms-overflow-style: none !important;
}

.hidden {
	display: none;
}

body,html {
	animation: blockScroll 4s;
}