@use "sass:color";
@import "variables";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	background-color: $bg;
	color: $text;
	font-family: $text-font;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;

	height: 100%;
	width: 100%;
}

body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

header {
	text-align: center;
	padding-top: 2rem;

	h1 {
		color: $title;
		font-family: $title-font;
		font-weight: 600;
		font-size: 26px;
		line-height: 1.5;
		margin: 0 0 8px;
	}

	p {
		margin: 0 0 26px;
	}
}

main {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	padding: 0 0.75rem;

	form {
		section {
			margin-bottom: 1rem;

			&.remember,
			&.submit {
				text-align: center;
			}

			&.submit {
				margin-top: 2rem;
			}
		}

		label {
			font-size: 14px;
			margin-bottom: 8px;
			display: inline-block;
		}

		textarea,
		input {
			font-size: 1rem;
			border-radius: 4px;

			&[type=checkbox] {
				margin-right: 8px;
			}

			&[type=submit] {
				display: inline-block;
				text-align: center;
				background-color: $button-bg;
				color: $button-text;
				font-weight: 500;
				font-family: inherit;
				padding: 4px 16px;
				line-height: 36px;
				border: 0;
				cursor: pointer;

				&:hover {
					background-color: $button-hover-bg;
				}
			}

			transition: background-color 300ms ease, border 300ms ease;
		}

		textarea,
		input[type=url] {
			color: inherit;
			width: 100%;
			outline: 0;
			font-family: inherit;
			resize: vertical;
			background-color: $input-bg;
			border: 1px solid color.scale($input-bg, $lightness: -25%);
			padding: 10px;

			&:focus,
			&:active {
				border: 1px solid $button-bg;
				background-color: color.scale($input-bg, $lightness: +5%);
			}

			&::placeholder {
				color: inherit;
				opacity: 0.3;
			}
		}
	}
}

footer {
	background-color: $footer-bg;
	padding: 0.5rem 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;

	section {
		margin: .5rem 1rem;

		a {
			color: inherit;

			&:hover {
				color: $title;
			}

			transition: color 300ms ease;
		}
	}
}