#v-page-header {
	position: sticky;
	top: 0;
	background-color: var(--white);
	z-index: 2;
	padding: 0 0 0.85rem;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 1px 2px;
}
#v-page-header .v-header-logo .v-image {
	max-width: 4rem;
}
#v-page-header .v-nav-links-wrapper {
	column-gap: 1.5rem;
}
#v-page-header .v-nav-links-wrapper .v-nav-link {
	font-size: 1.05rem;
	color: rgba(var(--dark-variant), 0.9);
	position: relative;
}
#v-page-header .v-nav-links-wrapper .v-nav-link::before {
	content: "";
	width: 100%;
	height: 1.5px;
	transition: transform 300ms ease-in-out;
	transform-origin: right;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: scaleX(0) translateY(1.5px);
	opacity: 0.7;
	background-color: var(--primary-clr);
}
#v-page-header .v-nav-links-wrapper .v-nav-link:hover::before {
	transform-origin: left;
	opacity: 1;
	transform: scaleX(1) translateY(1.5px);
}
.v-mouse-ele {
	position: fixed;
	background-color: var(--primary-clr);
	content: "";
	width: 15px;
	aspect-ratio: 1;
	border-radius: 50%;
	display: block;
	height: 15px;
	transition: 50ms ease;
	mix-blend-mode: difference;
	transform: translate(var(--x, 0), var(--y, 0));
	opacity: 0;
	z-index: 99;
}
.v-mouse-ele.active {
	opacity: 1;
}
#v-page-header .v-subheader {
	background-color: var(--primary-clr);
	padding: 3px;
	position: relative;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 300ms ease-in-out;
}
#v-page-header .v-subheader.active {
	grid-template-rows: 1fr;
}
#v-page-header .v-subheader .v-toggle-lg-screen-auth-dropdown {
	position: absolute;
	top: 0;
	right: 3.8%;
	transition: 300ms ease-in-out;
	transform: translate(0);
}
#v-page-header .v-subheader .v-toggle-lg-screen-auth-dropdown .v-toggler {
	--r: 50%;
	--pad: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	background-color: var(--primary-clr);
	padding: 14px calc(var(--pad) + 2px) var(--pad) calc(var(--pad) + 2px);
	border-radius: 0 0 var(--r) var(--r);
	transition: 300ms ease-in-out;
}
#v-page-header .v-subheader.active .v-toggle-lg-screen-auth-dropdown {
	transform: translate(0, calc(100% + 1.8rem));
}
#v-page-header .v-subheader.active .v-toggle-lg-screen-auth-dropdown .v-toggler {
	--r: 50%;
	border-radius: var(--r);
	padding: var(--pad);
}
#v-page-header .v-subheader:not(.active) .v-toggle-lg-screen-auth-dropdown .v-toggler:hover {
	--new-r: calc(var(--r) - 4%);
	padding-top: calc(var(--pad) + 20px);
	padding-bottom: calc(var(--pad) + 1px);
	border-end-end-radius: var(--new-r);
	border-end-start-radius: var(--new-r);
}
#v-page-header .v-subheader .v-subheader-link {
	display: flex;
	align-items: center;
	column-gap: 8px;
	padding: 6px 0;
	color: var(--white);
	text-decoration: 1.5px underline transparent;
	text-underline-offset: 4px;
	transition: 300ms ease-in-out;
}
#v-page-header .v-subheader .v-subheader-link:hover {
	text-decoration-color: rgba(var(--white-variant), 0.9);
	text-underline-offset: 1.5px;
}
#v-page-header .v-subheader .v-subheader-link svg {
	--size: 1.2rem;
}

.v-mobile-menu-toggler-container {
	margin-right: 2.5rem;
}
.v-mobile-menu-toggler-container .v-mobile-menu-toggler {
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	transition: 300ms ease-in-out;
	background-color: transparent;
	color: var(--dark);
	padding: 7px;
}
.v-mobile-menu-toggler-container .v-mobile-menu-toggler svg {
	--size: 1.5rem;
}
.v-mobile-menu-toggler-container .v-mobile-menu-toggler:hover {
	color: var(--white);
	background-color: var(--primary-clr);
}

/* for auth */
.v-auth-container {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.v-auth-container .v-image {
	width: 5rem;
	margin-bottom: 1rem;
}
.v-auth-container .v-auth-header {
	padding-bottom: 1.8rem;
	border-bottom: 1.5px solid #ddd;
	margin-bottom: 1.8rem;
	display: flex;
	flex-direction: column;
	row-gap: 5px;
}
.v-auth-container .v-auth-header .v-subtext {
	opacity: 0.8;
	font-size: 1.05rem;
}
.v-auth-container .v-form {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}
.v-auth-container .v-form .form-control {
	min-height: 3rem;
	font-size: 1.09rem;
}
.v-auth-container .v-form .form-control::placeholder {
	letter-spacing: -0.2px;
	color: var(--form-control-text-clr);
	opacity: 0.6;
}
.v-auth-container .v-form .form-control:focus {
	border-color: var(--primary-clr);
}
.v-auth-container .v-form .v-label {
	opacity: 0.9;
}
.v-auth-container .v-form .v-as-label {
	color: var(--primary-clr);
	text-decoration: 1.5px underline var(--primary-clr);
}
.v-auth-container .v-form .v-form-input-inner {
	position: relative;
	margin-top: 2px;
}
.v-auth-container .v-form-input-inner:has(.v-password-toggler) .form-control {
	padding-right: 2rem;
}
.v-auth-container .v-form .v-form-input-inner .v-password-toggler {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	transition: 300ms ease-in-out;
	background-color: transparent;
}
.v-auth-container .v-form-input-inner .v-password-toggler svg {
	--size: 1.5rem;
	color: var(--form-control-text-clr);
}
.v-auth-container .v-form-input-inner .v-password-toggler:hover {
	background-color: #ddd3;
}
.v-auth-container .v-action-container {
	margin-top: 1rem;
}
.v-auth-container .v-action-container .v-action-btn {
	background-color: var(--primary-clr);
	color: var(--white);
	padding: 0.8rem 1rem;
	width: 100%;
	border-radius: 5px;
}
.v-auth-container .v-post-inputs {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 1rem;
}
.v-auth-container .v-post-inputs .v-subtext,
.v-auth-container .v-post-inputs .v-subtext [href] {
	font-size: 0.99rem;
}
.v-auth-container .v-post-inputs .v-subtext [href] {
	color: var(--primary-clr);
}