:root {
	--text: #323232;
	--textLight: #EEEEEE;
	--body: #F2F2F7;
	--box: #FCFCFC;

	--button: #E6E6F7;

	--negative: #BA3865;
	--negativeHover: #AD2B59;
	--negativeActive: #A1204D;

	--positive: #3B65AD;
	--positiveHover: #2F58A1;
	--positiveActive: #234D94;

	--fieldHeight: 2.25rem;
	--gap: 3rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;

		--text: var(--textLight);
		--body: #19191F;
		--box: #131317;

		--button: #262636;
		--buttonHover: #232336;
		--buttonActive: #202036;

		--negative: #87294A;
		--negativeHover: #7A1F3F;
		--negativeActive: #6E1635;

		--positive: #2A477A;
		--positiveHover: #203D6E;
		--positiveActive: #173261;
	}
}

@font-face {
	font-family: 'Roboto Light';
	src: url('/password-generator/assets/robotoLight.woff2') format('woff2');
	font-style: normal;
	font-weight: 300;
}

@font-face {
	font-family: 'Source Code Pro';
	src: url('/password-generator/assets/sourceCodeProRegular.woff2') format('woff2');
	font-style: normal;
	font-weight: 400;
}

body {
	background: var(--body);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}

body, input {
	color: var(--text);
}

body, button {
	font-family: 'Roboto Light';
}

.hidden {
	display: none;
}

p {
	text-align: center;
}

.container {
	width: 100%;
	max-width: 30rem;
	margin: 1rem;
}

h1 {
	text-align: center;
	margin: 0;
	font-size: 1.5rem;
	font-weight: normal;
}

label, .row {
	display: block;
	margin-top: var(--gap);
	width: 100%;
	position: relative;
}

span {
	position: absolute;
	margin-top: -1.5em;
	opacity: 0.5;
}

.buttons {
	display: flex;
	gap: var(--gap);
}

input, button {
	padding: 0 1em;
	font-size: 1rem;
	height: var(--fieldHeight);
}

input {
	width: 100%;
	background: var(--box);
	display: block;
	outline: none;
	border: none;
	font-family: 'Source Code Pro';
	box-sizing: border-box;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
	display: none;
}

button {
	color: var(--text);
	background: var(--button);
	cursor: pointer;
	border: none;
	flex: 1;
	-webkit-tap-highlight-color: transparent;
}

button:hover {
	background: var(--buttonHover);
}

button:active {
	background: var(--buttonActive);
}

#subtract, #add {
	width: var(--fieldHeight);
	padding: 0;
	position: absolute;
	bottom: 0;
}

#subtract {
	right: var(--fieldHeight);
}

#add {
	right: 0;
}

.negative, .positive {
	color: var(--textLight);
}

.negative {
	background: var(--negative);
}

.negative:hover {
	background: var(--negativeHover);
}

.negative:active {
	background: var(--negativeActive);
}

.positive {
	background: var(--positive);
}

.positive:hover {
	background: var(--positiveHover);
}

.positive:active {
	background: var(--positiveActive);
}