@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:ital,wght@0,100..900;1,100..900&display=swap');

.main {
  background-color: #252422;
  font-family: "Geist Mono", monospace;
  font-style: normal;
}

.main h1 {
	color: #fffcf2;
	margin-top: 2%;
	margin-left: 2%;
	font-size: 5vw;
	font-weight: 400;
	font-optical-sizing: auto;
}

.main h2 {
	color: #ccc5b9;
	margin-left: 2%;
	font-size: 4vw;
	font-weight: 400;
	font-optical-sizing: auto;
}

.main h3 {
	color: #ccc5b9; /*same as h2 color*/
	margin-left: 2%;
	font-size: 3vw;
	font-weight: 400;
	font-optical-sizing: auto;
}

.main p {
	color: #ccc5b9; /*same as h2 color*/
	margin-left: 2%;
	font-size: 3vw;
	font-weight: 400;
}

.main a {
	color: #eb5e28;
	text-decoration: none;
}

.main a:hover {
	color: #f4f3ee; /*same as h1 color*/
}


@media screen and (min-width: 50em) {
	.main h1 {
		font-size: 2.5rem;
	}

	.main h2 {
		font-size: 2rem;
	}

	.main h3 {
		font-size: 1.5rem;
	}

	.main p {
		font-size: 1.5rem;
	}
}