:root {
	--bodyBackgroundColor: #f5f5f5;
	--selectionColor: #dfdfdf;
	--aTagColor: #202020;
	--headerBackgroundColor: #ffffff;
	--headerBorderBackgroundColor: #dfdfdf;
	--mainNavigationUlBackgroundColor: #202020;
	--mainNavigationAColor: #dfdfdf;
	--mainNavigationAFocusColor: #606060;
	--buttonHoverBorder: #9f9f9f;
	--buttonHoverColor: #202020;
	--buttonHoverBackgroundColor: #dfdfdf;
	--buttonColor: #dfdfdf;
	--buttonBackgroundColor: #202020;
	--mainPageColor: #202020;
	--mainPageBackgroundColor: #f5f5f5;
	--mainHeadingBackgroundColor: #202020;
	--mainHeadingBorder: #606060;
	--mainHeadingColor: #dfdfdf;
	--mainPagePortfolioCardBackgroundColor: #dfdfdf;
	--mainPagePortfolioCardBorderColor: #606060;
	--mainPagePortfolioCardColor: #202020;
	--mainPagePortfolioBackgroundCardColor: #cdcdcd;
	--mainPagePortfolioInputFocusBoxShadow: #202020;
	--mainPageProfileCardBackgroundColor: #dfdfdf;
	--mainPageParentCardBackgroundColor: #9f9f9f;
	--mainPageParentCardBorderColor: #bfbfbf;
	--mainPageProfileCardColor: #202020;
	--mainPageProfileImageBorderColor: #dfdfdf;
	--mainPageProfileNameTextFill: #202020;
	--mainPageProfileNameSVGColor1: #dfdfdf;
	--mainPageProfileNameSVGColor2: #dfdfdf;
	--mainPageProfileNameSVGColor3: #dfdfdf;
	--mainPageProfileNameSVGColor4: #9f9f9f;
	--mainPagePortfolioHRColor: #bfbfbf;
	--mainPagePortfolioSecondaryCardColor: #dfdfdf;
	--mainPagePortfolioSecondaryCardBackgroundColor: #606060;
	--footerTextColor: #9f9f9f;
	--header-height: 82px;
	--navButtonSpacing: 42.35px;
}

[data-theme="dark"] {
	--bodyBackgroundColor: #0a0a0a;
	--selectionColor: #606060;
	--aTagColor: #dfdfdf;
	--headerBackgroundColor: #000000;
	--headerBorderBackgroundColor: #202020;
	--mainNavigationUlBackgroundColor: #202020;
	--mainNavigationAColor: #dfdfdf;
	--mainNavigationAFocusColor: #9f9f9f;
	--buttonHoverBorder: #606060;
	--buttonHoverColor: #dfdfdf;
	--buttonHoverBackgroundColor: #202020;
	--buttonColor: #202020;
	--buttonBackgroundColor: #dfdfdf;
	--mainPageColor: #dfdfdf;
	--mainPageBackgroundColor: #0a0a0a;
	--mainHeadingBackgroundColor: #dfdfdf;
	--mainHeadingBorder: #9f9f9f;
	--mainHeadingColor: #202020;
	--mainPagePortfolioCardBackgroundColor: #202020;
	--mainPagePortfolioCardBorderColor: #606060;
	--mainPagePortfolioCardColor: #dfdfdf;
	--mainPagePortfolioBackgroundCardColor: #202020;
	--mainPagePortfolioInputFocusBoxShadow: #dfdfdf;
	--mainPageProfileCardBackgroundColor: #202020;
	--mainPageParentCardBackgroundColor: #606060;
	--mainPageParentCardBorderColor: #404040;
	--mainPageProfileCardColor: #dfdfdf;
	--mainPageProfileImageBorderColor: #202020;
	--mainPageProfileNameTextFill: #dfdfdf;
	--mainPageProfileNameSVGColor1: #202020;
	--mainPageProfileNameSVGColor2: #202020;
	--mainPageProfileNameSVGColor3: #202020;
	--mainPageProfileNameSVGColor4: #606060;
	--mainPagePortfolioHRColor: #404040;
	--mainPagePortfolioSecondaryCardColor: #202020;
	--mainPagePortfolioSecondaryCardBackgroundColor: #9f9f9f;
	--footerTextColor: #606060;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: "Poppins", sans-serif;
	font-style: normal;

	margin: 0;
	padding-top: var(--header-height);
	max-width: 100vw;
	overflow-x: hidden;

	background-color: var(--bodyBackgroundColor);
}

::selection {
	background: var(--selectionColor);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="number"] {
	appearance: none;
	-moz-appearance: textfield;
	-webkit-appearance: none;
}

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

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;

	padding-inline: clamp(1rem, -5.364rem + 16.97vw, 15rem);

	background-color: var(--headerBackgroundColor);
	border-bottom: 2px solid var(--headerBorderBackgroundColor);
}

#navbarLogo {
	display: flex;
	align-items: center;
	justify-content: center;

	margin-block: 25px;

	line-height: 0;
}

header a img {
	max-width: 3.25rem;
	transition: all 200ms;
}

#mainNavigation {
	display: flex;
	align-items: center;
	gap: 1rem;
}

#mainNavigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;

	list-style: none;

	margin: 0;
	padding: 0;

	transition: all 200ms;
}

#mainNavigation a {
	font-size: clamp(1.5rem, 1.367rem + 0.426vw, 1.75rem);
	transition: all 200ms;
}

#themeButton {
	width: var(--navButtonSpacing);

	margin: 0;
	padding: 0;

	background: none;
	border: none;
	cursor: pointer;
}

#themeButton img {
	height: 100%;
}

#menuButton {
	display: none;

	margin: 0;
	padding: 0;

	width: var(--navButtonSpacing);

	background: none;
	border: none;
	cursor: pointer;
}

@media (max-width: 415px) {
	#menuButton {
		display: flex;
		transition: all 200ms;
	}

	#menuButton img {
		height: 100%;
	}

	#mainNavigation ul {
		display: none;
	}

	#mainNavigation a {
		font-size: 2.5rem;
		color: var(--mainNavigationAColor);
	}

	#mainNavigation ul.open {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;

		position: absolute;

		inset: var(--header-height) 0 0 0;
		height: calc(100vh - var(--header-height));

		padding-inline: 16px;
		gap: 3rem;

		background-color: var(--mainNavigationUlBackgroundColor);
		transition: all 200ms;
	}
}

@media (hover: hover) and (pointer: fine) {
	header a img:hover {
		opacity: 0.7;
	}

	#menuButton:hover {
		opacity: 0.7;
	}

	#mainNavigation a:hover,
	#mainNavigation a:focus {
		color: var(--mainNavigationAFocusColor);
		outline: none;
	}

	button:hover {
		cursor: pointer;
		border: 2px solid var(--buttonHoverBorder);
		color: var(--buttonHoverColor);
		background-color: var(--buttonHoverBackgroundColor);
	}
}

button {
	width: 80px;
	height: 25px;

	border: 2px solid transparent;
	border-radius: 8px;

	font-family: inherit;

	color: var(--buttonColor);
	background-color: var(--buttonBackgroundColor);

	user-select: none;

	transition: all 200ms;
}

#mainPage {
	position: relative;
	overflow: hidden;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;

	gap: 1.5rem;

	min-height: calc(100vh - var(--header-height) - 25px);

	color: var(--mainPageColor);
	background-color: var(--mainPageBackgroundColor);
}

#parentCard {
	position: absolute;
	z-index: 1;

	width: clamp(25rem, 14.803rem + 54.386vw, 63.75rem);
	height: clamp(25rem, 15.132rem + 52.632vw, 62.5rem);

	top: 50%;
	left: 50%;

	transform: translate(-50%, -28.625%);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;

	padding: 2.5rem;

	background-color: var(--mainPageParentCardBackgroundColor);
	border: 5px solid var(--mainPageParentCardBorderColor);
	border-radius: 50px;

	transition: all 200ms;
}

#backgroundGrid {
	position: absolute;
	z-index: 0;

	display: grid;
	grid-template-columns: repeat(16, clamp(3.67647rem, 2.17691rem + 7.99794vw, 9.375rem));
	grid-template-rows: repeat(15, calc(clamp(3.67647rem, 2.17691rem + 7.99794vw, 9.375rem) * 7 / 6));
	gap: clamp(0.588235rem, 0.348306rem + 1.27967vw, 1.5rem);

	opacity: 0.5;

	transition: all 200ms;
}

#backgroundGrid div {
	background: var(--mainPagePortfolioBackgroundCardColor);

	border: 1px dashed var(--mainPagePortfolioCardBorderColor);
	border-radius: 15px;
}

.portfolioCard {
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: center;

	width: 150px;
	aspect-ratio: 6 / 7;

	color: var(--mainPagePortfolioCardColor);
	text-decoration: none;

	background-color: var(--mainPagePortfolioCardBackgroundColor);
	border-radius: 15px;

	transition: all 200ms;
}

.cardContent {
	display: flex;
	flex-direction: column;
	align-items: center;

	height: 100%;
	padding: 1.5rem;
}

.cardContent svg {
	width: 64px;
	height: 64px;

	margin: auto 0;

	fill: currentColor;
	flex-shrink: 0;
}

.cardContent h2 {
	margin: 0;

	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;

	text-align: center;
	overflow-wrap: break-word;
}

#profileCard {
	display: flex;
	align-items: center;
	justify-content: center;

	margin-block: 2rem;
	gap: 2rem;

	width: fit-content;
	min-height: 280px;

	border-radius: 15px;

	transition: all 200ms;
}

#profileImage {
	width: 280px;
	height: 280px;

	border: 8.75px solid var(--mainPageProfileImageBorderColor);
	border-radius: 50%;

	flex-shrink: 0;

	transition: all 200ms;
}

#profileName {
	flex-shrink: 0;
	transition: all 200ms;
}

#profileName svg {
	display: block;

	width: 110%;
	height: auto;

	transition: all 200ms;
}
#profileSVG1 {
	fill: var(--mainPageProfileNameSVGColor1);
	transition: all 200ms;
}

#profileSVG2 {
	fill: var(--mainPageProfileNameSVGColor2);
	transition: all 200ms;
}
#profileSVG3 {
	fill: var(--mainPageProfileNameSVGColor3);
	transition: all 200ms;
}
#profileSVG4 {
	fill: var(--mainPageProfileNameSVGColor4);
	transition: all 200ms;
}

#profileName text {
	font-size: 48px;
	font-weight: 700;

	fill: var(--mainPageProfileNameTextFill);
}

#parentCard hr {
	width: 70%;
	border: 0;
	border: 2px solid var(--mainPagePortfolioHRColor);
	border-radius: 2px;
	margin: 1.5rem 0;
}

#portfolioCards {
	display: flex;
	gap: 7rem;
	margin-block: 2rem;
}

#contactCard {
	align-self: center;
	width: 112.5px;
	aspect-ratio: 6 / 7;
	min-height: 0;

	color: var(--mainPagePortfolioSecondaryCardColor);
	background-color: var(--mainPagePortfolioSecondaryCardBackgroundColor);
}

#contactCard .cardContent svg {
	width: 48px;
	height: 48px;
}

@media (hover: hover) and (pointer: fine) {
	.portfolioCard:hover {
		transform: translateY(-5px);
	}

	#profileName:hover,
	#profileImage:hover {
		transform: translateY(-5px);
		cursor: default;
	}
}

@media (max-width: 900px) {
	#mainPage {
		flex-direction: column;
	}
}

@media (max-width: 500px) {
	.portfolioCard {
		min-height: 150px;
	}
}

@media (max-width: 949px), (max-height: 949px) {
	#mainPage {
		min-height: calc(100vh - var(--header-height) - 25px);
	}

	#parentCard {
		width: 2000px;
		height: 2000px;
		justify-content: center;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	#parentCard hr {
		width: 80vw;
	}

	#profileCard {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		min-height: 140px;
	}

	#profileImage {
		width: clamp(8.75rem, -0.025rem + 40.115vw, 17.5rem);
		height: clamp(8.75rem, -0.025rem + 40.115vw, 17.5rem);
		border-width: 4.375px;
	}

	#profileName svg {
		width: clamp(10.938rem, 3.103rem + 35.817vw, 18.75rem);
	}

	.portfolioCard {
		width: clamp(6.25rem, 3.116rem + 14.327vw, 9.375rem);
		min-height: 0;
		aspect-ratio: 6 / 7;
	}

	#portfolioCards {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: clamp(14px, calc(16.017vw - 42.06px), 69.9px);
		margin-block: 2rem;
	}

	#contactCard {
		width: clamp(4.6875rem, 2.337rem + 10.745vw, 7.03125rem);
		min-height: 0;
	}

	.cardContent svg {
		width: clamp(3rem, 1.997rem + 4.585vw, 4rem);
		height: clamp(3rem, 1.997rem + 4.585vw, 4rem);
	}

	.cardContent h2 {
		font-size: clamp(0.75rem, 0.499rem + 1.146vw, 1rem);
		font-weight: 600;
		line-height: 1.2;
	}

	#contactCard .cardContent {
		padding: 0.5rem;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
	}

	#contactCard .cardContent svg {
		width: clamp(3rem, 1.997rem + 4.585vw, 4rem);
		height: clamp(3rem, 1.997rem + 4.585vw, 4rem);
		margin: 0;
	}

	#contactCard .cardContent h2 {
		font-size: clamp(0.75rem, 0.499rem + 1.146vw, 1rem);
		font-weight: 600;
		line-height: 1.2;
		margin: 0;
	}
}

footer {
	text-align: center;
	color: var(--footerTextColor);
	cursor: default;
}

/*
#f5f5f5
#dfdfdf
#bfbfbf
#9f9f9f
#7f7f7f
#606060
#404040
#202020
*/