#assignment {
	display: flex;
	flex-direction: column;

	header, footer {
		background-color: lightgray;
	}

	header {
		h1 {
			margin: 0;
		}

		nav {
			ul {
				list-style-type: none;
				padding-left: 1.5rem;

				a {
					color: #000;
				}
			}
		}
	}

	main {
		background-color: gray;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 2rem;

		.content {
			color: #fff;
			text-align: center;
		}

		h2 {
			font-size: 1.8rem;
		}

		form {
			display: grid;
			grid-template:
				"full-name-label full-name-input email-input email-label"
				". purpose-label purpose-label ."
				". purpose-input purpose-input ."
				". message-label message-label ."
				". message-input message-input ."
				". submit submit ."
				/ max-content 1fr 1fr max-content;
			column-gap: .2rem;
			row-gap: 1rem;

			label {
				text-align: center;
			}

			[for="full-name-input"] {
				grid-area: full-name-label;
				padding-right: 2rem;
			}
			#full-name-input {
				grid-area: full-name-input;
			}

			[for="email-input"] {
				grid-area: email-label;
				padding-left: 2rem;
			}
			#email-input {
				grid-area: email-input;
			}

			[for="purpose-input"] {
				grid-area: purpose-label;
			}
			#purpose-input {
				grid-area: purpose-input;
			}

			[for="message-input"] {
				grid-area: message-label;
			}
			#message-input {
				grid-area: message-input;
			}

			#purpose-input,
			#message-input,
			input[type="submit"] {
				width: 90%;
				justify-self: center;
			}

			input[type="submit"] {
				grid-area: submit;
				background-color: #000;
				color: #fff;
				border: 2px groove #fff;
				font-size: 1.2rem;
				font-weight: bold;
				padding: .5rem;
				cursor: pointer;

				&:active {
					/* იმიტომ რომ შემიძლია :) */
					filter: brightness(2.2);
				}
			}
		}
	}

	footer {
		text-align: center;
	}
}