:root {
	--bg: #fff9e7;
	--accent: #c32222;
	--text: #830b0b;
}

body {
	background-color: var(--bg);
	color: var(--text);
	margin: 0;
	font-family: "Anek Gurmukhi";
}

a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline !important;
}

header {
	background-color: var(--accent);
	color: var(--bg);
}

header .content {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	margin-inline: auto;
	padding-inline: 100px;
	padding-top: 160px;
	height: 90vh;
	max-width: 1440px;

	.letter {
		font-size: 24px;
		max-width: 442px;
	}

	.title {
		display: flex;
		flex-direction: column;
		align-items: end;

		.name {
			font-size: 96px;
			font-weight: 900;
		}

		.subtitle {
			text-align: end;
			font-size: 16px;
			font-weight: 500;
		}
	}
}

.sohni-img {
	margin-top: -45%;
	width: 100%;
}

.sohni-img.small {
	display: none;
}

.body .content {
	justify-content: space-between;
	gap: 2rem;
	margin-inline: auto;
	padding-inline: 100px;
	padding-top: 100px;
	max-width: 1440px;

	.poems {
		font-size: 96px;
		font-weight: 900;
		color: var(--text);
	}

	.legal {
		font-size: 24px;
		font-weight: 200;
	}

	.inquiry {
		font-size: 36px;
		margin-top: 200px;

		.email {
			color: var(--text);
			font-weight: bold;
			text-decoration: none;
		}
	}

	footer {
		font-size: 36px;
		margin-top: 100px;
		margin-bottom: 200px;

		.copy {
			font-weight: 600;
		}
	}
}

@media only screen and (max-width: 1780px) {
	header .content .title .name,
	.body .content .poems {
		font-size: 80px;
	}

	header .content {
		padding-top: 100px;

		.letter {
			font-size: 22px;
		}

		.subtitle {
			font-size: 14px;
		}
	}
}

@media only screen and (max-width: 1280px) {
	header .content .title .name,
	.body .content .poems {
		font-size: 60px;
	}

	header .content {
		padding-top: 100px;

		.letter {
			font-size: 15px;
			max-width: 300px;
		}

		.subtitle {
			font-size: 14px;
		}
	}
}

@media only screen and (max-width: 1080px) {
	header .content .title .name,
	.body .content .poems {
		font-size: 45px;
	}

	header .content {
		padding-top: 80px;

		.letter {
			font-size: 11px;
			max-width: 200px;
		}

		.subtitle {
			font-size: 11px;
		}
	}

	.body .content {
		.legal {
			font-size: 16px;
		}

		.inquiry {
			margin-top: 100px;
		}

		.inquiry,
		footer {
			font-size: 20px;
		}

		footer {
			margin-bottom: 100px;
		}
	}
}

@media only screen and (max-width: 500px) {
	header .content .title .name,
	.body .content .poems {
		font-size: 40px;
	}

	header .content {
		padding-top: 53px;
		flex-direction: column-reverse;
		padding-inline: 30px;
		gap: 70px;
		justify-content: start;

		.letter {
			font-size: 18px;
			max-width: unset;
		}

		.title {
			align-items: start;
		}

		.subtitle {
			font-size: 16px;
			text-align: left !important;
		}
	}

	.sohni-img.large {
		display: none;
	}

	.sohni-img.small {
		display: block;
		margin-top: -80%;
	}

	.body .content {
		padding-inline: 30px;

		.legal {
			font-size: 16px;
		}

		.inquiry {
			margin-top: 100px;
		}

		.inquiry,
		footer {
			font-size: 16px;
		}

		footer {
			margin-bottom: 90px;
		}
	}
}