main {
	display: block;
}

/* I needed to add very specific selectors here. My website kept picking up code from common.css which wouldn't let me center the image */
header.homepage {
	position: relative;
	width: 100%;
	margin-block-start: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 1rem;
	margin-inline-start: 0rem;

	img {
		position: relative;
		width: 76%;
		max-height: 60vh;
		height: auto;
		display: block;
		margin: 0 auto;
		opacity: 0.5;
		object-fit: contain;
		transform: rotate(180deg);
		/* my image kept stretching, here's the fix I found https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-fit */
	}

	.title {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		z-index: 10;
		padding: 0 1.25rem;
	}

	.title h1 {
		font-weight: 600;
		text-align: center;
		padding: 0;
		max-width: 12ch;
		margin: 0 auto;
		color: #E76200;
		line-height: 1;
	}

	.title h2 {
		padding: 0;
		margin: 0 auto;
		margin-block-start: 1rem;
		font-weight: 600;
		text-align: center;
		max-width: 100%;
		font-size: 1.5rem;
		color: #747474;
		line-height: 1;
	}
}

h2 {
	margin-block-end: 1rem;
	padding: 0;
	margin-inline-start: 1rem;
	line-height: 1;
	position: relative;
	border: none;
	font-weight: 600;
	text-align: left;
	max-width: 12ch;
	color: #6d6d6d;
	margin-block-end: 1rem;
}

.colophon {
	margin-block-start: 2rem;
	p {
		margin-inline-start: 0rem;
		line-height: 1.3;
		margin-block-start: -2rem;
		text-wrap: pretty;
		padding-block:1.5rem;
	/* I know this isn't a overarching solve for all browsers. I did also try some other ragging techniques like text-wrap: balance, but I found it was doing wierd things for longer paragraphs. */
	}
}

.homepage-menu {
	padding-block-start: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	background-color: transparent;
	padding-inline: 1rem;

	li {
		text-wrap: balance;
		display: flex;
		margin-block-end: 0rem;
		flex-direction: column;
		gap: 0.25rem;
		padding-inline-start: 0;
		text-align: center;
		border-block-end: 2px #ffffff solid;
		font-family: var(--monospace-font);
		margin-block: 1rem;

		a {
			padding-block: 0;
			margin-block: -1rem;
			text-decoration: underline;
			color: black;
		}

		&.row1 {
			border: 3px #FFB781 solid;
		}

		&.row2 {
			border: 3px #FF9446 solid;
		}

		&.row3 {
			border: 3px #E76200 solid;
		}

		.title {
			margin-block-start: 2rem;
			font-size: 1.7rem;
			text-transform: uppercase;
			text-align: center;
		}

		.author-date {
			font-size: 0.9rem;
			margin-block-end: 2rem;
			font-family: var(--monospace-font);
			text-align: center;
			font-weight: 100;
		}
	}
}


@media screen and (min-width: 768px) {

	header.homepage {
		img {
			width: 100%;
			scale: 120%;
			max-width: 500px;
			/* I originally tried using percentages for these max widths but I wasn't able to control the image size as well as when I tried using px */
			height: auto;
			object-fit: contain;
		}

		.title {
			h1 {
				font-size: 5rem;
			}
		}

		.title h2 {
			font-size: 2rem;
			position: relative;
			border: none;
		}
	}

	h2 {
		font-size: 2rem;
		position: relative;
		border: none;
		margin-block-start: 2rem;
	}
	.colophon {
		p{
		margin-block-start: -1rem;
		}
	}

	.homepage-menu {
		display: flex;
		flex-direction: row;
		width: 100%;
		align-items: stretch;
		/* My grid here was showing up as different sizes, I used align-items: stretch to solve this https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/align-items */
		padding-inline: 1rem;
		box-sizing: border-box;
		/* I was having alot of trouble figuring out how to get my image to be directly center on the screen and the right size different breakpoints. Using box sizing includes the padding and border in the total width and height. I originally saw it in a youtube video but there's also more information on box-sizing:border-box here: https://www.w3schools.com/css/css3_box-sizing.asp */
		gap: 1rem;
		margin-block: 3rem;

		li {
			padding-block-start: 0;
			flex: 1;
			margin: 0;
			margin-block-end: 1rem;

			.title {
				text-align: left;
				margin-inline-start: 1rem;
			}

			.author-date {
				text-align: left;
				margin-inline-start: 1rem;
			}

			p {
				text-align: left;
				font-size: 0.9rem;
				margin-inline-end: 0rem;
				margin-inline-start: 0rem;
				margin-block: 0rem;
			}
		}

		.row1:hover {
			color: white;
			background-color: #FFB781;

			p {
				color: white;
			}

			a {
				color: white;
			}
		}

		.row2:hover {
			color: white;
			background-color: #FF9446;

			p {
				color: white;
			}

			a {
				color: white;
			}
		}

		.row3:hover {
			color: white;
			background-color: #E76200;

			p {
				color: white;
			}

			a {
				color: white;
			}
		}
	}
}

@media screen and (min-width: 1400px) {


	header.homepage {
		align-content: center;
		margin-block-start: 1.5rem;


		img {
			width: 100%;
			scale: 100%;
			max-width: 1000px;
			height: auto;
		}

		.title {
			h1 {
				font-weight: 600;
				font-size: 4rem;
			}

			h2 {
				font-size: 1rem;
			}
		}
	}

	.homepage-menu {
		li {
			.title {
				font-size: 1.3rem;
			}
		}
	}
}