@charset "UTF-8";

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 2. Remove default margin */
* {
	margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
	html {
		interpolate-size: allow-keywords;
	}
}

body {
	/* 4. Add accessible line-height */
	line-height: 1.5;
	/* 5. Improve text rendering */
	-webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
	font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
	text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
	isolation: isolate;
}

/* START */
:root {
	--txt: rgb(52, 51, 49);
	--innerpad: 1.5rem;
}

body,
html {
	background: #f1edda;
	color: var(--txt);
	font-family: "Lexend Deca", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

main {
	background: #f4f2e5;
	max-width: min(80ch, 90vw);
	margin: 3rem auto;
	outline: 1.5px solid rgb(86, 82, 67);
	border: 7px solid white;
	border-radius: 1px;
	padding: var(--innerpad);
	/* https://smoothshadows.com/#djEsMSw2LDAuMDksMzAsMzIsMCwjMDMwNzEyLCNmM2Y0ZjYsI2ZmZmZmZiwy */
	box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.01),
		0px 4px 3px rgba(3, 7, 18, 0.03),
		0px 8px 8px rgba(3, 7, 18, 0.04),
		0px 14px 13px rgba(3, 7, 18, 0.06),
		0px 22px 21px rgba(3, 7, 18, 0.07),
		0px 32px 30px rgba(3, 7, 18, 0.09);
}

h1,
h2,
h3 {
	text-align: center;
}

a {
	color: unset;
}

a:hover {
	color: darkred;
}

.special-font {
	font-family: "Ms Madi", cursive;
	font-weight: 400;
	font-style: normal;
}

h1 {
	font-size: 4rem;
	line-height: 4.2rem;
}

.heart {
	font-size: 3rem;
	/* line-height: 2rem; */
	padding: 5px;
}

.content {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--txt);
}

h2,
h3 {
	font-size: 150%;
	margin-bottom: 7px;
}

h2 {
	font-size: 190%;
}

p {
	font-size: 110%;
}

.bg-pic1 {
	background: top center no-repeat url("top.png");
	background-size: cover;
	/* ignore parent padding */
	width: calc(100% + var(--innerpad)*2);
	margin-left: calc(-1*var(--innerpad));
	margin-top: calc(-1*var(--innerpad));
	/* nice height hack */
	padding-top: 70.3%;
}

.bg-pic2 {
	background: center center no-repeat url("side.png");
	background-size: cover;
	/* ignore parent padding */
	width: 12%;
	margin-left: calc(-1*var(--innerpad));
	margin-top: calc(-1*var(--innerpad));
	/* nice height hack */
	padding-top: 34.3%;
	position: relative;
	float: right;
	bottom: 205px;
	right: calc(-1*var(--innerpad));
}

aside {
	clear: both;
	margin: 30px auto;
	max-width: min(80ch, 90vw);
	text-align: center;

	& details {
		margin-bottom: 3rem;
	}

	& hr {
		border-width: 0.5px;
		margin-bottom: 1rem;
	}
}