:root {
	--width-content: 87.5rem;
	--height-nav-item: 2.375rem;
	--color-black-1: #18181b;
	--color-black-2-alpha-95: rgb(42 42 45 / 0.95);
	--color-black-pure-alpha-50: rgba(0, 0, 0, 0.5);
	--color-white: #e1dbdb;
	--color-white-pure: #fff;
	--color-white-pure-alpha-90: rgb(255 255 255 / 0.9);
	--color-primary: #c7a76e;
	--color-secondary: #75eff8;
	--color-secondary-alpha-75: rgba(15, 130, 165, 0.75);
	--color-title: #0bcddb;
	--color-title-light: #f57421;
	--bg-header-page: rgba(27, 36, 91, 0.2);
	--border-radius-6: 0.375rem;
	--border-radius-8: 0.5rem;
	--border-radius-10: 0.625rem;
	--border-radius-16: 1rem;
	--rotate-gradient-title: 105deg;
	--color-highlighted: var(--color-primary);
	--color-light-1: #5f3ee1;
	--repository-link: var(--color-secondary);
}

:root {
	--color-menu-item: var(--color-primary);
	--background-color-body: #170125;
	--background-dot: rgba(255, 255, 255, 0.6);
	--color-letter-body: var(--color-white);
	--url-icon: var(--color-menu-item);
	--shadow-project-image: drop-shadow(0px 2px 2px rgb(255 255 255 / 0.12))
		drop-shadow(0px 2px 5px rgb(255 255 255 / 0.16));
	--navmenu-item-bar: var(--color-secondary-alpha-75);
	--border-tech: var(--color-secondary);
	--address-color: var(--color-primary);
}

html {
	scroll-behavior: smooth;
}

body {
	position: relative;
	width: 100%;
	background-color: var(--background-color-body);
	color: var(--color-letter-body);
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		'Open Sans',
		'Helvetica Neue',
		sans-serif;
	line-height: 1.5;
	transition: background-color linear 400ms;
	overflow-x: hidden;
}

body.light {
	--background-color-body: #e6e6f0;
	--color-letter-body: #1b1a1a;
	--url-icon: #c25a19;
	--shadow-project-image: drop-shadow(0px 2px 2px rgb(0 0 0 / 0.12))
		drop-shadow(0px 2px 5px rgb(0 0 0 / 0.16));
	--bg-header-page: var(--color-black-1);
	--background-dot: rgba(4, 4, 4, 0.3);
	--color-title: var(--color-title-light);
	--introduction-title-gradient: linear-gradient(
		var(--rotate-gradient-title),
		var(--color-1-gradient-title-light) 40%,
		var(--color-2-gradient-title-light)
	);
	--color-highlighted: var(--color-light-1);
	--navmenu-item-bar: var(--color-light-1);
	--border-tech: var(--color-highlighted);
	--repository-link: var(--color-2-gradient-title-light);
	--address-color: #4a30ae;
}

.dot {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background-image: radial-gradient(ellipse 75% 20% at bottom center, rgb(20 20 224 / 0.35) -50%, transparent);
}

a {
	text-decoration: none;
	color: inherit;
}

img {
	max-width: 100%;
}

ul {
	padding: 0;
}

main {
	position: relative;
	z-index: 1;
}

@media (min-width: 22.5rem) {
	.dot:before {
		--dot-size: 2px;
	}
}

@media (min-width: 22.5625rem) {
	.dot:before {
		background-position-x: 0.375rem;
	}
}

@media (min-width: 33.75rem) {
	.dot:before {
		background-size: calc(24.5% - 1px) 12.5rem;
	}
}

@media (min-width: 48rem) {
	.dot:before {
		background-position-x: -0.625rem;
		background-size: calc(14.2857142857% - 1px) 15.625rem;
	}
}

@media (min-width: 64rem) {
	.dot:before {
		background-position-x: 0.625rem;
	}
}

@media (min-width: 80rem) {
	.dot:before {
		background-position-x: -3.375rem;
	}
}

@media (min-width: 87.5rem) {
	.dot:before {
		background-position-x: -0.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	body {
		transition-property: none;
	}

	.dot:before {
		background-image: none;
	}
}

@font-face {
	font-family: 'Poppins';
	font-display: 'fallback';
	src:
		local('Poppins Regular'),
		local('Poppins-Regular'),
		url('/fonts/Poppins-Regular.woff2') format('woff2');
	font-style: normal;
	font-weight: normal;
}

@keyframes dotScroll {
	from {
		background-position-y: 100%;
	}
	to {
		background-position-y: 0%;
	}
}

@keyframes dotScrollErrorPage {
	from {
		background-position-y: calc(100% + -4.375rem);
	}
	to {
		background-position-y: 0%;
	}
}