@import url("/static/gwedding/fonts.css");

a, a:link, a:active {
	color: white;
	text-decoration: underline;
}

a:hover {
	font-weight: bold;
	text-decoration: underline dotted;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0px;

	:is(&):not(:last-child) {
		margin-bottom: 1em;
	}
}

p {
	margin: 0px;

	&:not(:last-child) {
		margin-bottom: 1em;
	}
}

.bold {
	font-weight: bold;
}

.italic {
	font-style: italic;
}

.caps {
	/* TODO: small caps? */
	text-transform: uppercase;
}

.text-center {
	text-align: center;
}

/*
	cannot compress <p> elements with this, causing
	<content-inner> to be unnecessarily wide :\
*/
/* .text-balance {
	text-wrap: balance;
} */

.font-200 {
	font-size: 200%;
}

.font-150 {
	font-size: 150%;
}

:root {
	--bg-images-width: 2048;
	--bg-images-height: 3000;
	--background-aspect: calc(var(--bg-images-width) / var(--bg-images-height));
	--background-height: 90vh;
	--background-width: calc(var(--background-height) * var(--background-aspect));

	@media (orientation: portrait) {
		--background-width: 75vw;
		--background-height: calc(var(--background-width) / var(--background-aspect));
	}
}

html {
	scrollbar-width: thin;
	scrollbar-color: white black;
	scroll-snap-type: y mandatory;
	scroll-snap-stop: always;

	@media (max-height: 675px) {
		scroll-snap-type: unset;
		scroll-snap-stop: unset;
	}
}

body {
	min-height: 100vh;
	overflow-y: scroll;
	margin: 0px;

	background-color: black;
	color: white;
	font-family: "Cormorant SC", serif;
}


section {
	width: 100%;
	height: 100vh;

	@media (max-height: 675px) {
		height: unset;
		margin-top: 1em;
	}

	scroll-snap-align: start;

	display: flex;
	justify-content: center;
	align-items: center;

	& > main {
		width: var(--background-width);
		height: var(--background-height);

		@media (orientation: portrait) {
			width: 90vw;
			height: 90vh;
		}

		@media (max-height: 675px) {
			height: unset;
		}

		border: 2px solid white;
		border-radius: 30px;
		background-size: cover;
		background-position: center;

		container-type: inline-size;
		overflow-y: hidden;
		& > scroll-container {
			width: 100%;
			height: 100%;
			box-sizing: border-box;

			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			gap: 1em;
			padding: 1em;

			overflow-y: auto;
			scrollbar-width: thin;
			scrollbar-color: white black;
		}

		& content-inner {
			padding: .5em 1em;
			display: flex;
			flex-direction: column;
			align-items: center;
			align-content: center;

			border: 1px solid #808080;
			border-radius: 10px;
			background-color: #000000D0;

			text-align: center;
		}
	}
}