:root {
	--box-shadow-patch: 0 1px 1px hsl(0deg 0% 0% / 0.035),
    0 2px 2px hsl(0deg 0% 0% / 0.035),
    0 4px 4px hsl(0deg 0% 0% / 0.035),
    0 8px 8px hsl(0deg 0% 0% / 0.035),
    0 16px 16px hsl(0deg 0% 0% / 0.035);
	--box-shadow-patch-even-reduced: 0px 0px 14px -5px rgba(0, 0, 0, 0.5);
	--box-shadow-patch-even: 0px 0px 20px -5px rgba(0, 0, 0, 0.5);
	--box-shadow-inset-patch-even: 0px 0px 20px -5px inset rgba(0, 0, 0, 0.4);
	--box-shadow-inset-patch: 0 1px 1px inset rgba(0, 0, 0, 0.075),
    0 2px 2px inset hsl(0deg 0% 0% / 0.075),
    0 4px 4px inset hsl(0deg 0% 0% / 0.075),
    0 8px 8px inset hsl(0deg 0% 0% / 0.064),
    0 16px 16px inset hsl(0deg 0% 0% / 0.052);
	--dark-mode-card-background: #303134;
	--light-mode-card-background: #FFFFFF;
	--dark-mode-background: #2a2a2c;
	--light-mode-background: #FFFFFF;
	--primary-color: #7d7dff;
	--secondary-color: #ff7d7d;
	--gradient-color-primary: rgba(79,172,254,0.5);
	--gradient-color-secondary: rgba(0,242,254,0.79);
}

@media screen and (prefers-color-scheme: light) {
	body {
		background: var(--light-mode-background);
	}
	.navbar {
		display: flex;
		width: 100% !important;
		height: 43px;
	}

	.navbar-brand {
		width: 43px;
		height: 43px;
	}

	.logo {
		width: 43px;
		height: 43px;
	}

	.content-container-style {
		width: auto;
		height: 350px;
		padding-left: 40px;
		padding-right: 40px;
	}

	.card-logo {
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 20px;
		padding-right: 20px;
		width: 67px;
		height: 67px;
		color: #7d7dff;
		border-radius: 50%;
		box-shadow: var(--box-shadow-inset-patch);
		background: var(--light-mode-card-background);
	}

	.card[type="left"] {
		background: var(--light-mode-card-background);
		border-radius: 10px;
		border: none;
		margin-right: 10px;
		padding: 0;
	}

	.card[type="middle"] {
		background: var(--light-mode-card-background);
		border-radius: 10px;
		border: none;
		margin-top: 112px;
		padding: 0;
	}

	.card[type="right"] {
		background: var(--light-mode-card-background);
		border-radius: 10px;
		border: none;
		margin-top: 112px;
		padding: 0;
	}
	.img-container[type="hire"] {
		box-shadow: var(--box-shadow-patch);
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 170px;
		height: 170px;
		border-radius: 50%;
		transform: translate(50%, -90%) rotate(-45deg);
		background: var(--dark-mode-card-background);
	}

	.img-container[type="auth"] {
		box-shadow: var(--box-shadow-patch);
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 170px;
		height: 170px;
		border-radius: 50%;
		transform: translate(50%, -90%) rotate(-45deg);
		background: var(--dark-mode-card-background);
	}

	.img-container {
		background: var(--dark-mode-card-background);
		transform: translateY(-22%);
		border-radius: 50%;
		width: 120px;
		height: 120px;
	}

	.img-container {
		box-shadow: var(--box-shadow-inset-patch);
		background: var(--light-mode-card-background);
		transform: translateY(-22%);
		border-radius: 50%;
		width: 120px;
		height: 120px;
	}

	.img-container[type="top"] {
		box-shadow: none;
		background: var(--light-mode-card-background);
		transform: translateY(-22%);
		border-radius: 50%;
		width: 120px;
		height: 120px;
	}

	.card-shadow-patch {
		box-shadow: var(--box-shadow-patch-even-reduced);
	}

	.header-sub-text {
		color: #848484;
		font-size: 0.5rem;
		font-weight: 650;
		letter-spacing: 1px;
		padding-left: 40px;
		padding-right: 40px;
	}

	.coffee-button {
		margin-top: 33px;
		width: 280px;
		height: 58px;
		background: #7d7dff;
		cursor: pointer;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		border-radius: 23px;
	}

	.card-text-style {
		color: rgba(84,84,84,0.49);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.card-text-style[type="color"] {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-transform: uppercase;
	}

	.content-container-text {
		color: rgba(84,84,84,0.49);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-transform: uppercase;
	}

	.card-header-title-style {
		font-size: 17px;
		text-transform: uppercase;
		padding-left: 7px;
		padding-right: 7px;
		color: var(--primary-color);
		font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
		font-weight: 650;
		margin-bottom: 0;
		letter-spacing: 1px;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.header-text {
		font-size: 1.24rem;
		color: #848484;
		font-weight: 650;
		font-family: Roboto;
		margin-bottom: 0px;
	}

	.profile-picture-wrapper {
		width: 204px;
		height: 204px;
		border-radius: 50%;
	}

	.card-content-title {
		display: flex !important; align-items: center; justify-content: center;
		margin-bottom: 0;
		font-size: .63em;
		font-family: Roboto;
		width: 100%;
	}

	.card-content-style {
		border-radius: 25px;
		padding: 0px;
		border: none;
		margin-bottom: 0px;
		margin-left: 10px;
		margin-right: 10px;
	}

	.login-nav-item {
		display: flex;
		align-items: center;
		text-transform: uppercase;
		border: 2px solid #7d7dff;
		border-bottom-left-radius: 8px;
		border-top-left-radius: 8px;
		border-bottom-right-radius: 8px;
		border-top-right-radius: 8px;
		text-align: center;
		font-family: Roboto;
		font-weight: bold;
		letter-spacing: 1px;
		font-size: 10px;
		color: #7d7dff !important;
		padding-left: 7px;
		padding-right: 7px;
	}

	.login-nav-item:hover {
		text-transform: uppercase;
		border: 2px solid #7d7dff;
		border-radius: 8px;
		text-align: center;
		font-family: Roboto;
		font-weight: bold;
		letter-spacing: 1px;
		font-size: 10px;
		color: #7d7dff !important;
		padding-left: 7px;
		padding-right: 7px;
	}

	.hire-nav-item {
		display: flex;
		align-items: center;
		text-transform: uppercase;
		border: 2px solid #ff7d7d;
		border-radius: 8px;
		text-align: center;
		font-family: Roboto;
		font-weight: bold;
		letter-spacing: 1px;
		font-size: 10px;
		color: #ff7d7d !important;
		padding-left: 7px;
		padding-right: 7px;
	}

	.hire-nav-item:hover {
		cursor: pointer;
		background: #ff7d7d;
		text-transform: uppercase;
		text-align: center;
		font-family: Roboto;
		font-weight: bold;
		letter-spacing: 1px;
		font-size: 10px;
		color: #ffffff !important;
	}

	.portfolio-nav-item { display: none; }

	.content-hire-container {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card-hire-title {
		font-weight: bold;
		color: #7d7dff;
		margin-top: 20px;
		font-family: Roboto;
		letter-spacing: 3px;
		text-align: center;
		font-size: 22px;
		text-transform: uppercase;
		margin-bottom: 40px;
	}

	.card-auth-container {
		border-radius: 15px;
		padding-top: 50px;
		background: var(--light-mode-card-background);
		width: 475px;
		height: auto;
		padding-left: 3%;
		padding-right: 3%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: var(--box-shadow-patch-even-reduced);
	}

	.card-hire-container {
		border-radius: 15px;
		padding-top: 50px;
		background: var(--light-mode-card-background);
		width: 475px;
		height: auto;
		padding-left: 3%;
		padding-right: 3%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: var(--box-shadow-patch-even-reduced);
	}

	.content-hire {
		width: auto;
		display: block;
	}

	.img-hire {
		width: 130px;
		height: 130px;
		border-radius: 50%;
		box-shadow: var(--box-shadow-patch-even);
		background: var(--light-mode-card-background);
	}

	.img-hire-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160px;
		height: 160px;
		border-radius: 50%;
		box-shadow: var(--box-shadow-inset-patch-even);
	}

	.form-hire {
		width: auto;
	}

	.content-auth-container {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card-auth-title {
		font-weight: bold;
		color: rgba(125,125,255);
		margin-top: 20px;
		font-family: Roboto;
		letter-spacing: 3px;
		text-align: center;
		font-size: 24px;
		text-transform: uppercase;
		margin-bottom: 40px;
	}

	.content-auth {
		width: auto;
		display: block;
	}

	.img-auth {
		width: 130px;
		height: 130px;
		border-radius: 50%;
		box-shadow: var(--box-shadow-patch-even);
		background: var(--light-mode-card-background);
	}

	.img-auth-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160px;
		height: 160px;
		border-radius: 50%;
		box-shadow: var(--box-shadow-inset-patch-even);
	}

	.form-auth {
		width: auto;
	}

	p[type="header"] {
		margin-top: 38px;
		margin-bottom: 38px;
	}

	input[type="email"], textarea[name="message"], input[type="password"], input[type="text"] {
		font-size: 14px;
		font-family: Roboto;
		font-weight: 650;
		letter-spacing: 1px;
		margin-top: 18px;
		border-radius: 12px;
		border: none; resize: none; overflow: hidden; outline: none;
		padding-left: 15px;
		width: 100%; height: 42px;
		background: var(--light-mode-background);
		box-shadow: var(--box-shadow-inset-patch-even);
	}

	textarea, input,
	textarea:-webkit-autofill,
	textarea:-webkit-autofill:focus,
	input:-webkit-autofill,
	input:-webkit-autofill:focus {
		transition: background 9999s ease-in 0s;
		-webkit-text-fill-color: rgba(80,80,80,0.74);
		caret-color: rgba(80,80,80,0.74);
	}

	textarea[name="message"] { padding-top: 10px; height: 182px; }

	input[type="submit"] {
		height: 47px;
		display: block;
		margin-top: 23px;
		width: 330px;
		height: 50px;
		border-radius: 12px;
		margin-bottom: 28px;
	    background: linear-gradient(90deg, var(--gradient-color-primary), var(--gradient-color-secondary) 100%);
		border: none;
		font-family: Roboto;
		font-weight: bold;
		letter-spacing: 2px;
		-webkit-text-fill-color: var(--light-mode-background);
	}

	input[type="submit"]:hover {
		filter: opacity(0.9);
	}

	.button-holder {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.custom-checkbox-container {
		display: flex;
		cursor: pointer;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		border: 1px solid #ffffff;
		border-radius: 4px;
		box-shadow: var(--box-shadow-inset-patch-even);
		background: rgba(255,255,255,1);
	}

	.checkbox-text {
		margin-bottom: 0px;
		margin-right: 9px;
		font-size: 13px;
		color: rgba(84, 84, 84, 0.63);
		font-weight: bold;
		font-family: Roboto;
		letter-spacing: 1px;
	}

	.checkbox-icon {
		display: none;
	}

	.checkbox-holder {
		margin-top: 18px;
		margin-left: 10px;
		display: flex;
		align-items: center;
	}

	input[type="checkbox"] {
		cursor: pointer;
		margin-left: 10px;
		margin-top: 2px;
	}
}

@media screen and (prefers-color-scheme: dark) {
	body {
		background: var(--dark-mode-background);
	}

	.navbar {
		display: flex;
		width: 100% !important;
		height: 43px;
	}

	.navbar-brand {
		width: 43px;
		height: 43px;
	}

	.logo {
		width: 43px;
		height: 43px;
	}

	.content-container-style {
		width: auto;
		height: 350px;
		padding-left: 40px;
		padding-right: 40px;
	}

	.card-logo {
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 20px;
		padding-right: 20px;
		width: 67px;
		height: 67px;
		color: #7d7dff;
		border-radius: 50%;
		box-shadow: var(--box-shadow-inset-patch);
		background: var(--dark-mode-card-background);
	}

	.card[type="left"] {
		background: var(--dark-mode-card-background);
		border-radius: 10px;
		border: none;
		padding: 0;
	}

	.card[type="middle"] {
		background: var(--dark-mode-card-background);
		margin-top: 135px;
		border-radius: 10px;
		border: none;
		padding: 0;
		box-shadow: var(--box-shadow-patch-even-reduced);
	}

	.card[type="right"] {
		background: var(--dark-mode-card-background);
		margin-top: 135px;
		border-radius: 10px;
		border: none;
		padding: 0;
		box-shadow: var(--box-shadow-patch-even-reduced);
	}

	.img-container[type="hire"] {
		box-shadow: var(--box-shadow-patch);
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 170px;
		height: 170px;
		border-radius: 50%;
		transform: translate(50%, -90%) rotate(-45deg);
		background: var(--dark-mode-card-background);
	}

	.img-container[type="auth"] {
		box-shadow: var(--box-shadow-patch);
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 170px;
		height: 170px;
		border-radius: 50%;
		transform: translate(50%, -90%) rotate(-45deg);
		background: var(--dark-mode-card-background);
	}

	.img-container {
		background: var(--dark-mode-card-background);
		transform: translateY(-22%);
		border-radius: 50%;
		width: 120px;
		height: 120px;
	}

	.card-text-style {
		color: rgba(255,255,255,1);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.card-text-style[type="color"] {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-transform: uppercase;
	}

	.content-container-text {
		color: rgba(255,255,255,1);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.card-shadow-patch {
		box-shadow: var(--box-shadow-patch);
	}

	.header-sub-text {
		color: #848484;
		font-size: 0.7rem;
		font-weight: 650;
		letter-spacing: 1px;
		padding-left: 40px;
		padding-right: 40px;
	}

	.coffee-button {
		margin-top: 33px;
		width: 280px;
		height: 58px;
		background: #7d7dff;
		cursor: pointer;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		border-radius: 23px;
	}

	.content-container-text[type="color"] {
		color: var(--primary-color);
		font-size: 15px;
		text-transform: uppercase;
	}

	.card-header-title-style {
		font-size: 17px;
		text-transform: uppercase;
		padding-left: 7px;
		padding-right: 7px;
		color: var(--light-mode-card-background);
		font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
		font-weight: 650;
		margin-bottom: 0;
		letter-spacing: 1px;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.header-text {
		font-size: 1.24rem;
		color: #848484;
		font-weight: 650;
		font-family: Roboto;
		margin-bottom: 0px;
	}

	.profile-picture-wrapper {
		width: 204px;
		height: 204px;
		border-radius: 50%;
	}

	.card-content-style {
		border-radius: 25px;
		padding: 0px;
		border: none;
		margin-bottom: 0px;
		margin-left: 10px;
		margin-right: 10px;
	}

	.login-nav-item {
		display: flex;
		align-items: center;
		text-transform: uppercase;
		border: 2px solid #7d7dff;
		border-bottom-left-radius: 8px;
		border-top-left-radius: 8px;
		border-bottom-right-radius: 8px;
		border-top-right-radius: 8px;
		text-align: center;
		font-family: Roboto;
		font-weight: bold;
		letter-spacing: 1px;
		font-size: 10px;
		color: #7d7dff !important;
		padding-left: 7px;
		padding-right: 7px;
	}

	.login-nav-item:hover {
		text-transform: uppercase;
		border: 2px solid #7d7dff;
		border-radius: 8px;
		text-align: center;
		font-family: Roboto;
		font-weight: bold;
		letter-spacing: 1px;
		font-size: 10px;
		color: #7d7dff !important;
		padding-left: 7px;
		padding-right: 7px;
	}

	.hire-nav-item {
		display: flex;
		align-items: center;
		text-transform: uppercase;
		border: 2px solid #ff7d7d;
		border-radius: 8px;
		text-align: center;
		font-family: Roboto;
		font-weight: bold;
		letter-spacing: 1px;
		font-size: 10px;
		color: #ff7d7d !important;
		padding-left: 7px;
		padding-right: 7px;
	}

	.hire-nav-item:hover {
		cursor: pointer;
		background: #ff7d7d;
		text-transform: uppercase;
		text-align: center;
		font-family: Roboto;
		font-weight: bold;
		letter-spacing: 1px;
		font-size: 10px;
		color: #ffffff !important;
	}

	.portfolio-nav-item { display: none; }

	.content-hire-container {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card-hire-title {
		font-weight: bold;
		color: #ffffff;
		font-family: Roboto;
		letter-spacing: 3px;
		text-align: center;
		font-size: 22px;
		text-transform: uppercase;
		margin-bottom: 40px;
	}

	.card-auth-container {
		border-radius: 15px;
		padding-top: 50px;
		background: var(--dark-mode-card-background);
		width: 475px;
		height: auto;
		padding-left: 3%;
		padding-right: 3%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: var(--box-shadow-patch-even-reduced);
	}

	.card-hire-container {
		border-radius: 15px;
		padding-top: 50px;
		background: var(--dark-mode-card-background);
		width: 475px;
		height: auto;
		padding-left: 3%;
		padding-right: 3%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: var(--box-shadow-patch-even-reduced);
	}

	.content-hire {
		width: auto;
		display: block;
	}

	.img-hire {
		width: 130px;
		height: 130px;
		border-radius: 50%;
		box-shadow: var(--box-shadow-patch-even);
		background: var(--dark-mode-card-background);
	}

	.img-hire-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160px;
		height: 160px;
		border-radius: 50%;
		box-shadow: var(--box-shadow-inset-patch-even);
	}

	.form-hire {
		width: auto;
	}

	.content-auth-container {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.card-auth-title {
		font-weight: bold;
		color: #ffffff;
		margin-top: 20px;
		font-family: Roboto;
		letter-spacing: 3px;
		text-align: center;
		font-size: 22px;
		text-transform: uppercase;
		margin-bottom: 40px;
	}

	.content-auth {
		width: auto;
		display: block;
	}

	.img-auth {
		width: 130px;
		height: 130px;
		border-radius: 50%;
		box-shadow: var(--box-shadow-patch-even);
		background: var(--dark-mode-card-background);
	}

	.img-auth-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160px;
		height: 160px;
		border-radius: 50%;
		box-shadow: var(--box-shadow-inset-patch-even);
	}

	.form-auth {
		width: auto;
	}

	p[type="header"] {
		margin-top: 38px;
		margin-bottom: 38px;
	}

	input[type="email"], textarea[name="message"], input[type="password"], input[type="text"] {
		font-size: 14px;
		font-family: Roboto;
		font-weight: 650;
		letter-spacing: 1px;
		margin-top: 18px;
		border-radius: 12px;
		border: none; resize: none; overflow: hidden; outline: none;
		padding-left: 15px;
		width: 100%; height: 42px;
		background: var(--dark-mode-background);
		box-shadow: var(--box-shadow-inset-patch-even);
	}

	textarea, input,
	textarea:-webkit-autofill,
	textarea:-webkit-autofill:focus,
	input:-webkit-autofill,
	input:-webkit-autofill:focus {
		transition: background 9999s ease-in 0s;
		-webkit-text-fill-color: rgba(255,255,255,0.72);
		caret-color: rgba(255,255,255,0.72);
	}

	textarea[name="message"] { padding-top: 10px; height: 182px; }

	input[type="submit"] {
		height: 47px;
		display: block;
		margin-top: 23px;
		width: 330px;
		height: 50px;
		border-radius: 12px;
		margin-bottom: 28px;
	    background: linear-gradient(90deg, var(--gradient-color-primary), var(--gradient-color-secondary) 100%);
		border: none;
		font-family: Roboto;
		font-weight: bold;
		letter-spacing: 2px;
		-webkit-text-fill-color: var(--light-mode-background);
	}

	input[type="submit"]:hover {
		filter: opacity(0.9);
	}

	.button-holder {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.custom-checkbox-container {
		display: flex;
		cursor: pointer;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
		border: 1px solid #ffffff;
		border-radius: 4px;
		box-shadow: var(--box-shadow-inset-patch-even);
		background: rgba(255,255,255,1);
	}

	.checkbox-text {
		margin-bottom: 0px;
		margin-right: 9px;
		font-size: 13px;
		color: #ffffff;
		font-weight: bold;
		font-family: Roboto;
		letter-spacing: 1px;
	}

	.checkbox-icon {
		display: none;
	}

	.checkbox-holder {
		margin-top: 18px;
		margin-left: 10px;
		display: flex;
		align-items: center;
	}

	input[type="checkbox"] {
		cursor: pointer;
		margin-left: 10px;
		margin-top: 2px;
	}

	.card-content-title {
		display: flex !important; align-items: center; justify-content: center;
		margin-bottom: 0;
		font-size: .63em;
		font-family: Roboto;
		width: 100%;
	}
}