#hero
{
	height: 100svh;
	align-content: center;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

.hero-tip
{
	width: fit-content;
	height: 40px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 4px 16px 4px 4px;
	gap: 10px;
	background: color-mix(in srgb, white 5%, var(--clr-accent) 5%);
	backdrop-filter: blur(var(--blur-bg));
	border-radius: var(--main-border-radius);
	border: 1px solid color-mix(in srgb, white 10%, var(--clr-accent) 5%);
	color: rgba(255, 255, 255, 0.4);
}

.hero-tip > img
{
	height: 100%;
	object-fit: contain;
	border-radius: var(--main-border-radius);
}

.hero-tip > span
{
	background: none;
	backdrop-filter: none;
}

.hero-title
{
	width: fit-content;
	height: fit-content;
	text-align: center;
	white-space: normal;
	font-size: calc(var(--main-font-size) * 4);
	font-style: italic;
	margin-bottom: -8px;
}

.hero-description
{
	width: fit-content;
	height: fit-content;
	text-align: center;
	white-space: normal;
	font-size: var(--main-font-size);
	margin-bottom: 32px;
}

.hero-scroll-hint
{
	position: absolute;
	bottom: clamp(10px, 2vw, 200px);
	width: fit-content;
	height: fit-content;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.hero-scroll-hint > p
{
	padding-left: 3px;
	letter-spacing: 3px;
	font-size: calc(var(--main-font-size) * 0.875);
	color: rgba(255, 255, 255, 0.2);
}

.hero-scroll-hint-glow-lines
{
	width: fit-content;
	height: fit-content;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 8px;
}

.hero-scroll-hint-glow-line
{
	width: 2px;
	height: 40px;
	background: rgba(255, 255, 255, 0);
	mask-image: linear-gradient(to bottom, transparent, white 90%, transparent);
	animation: hero-scroll-hint-glow-line 1.5s infinite;
}

.hero-scroll-hint-glow-line::after
{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, color-mix(in srgb, var(--clr-accent) 0%, transparent), var(--clr-accent) 90%, color-mix(in srgb, var(--clr-accent) 0%, transparent));
	animation: hero-scroll-hint-glow-line_after 1.5s infinite;
}

.hero-scroll-hint-glow-line:nth-child(2) { margin-top: 15px; }

@keyframes hero-scroll-hint-glow-line
{
	20% { background: rgba(255, 255, 255, 0); }
	50% { background: rgba(255, 255, 255, 0.1); }
	100% { background: rgba(255, 255, 255, 0); }
}

@keyframes hero-scroll-hint-glow-line_after
{
	0% { transform: translateY(-100%); }
	100% { transform: translateY(100%); }
}

.content-header
{
	width: fit-content;
	height: fit-content;
	margin: 0 auto 60px auto;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
}

.content-header-image
{
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.content-header-first-text
{
	max-width: 95vw;
	letter-spacing: 3px;
	font-size: var(--main-font-size);
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance;
}

.content-header-second-text
{
	max-width: 95vw;
	font-size: calc(var(--main-font-size) * 2.5);
	text-align: center;
	text-wrap: balance;
}

.project-items
{
	width: fit-content;
	max-width: 75%;
	height: fit-content;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
}

.project-item
{
	width: 400px;
	height: 260px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--second-border-radius);
	backdrop-filter: blur(var(--blur-bg));
	border: 2px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 16px 64px 0 rgba(0, 0, 0, 0.25);
	padding-bottom: 16px;
	pointer-events: all;
	cursor: pointer;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 16px;
}

.project-item-image
{
	display: block;
	width: 100%;
	min-height: 50%;
	flex-grow: 1;
	border-radius: calc(var(--second-border-radius) - 2px);
	object-fit: cover;
	filter: saturate(0.5);
}

.project-item-content-container
{
	width: 100%;
	height: fit-content;
	padding: 0 20px 0 20px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	flex-shrink: 0;
}

.project-item-text-container
{
	width: fit-content;
	height: fit-content;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.project-item h5
{
	max-width: calc(400px - 100px);
	overflow: clip;
	text-overflow: ellipsis;
}

.project-item svg
{
	width: 20px;
	margin-top: 4px;
	flex-shrink: 0;
	fill: rgba(255, 255, 255, 0.25);
	transform: rotateZ(-45deg);
}

.project-item:hover
{
	background: var(--clr-accent);
	border-color: var(--clr-accent);
	box-shadow: 0 16px 100px 4px color-mix(in srgb, var(--clr-accent) 50%, transparent);
	z-index: 1;
}

.project-item:hover .project-item-image { filter: none; }
.project-item:hover h5, .project-item:hover p { color: rgba(0, 0, 0, 0.65); }

.project-item:hover svg
{
	fill: rgba(0, 0, 0, 0.65);
	transform: none;
}

.project-item:active
{
	background: color-mix(in srgb, var(--clr-accent) 40%, transparent);
	border-color: color-mix(in srgb, rgba(255, 255, 255, 0.75), var(--clr-accent));
	box-shadow: 0 16px 100px -4px color-mix(in srgb, var(--clr-accent) 50%, transparent);
}

.project-item:active .project-item-image { filter: saturate(0.85); opacity: 0.75; }
.project-item:active h5, .project-item:active p { color: color-mix(in srgb, rgba(255, 255, 255, 0.75), var(--clr-accent)); }
.project-item:active svg { fill: color-mix(in srgb, rgba(255, 255, 255, 0.75), var(--clr-accent)); transform: none; }

.dialog
{
	position: fixed;
	inset: 0;
	background: color-mix(in srgb, var(--clr-dark) 25%, transparent);
	backdrop-filter: blur(calc(var(--blur-bg) * 0.25));
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 11;
	opacity: 0;
}

.dialog > .dialog-container
{
	width: fit-content;
	height: fit-content;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
	background: var(--clr-dark);
	padding: 20px 10px;
	border-radius: var(--second-border-radius);
}

.dialog p
{
	width: fit-content;
	height: fit-content;
	max-width: 90%;
	text-wrap: wrap;
	text-align: center;
}

.dialog .dialog-buttons
{
	width: fit-content;
	height: fit-content;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.dialog .button
{
	opacity: 1;
	cursor: pointer;
}

.dialog > svg
{
	position: fixed;
	top: 5vw;
	right: 5vw;
	pointer-events: none;
	opacity: 0.75;
	transition: all 0.2s, transform 0.75s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.dialog > svg:hover { opacity: 1; transform: scale(1.25); }
.dialog > svg:active { opacity: 0.5; transform: scale(0.75); }

.experience-items
{
	width: fit-content;
	height: fit-content;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 20px;
}

.horizontal-item
{
	width: 600px;
	height: 74px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--second-border-radius);
	backdrop-filter: blur(var(--blur-bg));
	border: 2px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 16px 64px 0 rgba(0, 0, 0, 0.25);
	padding: 10px 25px 10px 10px;
	flex-shrink: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 10px;
	pointer-events: all;
}

.horizontal-item-image
{
	display: block;
	width: 50px;
	height: 100%;
	flex-shrink: 0;
	flex-grow: 0;
	border-radius: var(--main-border-radius);
	object-fit: contain;
	opacity: 0.85;
}

.horizontal-item-content-container
{
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	flex-grow: 1;
}

.horizontal-item-text-container
{
	width: fit-content;
	height: fit-content;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.horizontal-item h5, .horizontal-item p
{
	max-width: calc(600px - 225px);
	overflow: clip;
	text-overflow: ellipsis;
}

.stats-items
{
	width: fit-content;
	max-width: 80%;
	height: fit-content;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

.stats-item
{
	width: 250px;
	height: fit-content;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
}

.stats-item h3 { font-size: calc(var(--main-font-size) * 6); }
.stats-item p { font-size: var(--main-font-size); }

.stats-separator
{
	width: 2px;
	height: 120px;
	flex-shrink: 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}

.why-items
{
	width: 70%;
	height: fit-content;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: auto;
	justify-content: center;
	gap: 20px;
}

.why-item
{
	height: 108px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--second-border-radius);
	backdrop-filter: blur(var(--blur-bg));
	border: 2px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 16px 64px 0 rgba(0, 0, 0, 0.25);
	padding: 10px 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 10px;
	pointer-events: all;
}

.why-item:nth-child(1)
{
	grid-column: 1 / 3;
	grid-row: 1;
}

.why-item:nth-child(2)
{
	grid-column: 3 / 5;
	grid-row: 1;
}

.why-item:nth-child(3)
{
	grid-column: 5 / 7;
	grid-row: 1;
}

.why-item:nth-child(4)
{
	grid-column: 1 / 4;
	grid-row: 2;
}

.why-item:nth-child(5)
{
	grid-column: 4 / 7;
	grid-row: 2;
}

.why-item-image
{
	display: block;
	width: 80px;
	height: 100%;
	flex-shrink: 0;
	flex-grow: 0;
	border-radius: var(--main-border-radius);
	object-fit: contain;
	opacity: 0.85;
}

.why-item-content-container
{
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	flex-grow: 1;
}

.why-item-text-container
{
	width: fit-content;
	height: fit-content;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.why-item-stack-container
{
	position: absolute;
	inset: 0;
	padding-right: 30px;
	border-radius: calc(var(--second-border-radius) - 2px);
	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0.25));
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
}

.why-item-stack-inner-container
{
	width: fit-content;
	height: fit-content;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
	transform: rotateZ(10deg);
}

.why-item-stack-inner-container > img
{
	width: 40px;
	height: 40px;
	object-fit: contain;
}

#contacts .content-header { margin-bottom: 10px; }

.contacts-container
{
	width: fit-content;
	height: fit-content;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
}

.contacts-header { font-size: calc(var(--main-font-size) * 4); }
.contacts-container .button { margin-top: 50px; margin-bottom: 20px; }

.footer-container
{
	width: fit-content;
	height: fit-content;
	padding: 40px 0;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 60px;
}

.footer-container p { color: rgba(255, 255, 255, 0.2); font-size: calc(var(--main-font-size) * 0.875); letter-spacing: 0.5px; }

@media (max-width: 1700px)
{
	.project-items { max-width: 80%; }

	.why-item:nth-child(1) { grid-column: 1 / 4; grid-row: 1; }
	.why-item:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
	.why-item:nth-child(3) { grid-column: 1 / 4; grid-row: 2; }
	.why-item:nth-child(4) { grid-column: 4 / 7; grid-row: 2; }
	.why-item:nth-child(5) { grid-column: 2 / 6; grid-row: 3; }
	.why-item-stack-container { gap: 30px; }
}

@media (max-width: 1440px)
{
	.stats-items { gap: 0; }
	.why-item-stack-container { gap: 20px; }
}

@media (max-width: 1300px)
{
	.project-items { max-width: 90%; }

	.stats-items
	{
		width: 600px;
		max-width: unset;
		flex-wrap: wrap;
		gap: 20px;
	}

	.stats-separator:nth-child(4) { display: none; }

	.why-items { width: 80vw; }
}

@media (max-width: 1120px)
{
	.stats-items { max-width: calc(90vw + 4px); }
	.stats-item h3 { font-size: calc(var(--main-font-size) * 5); }
	.stats-item p { font-size: calc(var(--main-font-size) * 0.9); max-width: 12.5vw; text-wrap: pretty; text-align: center; }

	.why-items { width: 70vw; }
	.why-item:nth-child(1) { grid-column: 1 / 7; grid-row: 1; }
	.why-item:nth-child(2) { grid-column: 1 / 7; grid-row: 2; }
	.why-item:nth-child(3) { grid-column: 1 / 7; grid-row: 3; }
	.why-item:nth-child(4) { grid-column: 1 / 7; grid-row: 4; }
	.why-item:nth-child(5) { grid-column: 1 / 7; grid-row: 5; }
}

@media (max-width: 600px)
{
	navbar { padding: 10px 32px; }
	navbar .button { display: none; }

	.project-items { max-width: 100%; gap: 20px; }
	.project-item { max-width: 90vw; }
	.project-item h5 { max-width: calc(90vw - 100px); }

	.stats-item {width: 100%;}
	.stats-separator { display: none; }
}

@media (max-width: 960px)
{
	.hero-title { font-size: calc(var(--main-font-size) * 4); }
	.hero-title .text-handwritten { font-size: calc(var(--main-font-size) * 7); }

	.content-header { margin-bottom: 40px; gap: 8px; }
	.content-header-image { width: 40px; height: 40px; }
	.content-header-first-text { font-size: calc(var(--main-font-size) * 0.9); }
	.content-header-second-text { font-size: calc(var(--main-font-size) * 2.25); }

	.why-item-stack-inner-container:nth-child(1) { display: none; }
}

@media (max-width: 760px)
{
	.hero-tip { height: 32px; padding: 4px 10px 4px 4px; gap: 8px; }
	.hero-tip > * { font-size: calc(var(--main-font-size) * 0.875); }

	.hero-title { font-size: calc(var(--main-font-size) * 3); }
	.hero-title .text-handwritten { font-size: calc(var(--main-font-size) * 6); }

	.horizontal-item { max-width: 90vw; }
	.horizontal-item h5, .horizontal-item p { max-width: calc(90vw - 200px); }

	.horizontal-item p:not(.text-subtext-in-item)
	{
		max-width: clamp(70px, 15vw, 15vw) !important;
		text-wrap: pretty;
		text-align: right;
		line-height: 120%;
	}

	.stats-item h3 { font-size: calc(var(--main-font-size) * 4); }
	.stats-item p { font-size: calc(var(--main-font-size) * 0.8); }
	.stats-separator { height: 100px; }

	.why-items { width: 80vw; }
	.why-item-stack-inner-container:nth-child(3) { display: none; }

	.contacts-header { font-size: calc(var(--main-font-size) * 3); }
}

@media (max-width: 560px)
{
	.page-content-container { margin-bottom: 100px; }

	.hero-title { font-size: calc(var(--main-font-size) * 2.5); }
	.hero-title .text-handwritten { font-size: calc(var(--main-font-size) * 4.5); }

	.content-header { margin-bottom: 40px; gap: 8px; }
	.content-header-image { width: 40px; height: 40px; }
	.content-header-first-text { font-size: calc(var(--main-font-size) * 0.9); }
	.content-header-second-text { font-size: calc(var(--main-font-size) * 2.25); }

	.content-header { margin-bottom: 30px; gap: 6px; }
	.content-header-image { width: 30px; height: 30px; }
	.content-header-first-text { font-size: calc(var(--main-font-size) * 0.8); }
	.content-header-second-text { font-size: calc(var(--main-font-size) * 2); }

	.stats-item h3 { font-size: calc(var(--main-font-size) * 3); }
	.stats-item p { font-size: calc(var(--main-font-size) * 0.7); max-width: 30vw; }
	.stats-separator { height: 70px; }

	.why-items { width: 90vw; }
	.why-item h5, .why-item p
	{
		max-width: calc(90vw - 125px);
		overflow: clip;
		text-overflow: ellipsis;
	}
	.why-item-image { width: 70px; }
	.why-item-stack-inner-container:nth-child(4) { display: none; }

	.contacts-header { font-size: calc(var(--main-font-size) * 2.75); }
}