html {
	--pink: #ff0a52;
	--blue: #b7ebff;

	--pink0: #ff0a52;
	--pink1: #eb0043;
	--pink2: #ffeef3;

	--blue0: #b7ebff;
	--blue1: #1779c4;
	--blue2: #f0f8ff;

	--primary: #000;
	--secondary: #fff;
	--bright: #000;
	--dark: #d1cdc9;
	--background: #eee;

	--ask-account-check: #282828;
}

html:has(body.dark) {
	--background: #242424;
}

body.dark {
	--pink0: #ea104e;
	--pink1: #ff0a52;
	--pink2: #400113;

	--blue0: #4eaee9;
	--blue1: #4eaee9;
	--blue2: #002340;

	--primary: #c8c3bc;
	--secondary: #131516;

	--bright: #eee;
	--dark: #66615a;
	--background: #000;

	--input-color: #282828;
	--ask-account-check: #9b9b9b;
}

@media (color-gamut: p3) {
	html {
		--pink: oklch(0.657 0.294 16.698);
		--blue: oklch(0.907 0.074 218.641);

		--pink0: oklch(0.657 0.294 16.698);
		--pink1: oklch(0.615 0.278 18.568);
		--pink2: oklch(0.966 0.024 358.907);

		--blue0: oklch(90.7% 0.073 218.6);
		--blue1: oklch(0.56 0.163 241.961);
		--blue2: oklch(0.975 0.015 239.425);
	}

	body.dark {
		--pink0: oklch(0.618 0.274 15.973);
		--pink1: oklch(0.657 0.294 16.698);
		--pink2: oklch(0.246 0.109 12.066);

		--blue0: oklch(0.714 0.147 232.544);
		--blue1: oklch(0.714 0.147 232.544);
		--blue2: oklch(0.249 0.077 241.818);
	}
}

.mini-row {
	display: flex;
}

.student,
.personal,
#birthday {
	display: none;
	cursor: default;
}

.info {
	color: var(--primary);
	margin-bottom: 20px;
}

div.signup-box {
	border-radius: 10px;
}

body {
	background-color: var(--background);
}

.right-side {
	background-image: url('https://p5playjs.github.io/p5play-assets/account/p5play_account0.webp');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top: 0;
	left: 50%;
	width: 50vw;
	height: 100vh;
}

@font-face {
	font-family: Mont;
	src: url('/assets/fonts/mont/Mont-HeavyDEMO.otf');
}

#brand {
	font-family: Mont;
	font-size: 60px;
	font-weight: bold;
	text-align: center;
	color: var(--pink0);
	text-shadow: 4px 4px 0px var(--blue0);
	transition: 100ms;
	padding-top: 5.5px;
}

#brand:hover {
	cursor: pointer;
	text-decoration: underline;
	color: transparent !important;
	-webkit-text-stroke: 1.6px var(--pink0);
}

#brand-parent {
	margin-bottom: 28px;
	display: flex;
	justify-content: center;
}

#logo-image {
	width: 100px;
	height: 100px;
	margin-right: 10px;
}

div.modal-dialog {
	position: relative;
	width: 552px;
	transition: 0.3s;
}

.modal-content {
	background-color: var(--secondary) !important;
}

form {
	margin: 0;
}

@media (min-width: 726px) {
	div.signup-box {
		max-width: 1000px;
		display: flex;
		flex-direction: column;
	}

	.mini-row {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* this will center children vertically */
	}

	.mini-row select,
	.mini-row input {
		width: 250px;
	}

	input,
	select {
		height: 50px !important;
	}

	.modal-dialog {
		margin: 5vw !important;
	}
}

.ask-account-check {
	color: var(--ask-account-check);
	font-size: 14px;
	margin-top: 16px;
}

.signUpButton {
	background-color: var(--pink0) !important;
	border-radius: 10px !important;
	border: none !important;
	color: #fff !important;
	font-size: 18px !important;
	font-weight: bold !important;
	padding: 10px 20px !important;
	margin: 10px 0px !important;
	transition: 0.3s !important;
	text-align: center;
	padding: 0 !important;
}

input,
select {
	border-radius: 10px !important;
	margin-bottom: 16px;
	background-color: var(--input-color) !important;
	color: var(--primary) !important;
}

span,
input::placeholder,
select::placeholder {
	color: var(--primary) !important;
}

input[type="checkbox"] {
	height: unset !important;
	margin: 0;
	margin-right: 2px;
}

input[type="checkbox"]:hover {
	cursor: pointer;
}

.label-customizable {
	margin-top: 16px;
}

input:hover,
select:hover {
	cursor: text;
}

input.not-valid,
select.not-valid {
	border: 1px solid var(--pink0) !important;
	border-radius: 10px !important;
	transition: border 0.3s;
	box-sizing: border-box;
}

input.not-valid:hover,
select.not-valid:hover {
	border: 2px solid var(--pink1) !important;
}

input.not-valid:focus,
select.not-valid:focus {
	border: 3px solid var(--pink2) !important;
	outline: none;
}

input.is-valid,
select.is-valid {
	border: 1.5px solid var(--blue0) !important;
	border-radius: 10px !important;
	transition: border 0.3s;
	box-sizing: border-box;
}

input.is-valid:hover,
select.is-valid:hover {
	border: 2px solid var(--blue0) !important;
}

input.is-valid:focus,
select.is-valid:focus {
	border: 3px solid var(--blue0) !important;
	outline: none;
}

.container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100vw !important;
	height: 100vh !important;
	padding-right: 0px !important;
	padding-left: 0px !important;
	margin-right: 0px !important;
	margin-left: 0px !important;
}

select#country {
	cursor: pointer !important;
}

@keyframes spin {
	100% {
		transform: rotate(360deg);
	}
}

a {
	color: var(--blue1);
}

.passwordCheck-valid-customizable {
	color: var(--blue1);
}

@media (max-width: 500px) {
	.right-side {
		left: 0%;
		width: 100vw;
	}
}