/* PAGE BODY AND STRUCTURE */

* {
	box-sizing: border-box;
}

html {
	margin-left: 0;
	margin-right: calc(-100vw + 100%);
}

body {
	--color-pink: #FFCCD2;
	--color-lightpink: #FFEDED;
	/* --color-brown: #90461F; */
	--color-brown: #A26443;
	--color-darkbrown: #362222;
	--color-caramel: #FF9156;

	--color-pink-highlight: #FFE2E6;
	--color-lightpink-highlight: #FFF5F5;
	--color-brown-highlight: #C69A83;
	
	--color-pink-shadow: #F2A9B3;

	--color-text-pink: #AF4151;

	font-family: "Lato", sans-serif;
	margin: 0;
	background-color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	overflow-x: hidden;
	color: var(--color-brown);
}

.page-container {
	margin: auto;
	margin-top: 0;
	min-height: 70vh;
	width: 100%;
}

.page {
	position: relative;
	margin: auto;
	width: 100%;
	max-width: 64rem;
	padding: 2rem;
	padding-bottom: 6rem;
	border-radius: 1rem;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	font-size: 1.25rem;
}

.section {
	margin-block: 2rem;
}

.card {
	position: relative;
	color: black;
	background-color: #999999;
	border-radius: 1rem;
	padding: 2rem 4rem;
}

.card h1:first-child,
.card h2:first-child,
.card h3:first-child {
	margin-top: 0;
}

.card.pink {
	background-color: var(--color-pink);
	color: var(--color-darkbrown);
	box-shadow: var(--color-pink-highlight) 0 -0.5rem 0 0;
}

.card.lightpink {
	background-color: var(--color-lightpink);
	color: var(--color-brown);
	box-shadow: var(--color-lightpink-highlight) 0 -0.5rem 0 0;
}

.card.brown {
	background-color: var(--color-brown);
	color: var(--color-lightpink);
	box-shadow: var(--color-brown-highlight) 0 -0.5rem 0 0;
}

@media screen and (max-width: 68rem) {
	.page {
		padding: 1rem;
		padding-bottom: 4rem;
		border-radius: 0;
		box-sizing: border-box;
	}

	.card {
		padding: 1.75rem 2.5rem;
	}
}

@media screen and (max-width: 50rem) {

	.card {
		padding: 1.5rem 1.5rem;
	}
}

@media screen and (max-width: 60rem) {
	body {
		padding-top: 0;
	}

	h1 {
		text-align: right;
	}
}

h1, h2, h3, h4, h5 {
	font-family: "Caveat Brush", cursive;
}
h1 {
	/* font-family: Agbalumo; */
	/* font-family: "Caveat Brush"; */
	padding-left: 1rem;
	font-size: 3rem;
	text-shadow: 0 0 1.5rem var(--color-pink);
}

/* OTHER ITEMS */

h1 > i:first-child,
h2 > i:first-child,
h3 > i:first-child,
h4 > i:first-child,
h5 > i:first-child {
	margin-right: 0.5em;
}

a {
	color: var(--color-caramel);
}
a:hover {
	color: var(--color-darkbrown);
}

.no-link {
	text-decoration: none;
}

p {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
	color: var(--text-color-medium);
}

form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

form button[type="submit"] {
	margin-top: 2rem;
}

form label {
	margin-top: 1rem;
}

input {
	border: none;
	border-radius: 1rem;
	height: 2rem;
	padding: 0.5rem 1rem;
	font-size: 1.25rem;
	box-shadow: var(--color-pink) 0 0.25rem 0 0;
	color: #AF4151;
}
textarea {
	border: none;
	border-radius: 1rem;
	height: 2rem;
	padding: 0.5rem 1rem;
	font-size: 1.25rem;
	box-shadow: var(--color-pink) 0 0.25rem 0 0;
	resize: vertical;
	min-height: 10rem;
	color: #AF4151;
}

input:active,
input:focus,
textarea:active,
textarea:focus {
	outline: none;
	box-shadow: var(--color-pink) 0 0.25rem 0 0.5rem;
}

.button {
	background-color: var(--color-text-pink);
	color: white;
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 1rem;
	font-size: 1.25rem;
	box-shadow: var(--color-lightpink) 0rem 0rem 0rem 0rem;
	transition: all 150ms ease;
	cursor: pointer;
	text-decoration: none;
}
.button:hover {
	color: white;
	text-decoration: none;
	background-color: var(--color-pink);
	box-shadow: white 0rem 0.125rem 1rem 0rem;
}

.flex-list {
	display: flex!important;
	flex-direction: row;
	gap: 2rem;
	flex-wrap: wrap;
}
.flex-list > * {
	flex-basis: 0;
	flex-grow: 1;
}

.ruler-text {
	display: flex!important;
	justify-content: space-between;
	font-size: 1.125rem;
	color: var(--text-color-dark);
	padding: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
.ruler-text::before {
	display: inline-block;
	content: "";
	height: 0.25rem;
	margin-top: 0.7rem;
	border-radius: 0.5rem;
	width: -moz-available;
	width: -webkit-fill-available;
	background-color: #444;
	transform: translateX(-1rem);
}
.ruler-text::after {
	display: inline-block;
	content: "";
	height: 0.25rem;
	margin-top: 0.7rem;
	border-radius: 0.5rem;
	width: -moz-available;
	width: -webkit-fill-available;
	background-color: #444;
	transform: translateX(1rem);
}
.ruler-text span {
	white-space: nowrap;
}