/** the heading of the resume is a 3x3 grid. */
.header-info {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 0px 0px;
	grid-template-areas:
		"address full_name email"
		"phone1  full_name github_profile1"
		"last_updated  full_name github_profile2";

	& > * {
		font-size: 10pt;
		line-height: 1em;
		margin-block: auto;
		padding-block: 3px;
	}

	& > *:nth-child(1) {
		grid-area: full_name;
		text-align: center;
		font-size: 24pt;
	}

	& > *:nth-child(2) {
		grid-area: address;
		text-align: left;
	}

	& > *:nth-child(3) {
		grid-area: phone1;
		text-align: left;
	}

	& > *:nth-child(4) {
		grid-area: last_updated;
		text-align: left;
	}

	& > *:nth-child(5) {
		grid-area: email;
		text-align: right;
	}

	& > *:nth-child(6) {
		grid-area: github_profile1;
		text-align: right;
	}

	& > *:nth-child(7) {
		grid-area: github_profile2;
		text-align: right;
	}
}

/** a thee column header to stylize entries like "[experience_name] [time_range] [location]" */
.three-columns {
	& > h3 {
		display: grid;
		grid-template-columns: 2fr 1.1fr 2fr;

		& > *:nth-child(1) {
			text-align: left;
		}

		& > *:nth-child(2) {
			text-align: center;
		}

		& > *:nth-child(3) {
			text-align: right;
		}
	}
}