@layer base {
	html,
	body {
		font-family: "Inter";
	}

	body {
		background: linear-gradient(135deg, #ff9966, #a770ef);
	}

	main {
		border-radius: 0.7rem;
		margin: 0.5em;
		overflow-y: auto;
		background: #fff;
		box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
		padding: 2rem;
		height: calc(100svh - 1rem);
	}

	main > div {
		max-width: 620px;
		margin: 0 auto;
	}
}

@layer components {
	.btn-read {
		appearance: none;
		border: none;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		border-radius: 0.8rem;
		font-size: 0.95rem;
		font-weight: 500;
		text-decoration: none;
		border: 0.1rem solid oklch(88% 0.016 252);
		background: #fff;
		color: oklch(40% 0.016 252);
		padding: 0.6rem 1.2rem;
		cursor: pointer;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
	}

	h1 {
		font-family: "Tinos";
		font-size: 1.8rem;
		font-weight: 700;
		font-style: italic;
		color: oklch(37.2% 0.044 257.287);
	}

	p {
		font-family: "Tinos";
		font-size: 1.2rem;
		font-weight: 400;
		font-style: normal;
		color: oklch(50% 0.044 257.287);
	}

	.link {
		text-decoration: none;
		font-family: "Tinos";
		font-style: italic;
		font-size: 1.2rem;
		color: oklch(54% 0.199 265.638);
	}
}