/* configuration */

:root {
	--border-radius: 0.5rem;

	--color-light-0: rgb(256, 256, 256);
	--color-medium-0: rgb(192, 192, 192);
	--color-dark-0: rgb(62, 62, 62);
	--background-color-0: rgb(16, 16, 16);

	--selected-color-gold: rgb(254, 189, 93);
	--filter-background-gold: sepia(100%) hue-rotate(-15deg) saturate(250%) brightness(1.2);
	--filter-icon-gold: brightness(0) saturate(100%) invert(85%) sepia(10%) saturate(2000%) hue-rotate(342deg) brightness(103%) contrast(101%);

	--selected-color-green: rgb(80, 200, 120);
	--filter-background-green: sepia(100%) hue-rotate(90deg) saturate(400%) brightness(1.1);
	--filter-icon-green: brightness(0) saturate(100%) invert(85%) sepia(10%) saturate(2000%) hue-rotate(80deg) brightness(103%) contrast(101%);

	--selected-color-blue: rgb(70, 130, 180);
	--filter-background-blue: sepia(100%) hue-rotate(190deg) saturate(300%) brightness(1.1);
	--filter-icon-blue: brightness(0) saturate(100%) invert(85%) sepia(10%) saturate(2000%) hue-rotate(185deg) brightness(105%) contrast(105%);

	--color-light: var(--color-light-0);
	--color-medium: var(--color-medium-0);
	--color-dark: var(--color-dark-0);
	--background-color: var(--background-color-0);
	--selected-color: var(--selected-color-gold);
	--filter-background: var(--filter-background-gold);
	--filter-icon: var(--filter-icon-gold);
}

/* general */

body {
	margin: 0;
	padding: 1rem 2rem;
	color: var(--color-medium);
	background-color: var(--background-color);
}

a {
	color: var(--link-medium);
	text-decoration: none;
}

/* sections */

.section-container {
	width: 100%;
	position: relative;
	display: inline-block;
}

.background-image {
	width: 100%;
	height: auto;
	display: block;
	filter: var(--filter-background);
}

.background-text {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.section-image {
	width: 100%;
	border-radius: var(--border-radius);
	border: solid 1px var(--selected-color);
}

.section-text {
	text-align: center;
	position: absolute;
	position: relative;
}

/* map */

.map-address-container {
	margin: 2rem 7rem 0 7rem;
}

.map-frame {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--border-radius);
}

/* buttons */

.section-button {
	font-family: "Zilla Slab";
	width: 20rem;
	background-color: var(--selected-color);
	color: var(--background-color);
	text-decoration: none;
	padding: 12px 40px;
	border-radius: 5px;
	font-weight: bold;
	display: inline-block;
	letter-spacing: 1px;
	transition: background-color 0.2s ease-in-out;
}

/* images */

.image-icon {
	display: block;
}

.image-icon > img {
	height: 10rem;
	margin: 1rem 0;
	display: inline-block;
	filter: var(--filter-icon);
	-webkit-filter: var(--filter-icon);
	display: inline-block;
}

/* separator */

.separator {
	height: 10rem;
}

/* texts */

.the-day {
	color: var(--selected-color);
	line-height: 2rem;
	font-size: 4rem;
	position: relative;
	top: 0.75rem;
}

.text-header-1 {
	font-size: 4.5vw;
	font-family: "Allura";
}

.text-header-2 {
	font-size: 7vw;
	font-family: "WindSong";
	color: var(--color-light);
	margin: 2rem 0;
	white-space: nowrap;
}

.text-header-3 {
	font-size: 4.5vw;
	font-family: "Allura";
}

.text-date-1 {
	font-size: 4vw;
	font-family: "Bilbo Swash Caps";
}

.background-text.calendar {
	transform: translate(-50%, -30%);
}

.text-date-2 {
	font-size: 3vw;
	margin: 2rem 0 1.5rem 0;
	font-family: "Zilla Slab";
}

.text-date-3 {
	font-size: 4vw;
	font-family: "Bilbo Swash Caps";
}

.text-time-1 {
	font-size: 4vw;
	font-family: "Bilbo Swash Caps";
	margin-top: 6rem;
}

.text-time-2 {
	font-size: 9vw;
	line-height: 7rem;
	color: var(--color-light);
	font-family: "Zilla Slab";
}

.text-time-3 {
	font-size: 4vw;
	margin-top: 1rem;
	font-family: "Bilbo Swash Caps";
}

.text-address-1 {
	font-size: 1.5vw;
	font-family: "Zilla Slab";
}

.text-address-2 {
	font-size: 4vw;
	font-family: "Bilbo Swash Caps";
}

.text-address-3 {
	font-size: 7vw;
	margin: 0 0 2rem 0;
	color: var(--color-light);
	font-family: "Bilbo Swash Caps";
}

.text-address-4 {
	font-size: 2vw;
	font-family: "Zilla Slab";
}

.text-address-5 {
	font-size: 2vw;
	font-family: "Zilla Slab";
}

.text-confirmation-1 {
	font-size: 1.5vw;
	font-family: "Zilla Slab";
}

.text-confirmation-2 {
	font-size: 7vw;
	margin: 0 0 2rem 0;
	color: var(--color-light);
	font-family: "Bilbo Swash Caps";
}

.text-confirmation-3 {
	font-size: 1.5vw;
	font-family: "Zilla Slab";
	margin-top: 1rem;
}

.text-gift-1 {
	font-size: 1.5vw;
	font-family: "Zilla Slab";
}

.text-gift-2 {
	font-size: 4vw;
	font-family: "Bilbo Swash Caps";
}

.text-gift-3 {
	font-size: 7vw;
	margin: 2rem 0;
	color: var(--color-light);
	font-family: "Bilbo Swash Caps";
}

.text-dresscode-1 {
	font-size: 1.5vw;
	font-family: "Zilla Slab";
}

.text-dresscode-2 {
	font-size: 7vw;
	color: var(--color-light);
	font-family: "Bilbo Swash Caps";
}

.text-dresscode-3 {
	font-size: 3vw;
	font-family: "Bilbo Swash Caps";
}

.text-bottom-1 {
	font-size: 7vw;
	font-family: "WindSong";
	color: var(--color-light);
	margin: 2rem 0 15rem 0;
	white-space: nowrap;
}

.calendar tr {
	color: var(--color-light);
}

.calendar td {
	color: var(--color-medium);
	width: 3rem;
	text-align: center;
}

/* gifts */

.text-gifts-introduction {
	font-size: 3.5vw;
	margin-top: 2rem;
	font-family: "Bilbo Swash Caps";
	text-align: justify;
	color: var(--color-light);
}

.text-gifts-introduction .heart {
	font-size: 1.5rem;
}

.gifts-container {
	display: flex;
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
}

.gift-item {
	border: solid 1px var(--selected-color);
	padding: 0.25rem 2rem;
	border-radius: 3rem;
	width: 75%;
	display: flex;
	margin: 1rem 0;
	justify-content: space-between;
	align-items: center;
}

.gift-icon-2 {
	width: 2rem;
}

.gift-icon-2 > img {
	width: 100%;
	width: 3rem;
	filter: var(--filter-icon);
	-webkit-filter: var(--filter-icon);
}

.gift-text-2 {
	flex-grow: 1;
	margin: 0 0 0 2rem;
	font-size: 2vw;
	font-family: "Zilla Slab";
}

.gift-money-2 {
	width: 7rem;
	margin-left: 1rem;
	font-size: 2.5vw;
	line-height: 3rem;
	font-family: "Zilla Slab";
	color: var(--color-light);
}

.gift-transfer-1 {
	font-size: 4vw;
	color: var(--color-light);
	margin-bottom: 2rem;
	font-family: "Bilbo Swash Caps";
}

.gift-transfer-2 {
	margin: 1rem 0;
	font-size: 1.5vw;
	font-family: "Zilla Slab";
	text-transform: uppercase;
}

.background-image-2-wrapper  {
	text-align: center;
}

.background-image-2 {
	width: 50%;
	border-radius: 1rem;
}

.disclaimer {
	font-size: 3vw;
	text-align: center;
	font-family: "Bilbo Swash Caps";
}

.gift-title {
	font-size: 2vw;
	color: var(--color-light);
}

.gift-subtitle {
	font-size: 1.5vw;
}

@media (min-width: 1024px) {
	.calendar td {
		width: 4rem;
	}

	.gift-item {
		width: 75%;
	}

	.gift-money-2 {
		width: auto;
	}
}