/** GLOBAL STYLES / IMPORTANT NFORMATION **/
:root{
	--primarytext-color: beige;
	--bodytext-color: #ebe9e1;
	--background-color: #719998;
	--response-color: #112D23;
}

body{
	color: var(--bodytext-color);
	background-color: var(--background-color);
	padding: 2rem;
	margin: 2rem;
}

p{
	font-family: "bebas-neue-pro";
	font-weight: 300;
	padding-block: 2rem;
	font-size: 2rem;
	line-height: 2.6rem;  
}

em{
	font-weight: 600;
	color: var(--primarytext-color);
}




/**  HEADER  **/
header{
	color: beige;
	text-align: center;

	.author, .date, .source{
		display: inline-block;
		margin-inline: 6.5rem;
	}
	h1{
		font-size: 15.8rem;
		font-family: "bebas-neue-pro";
		font-weight: 900;
		line-height: 15rem;
	}
	.author{
		font-weight: 800;
		&:hover{
			text-decoration: underline;
		}
	}
	.date, .source{
		inline-size: 12rem;
		font-weight: 500;
	}
}


/**  READING  **/
.reading{
	.pilot{
		width: 55%;
		/* padding-inline-end: 47rem; */
		padding-block-start: 9rem;
		font-weight: 300;
		font-style: normal;
	} 
	.right{
		padding-inline-start: 31rem;
	}
	.left{
		padding-inline-end: 45%;
		font-weight: 300;
		font-style: normal;
		padding-block-end: 3rem;
		padding-block-start: 5rem;
	}
	.response{
		p:not(.my-name):not(.my-date){
			font-family: "Kode Mono", monospace;
			font-optical-sizing: auto;
			font-weight: 500;
			font-style: normal;
			color: var(--response-color);
			font-size: 2rem;
			padding-inline-start: 32%;
			line-height: 3rem;
		}
		.my-stuff{
			padding-inline-start: 32%;
		}
	}
	.pullquote{
		/* THIS IS MY RESPONSE'S PULL QUOTE */
		font-family: "Kode Mono", monospace;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		color: #112D23;
		font-size: 7rem;
		padding-block-start: 6rem;
		text-indent: -0.6em;
		padding-inline-start: 1%;
	}

	.my-name, .my-date{
		display: inline-block;
		font-family: "Kode Mono", monospace;
		/* font-optical-sizing: auto; */
		font-weight: 500;
		color: var(--response-color);
		font-size: 1.5rem;
	}
	.my-name{
		/* margin-inline-end: 55%; */
		margin-inline-end: 5%;
	}
	.my-date{
		inline-size: 15rem;
	}
}




/**  FOOTER  **/
small{
	font-family: "Kode Mono";
	word-spacing: 0.3rem;
	color: var(--primarytext-color);
	padding-inline-end: 27%;
	font-size: 1.3rem;
}

footer a{
	margin-block-start: 7rem;
	color: var(--primarytext-color);
	display: inline-block;
	color: var(--primarytext-color);
	font-family: "Kode Mono";
	font-weight: 800;
	}
	
footer a:hover{
	text-decoration: underline;
}


@media (max-width:1350px){
	body{
		margin: 1.5rem;
		padding: 1rem;
	}
	p{
		padding-block: 1.5rem;
		font-size: 1.8rem;
		line-height: 2rem;  
	}
	header{
		display: flex;
		flex-direction: column;
		align-items: center;

		.author, .date, .source{
			display: block;
			margin-inline: 0;
			padding: 0.5rem;
		}
		h1{
			font-size: 11.8rem;
			line-height: 12rem;
			margin-block: 3rem 1rem;
		}
	}
	.reading{
		.pilot{
			width: 100%;
			font-weight: 300;
			padding-block-start: 6rem;
		} 
		.left{
			padding-inline-end: 0;
		}
		.right{
			padding-inline-start: 0;
		}
		.response{
			p:not(.my-name):not(.my-date){
				font-weight: 500;
				font-size: 1.5rem;
				padding-inline-start: 2%;
				line-height: 1.8rem;
			}
			.my-stuff{
				padding-inline-start: 2%;
			}
		}
		.pullquote{
			font-size: 6rem;
			padding-block-start: 5rem;
			text-indent: -0.1em;
		}
		.my-name, .my-date{
			display: grid;
			font-weight: 500;
			font-size: 1.5rem;
			align-items: center;
		}
		.my-name{
			margin-inline-end: 5%;
		}
		.my-date{
			inline-size: 15rem;
		}
	}
	small{
		word-spacing: 0.5rem;
		padding-inline-end: 27%;
		font-size: 1rem;
	}
}


@media (max-width:1124px){
	p{
		padding-block: 1.5rem;
		font-size: 1.8rem;
		line-height: 2.1rem;  
	}
	header{
		h1{
			font-size: 9rem;
			line-height: 9rem;
		}
	}
	.reading{
		.pilot{
			padding-block-start: 6rem;
		} 
		.response{
			p:not(.my-name):not(.my-date){
				font-size: 1.2rem;
				padding-inline-start: 2%;
				line-height: 1.8rem;
			}
			.my-stuff{
				padding-inline-start: 2%;
			}
		}
		.pullquote{
			font-size: 4rem;
			padding-block-start: 6rem;
		}
		.my-name{
			margin-inline-end: 5%;
		}
		.my-date{
			inline-size: 15rem;
		}
	}
}


@media (max-width:768px){
	body{
		margin: 1.2rem;
		padding: 0.9rem;
	}
	p{
		padding-block: 1.5rem;
		font-size: 1.5rem;
		line-height: 1.8rem;  
	}
	header{
		h1{
			font-size: 5.7rem;
			line-height: 5.5rem;
		}
	}
	.reading{
		.pilot{
			padding-block-start: 6rem;
		} 
		.response{
			p:not(.my-name):not(.my-date){
				font-weight: 500;
				font-size: 1.2rem;
				padding-inline-start: 2%;
				line-height: 1.8rem;
			}
			.my-stuff{
				padding-inline-start: 2%;
			}
		}
		.pullquote{
			font-size: 3.5rem;
			padding-block-start: 6rem;
			padding-inline-start: 1%;
		}
		.my-name{
			margin-inline-end: 5%;
		}
		.my-date{
			inline-size: 15rem;
		}
	}
}




@media (max-width:500px){
	body{
		margin: 1rem;
		padding: 0.5rem;
	}
	p{
		padding-block: 1.5rem;
		font-size: 1.3rem;
		line-height: 1.6rem;  
	}
	header{
		h1{
			font-size: 4.3rem;
			line-height: 5rem;
		}
	}
	.reading{
		.pilot{
			padding-block-start: 4rem;
		} 
		.response{
			p:not(.my-name):not(.my-date){
				font-weight: 500;
				font-size: 1.2rem;
				padding-inline-start: 2%;
				line-height: 1.8rem;
			}
			.my-stuff{
				padding-inline-start: 2%;
			}
		}
		.pullquote{
			font-size: 2.8rem;
			padding-block-start: 6rem;
			padding-inline-start: 1%;
		}
		.my-name{
			margin-inline-end: 5%;
		}
		.my-date{
			inline-size: 15rem;
		}
	}
}