header {
	background-color: var(--primary_700);
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;

	& a {
		color: var(--bg_200);
		transition: color 0.3s ease;

		&:hover {
			color: var(--secondary_300);
		}
	}

	& h1 {
		display: flex;
		gap: 0.5rem;

		& a {
			text-decoration: none;
		}
	}
}

#app {
	padding: 2rem;

	display: grid;
	grid-template-areas:
		"text text text options"
		"text text text options"
		"button button sum .";
	grid-template-columns: 1fr 1fr 1fr auto;
	gap: 1rem;
	max-width: max-content;

	& textarea {
		grid-area: text;
	}

	& button {
		grid-area: button;
	}

	& .options {
		grid-area: options;
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	& span {
		grid-area: sum;
		justify-self: end;
	}
}