/* CUSTOM CSS PROPERTIES */

:root {
	--color-primary: #333;
	--color-secondary: #faf9f9;
	--font-primary: "Times New Roman", Times, serif;
	--color-grey-light: #f7f7f7;
}

/* BASE */

/* Basic Reset using universal selector */
*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	font-size: 62.5%;
}

/* global font sizing */
body {
	font-family: var(--font-primary);
	color: var(--color-primary);
	line-height: 1.3;
}

.container {
	max-width: 100%;
	padding: 2rem;
	background-color: var(--color-grey-light);
}

.header {
	margin-top: 2rem;
}

.heading {
	font-size: 4rem;
	text-align: center;
	font-weight: 700;
}
.subtitle {
	text-align: center;
	font-size: 2rem;
	margin-top: 6px;
}
.katelyn__img {
	border-radius: 50%;
	height: 63rem;
	width: 56rem;
	display: block;
	margin: 3rem auto;
	object-fit: cover;
	object-position: left;

	box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.3);
	filter: brightness(80%);
}

.poem {
	margin-top: 6rem;
	font-weight: 500;
	font-size: 3rem;
	font-style: italic;
	letter-spacing: 0.2rem;
	text-align: center;
	padding: 0 4rem;
}

.poem span {
	display: block;
}

.poem span:nth-child(2n),
.poem span:last-child {
	margin-bottom: 3rem;
}

.footer {
	background-color: #101d2cdb;
	display: flex;
	justify-content: center;
}

.footer-logo {
	display: block;
	margin: 2rem;
}
.logo {
	height: 6rem;
	opacity: 70%;
	opacity: 70%;
	opacity: 40%;
	transition: all 0.3s;
}

.footer-link:link,
.footer-link:visited {
	text-decoration: none;
}

.footer-link:hover > .logo,
.footer-link:active > .logo {
	opacity: 100%;
}

/* RESPONSIVE 	BREAKPOINTS */

/*  75em;   	1200 / 16 = 75em */
/*  62.5em;  	1000 / 16 = 62.5em */
/*  50em;  	800 / 16 = 50em */
/* 37.5em;   	600 / 16 = 37.5em */
/* 31.25em;    500 / 16 = 31.25em */

@media only screen and (max-width: 62.5em) {
	html {
		font-size: 50%;
	}
	.poem {
		letter-spacing: 0.15rem;
	}

	.poem span:nth-child(2n) {
		margin-bottom: 2rem;
	}
}
@media only screen and (max-width: 50em) {
	html {
		font-size: 45%;
	}

	.header {
		margin-top: 4rem;
	}
}

@media only screen and (max-width: 37.5em) {
	html {
		font-size: 40%;
	}
	body {
		line-height: 1.2;
	}

	.katelyn__img {
		height: 55rem;
		width: 50rem;
	}

	.poem span:nth-child(odd) {
		margin-bottom: 2.5rem;
	}
}
@media only screen and (max-width: 31.25em) {
	html {
		font-size: 38%;
	}
	.katelyn__img {
		height: 40rem;
		width: 35rem;
	}
}