:root {
    --base: #FF8200;
    --highlight: #FF9019;
	--shadow: #E67700;
	--heading: #12B385;
    --dialog: #1a1a1a;
    --field: #2b2b2b;
    --field-border: #444444;
    --text-light: #f0f0f0;
    --placeholder: #999999;
    --button: var(--heading);
    --button-hover: var(--highlight);
    --button-active: #cc6a00;
	--button-shadow: #12B385;
    --shadow-color: rgba(0, 0, 0, 0.4);
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--base);
    font-family: Arial, Helvetica, sans-serif;
}

div#login {
	width: min(90%, 480px);
    padding: 1.5rem 3rem 2.5rem;
    border-radius: 14px;
    background-color: var(--dialog);
    box-shadow: 0 12px 30px var(--shadow-color);
    box-sizing: border-box;

	h1 {
		margin-top: 0;
		color: var(--heading);
		text-align: center;
		font-size: 1.6rem;
	}

	form {
		display: flex;
		flex-direction: column;
		gap: 0.9rem;
	}

	input[type=text], input[type=password] {
		padding: 0.7rem 0.9rem;
		border: 1px solid var(--field-border);
		border-radius: 8px;
		background-color: var(--field);
		color: var(--text-light);
		font-size: 1rem;
	}

	input::placeholder {
		color: var(--placeholder);
	}

	input[type=text]:focus, input[type=password]:focus {
		outline: none;
		border-color: var(--highlight);
	}

	input[type=submit] {
		padding: 0.75rem;
		border: none;
		border-radius: 8px;
		background-color: var(--button);
		color: #1a1a1a;
		font-weight: bold;
		font-size: 1rem;
		cursor: pointer;
		box-shadow: 0 4px 0 var(--button-shadow);
		transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.1s ease;

		&:hover {
			background-color: var(--button-hover);
			box-shadow: 0 4px 0 var(--shadow);
		}

		&:active {
			background-color: var(--button-active);
			box-shadow: 0 1px 0 var(--button-active);
			transform: translateY(3px);
		}
	}
}