:root {

    /* PAGE CONFIGURATIONS */
    
    /* Images & Overlay Tint Variables */
    --overlay-tint: rgba(28,13,10,0.3);
    --main-display-image: url(./assets/BridgeWide.jpg);
    --second-display-image: url(./assets/Sunset.jpg);
    
    /* Color Mapping Variables */
    --background: #fff;
    --header-color: var(--accent-1);
    --button-color: var(--background);
    --button-text-color: var(--accent-1);
    --heart: var(--accent-5);

    /* Display Mapping Variables */
    --header-height: 7vh;
    --main-display-height: 100vh;
    --second-display-height: 30vh;
    --nav-down-bottom-distance: 10vh;
    --footer-height: 10vh;

    --first-list-item-start-height: calc(var(--main-display-height) - var(--header-height));

    /* Color Profile Mapping Variables */
    --primary: var(--background);
    --primary-dark: #ffffffd2;
    --primary-darker: #ffffff88;
    --secondary: #1b1b1b;
    --tertiary: #faebe3;

    /* Color Theme Variables */
    --accent-1: #363432;
    --accent-2: #196774;
    --accent-3: #90A19D;
    --accent-4: #F0941F;
    --accent-5: #EF6024;

    /* Fonts */
    --main-font: "Playfair Display";
    --main-header-font: "Playfair Display";
    --secondarty-header-font: 'Playfair Display';

    /* Accomodations PDF Size */
    --accom-pdf-width: 80%;
    --accom-pdf-height: 105vh;

}

/* Tablets */
@media (min-width: 600px) {
    :root {
        --header-height: 5vh;
        --main-display-height: 100vh;
        --second-display-height: 30vh;
        --footer-height: 7vh;
        --accom-pdf-width: 100%;
        --accom-pdf-height: 105vh;
    }
}

/* Small Laptops / Desktops */
@media (min-width: 1024px) {
    :root {
        --header-height: 5vh;
        --main-display-height: 100vh;
        --second-display-height: 30vh;
        --footer-height: 5vh;
    }
}

/* Large screens */
@media (min-width: 1440px) {
    :root {
        --header-height: 5vh;
        --main-display-height: 100vh;
        --second-display-height: 50vh;
        --footer-height: 5vh;
    }
}


/* General Page CSS */
html {
    scroll-behavior: smooth;
  }

body {
    background-color: var(--background);
    margin: 0px;
    font-family: var(--main-font), sans-serif;
}

h1, h2 {
    font-family: var(--main-header-font), sans-serif;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-family: var(--secondarty-header-font), sans-serif;
    padding-left: 5%;
    padding-right: 5%;
}

/* Define Button Styles */
.primary_button {
  padding: 10px 20px; /* Adjust size */
  font-size: 16px; /* Adjust font size */
  color: var(--button-text-color); /* Text color */
  background-color: var(--button-color); /* Background color */
  border: none; /* No border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Hand cursor on hover */
  outline: none; /* No outline */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Drop shadow */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.primary_button:hover {
    background-color: var(--primary-dark); /* Darker shade on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Larger drop shadow on hover */
  }
  
.primary_button:active {
    background-color: var(--primary-darker); /* Even darker shade when the button is clicked */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Revert to original drop shadow */
  }

/* Define the display_section default look and feel */
.display_section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

/* Define display_section page_header specific styles */
#page_header {
    position: relative;
    z-index: 10;
    color: var(--header-color);
    height: var(--header-height);

}
#page_header > h1 {
    font-weight: 700;
    font-size: 24px;
}

/* Define display_section specific styles for main_display section (first section) */
#main_display {
    position: absolute;
    top: 0%;
    height: var(--main-display-height);
    background-image: var(--main-display-image);
}
#main_display > .content > h1 {
    margin-bottom: -15px;
}

/* Define display_section specific styles for second_display section */
#second_display {
    height: var(--second-display-height);
    background-image: var(--second-display-image);
}
#second_display > .content > h3 {
    margin-bottom: -15px;
}

/* Define display_section specific styles for our_story section since it's just behind the rsvp section */
.first_list_item {
    margin-top: var(--first-list-item-start-height);
}

/* Define display_section photo specific styles */
.display_section.photo {
    background-size: 100% auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}
.display_section.photo > .photo_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-tint);
}
.display_section.photo > .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

/* Define display_section light specific styles */
.display_section.light {
    background-color: var(--background);
}

/* Define display_section creme specific styles */
.display_section.creme {
    background-color: var(--tertiary);

}

/* Define display_section dark specific styles */
.display_section.dark {
    background-color: var(--secondary);
    color: var(--background);
}

/* Define display_section heart specific styles */
.heart {
    color: var(--heart);
}

/* Define the inline behavior */
.inline {
    display: flex;
    align-items: normal;
}

/* Define vertical-spacer behavior */
.vertical-spacer {
    position: relative;
    height: 30vh;
}

/* Define footer */
.footer {
    display: flex;
    justify-content: center;
    height: var(--footer-height);
    color: var(--background);
    background-color: var(--accent-1);
}

/* Define nav_down_arrow behavior */
.nav_down_arrow {
    position: absolute;
    bottom: var(--nav-down-bottom-distance);
    font-size: 48px; /* Adjust size as needed */
    color: var(--background); /* Adjust color as needed */
  }
.nav_down_arrow > a {
    text-decoration: none;
    color: var(--background); 
}
.nav_down_arrow {
	width: 6vmin;
	height: 6vmin;
	box-sizing: border-box;
	position: absolute;
    bottom: var(--nav-down-bottom-distance);
	transform: rotate(135deg);
	
	&::before {
		content: '';
		width: 100%;
		height: 100%;
		border-width: .8vmin .8vmin 0 0;
		border-style: solid;
		border-color: var(--background);
		transition: .2s ease;
		display: block;
		transform-origin: 100% 0;
	}

	
	&:after {
		content: '';
		float: left;
		position: relative;
		top: -100%;
		width: 100%;
		height: 100%;
		border-width: 0 .8vmin 0 0;
		border-style: solid;
		border-color: var(--background);
		transform-origin: 100% 0;
		transition:.2s ease;
	}
	
	&:hover::after {
		transform: rotate(45deg);
		border-color: var(--primary);
		height: 120%;
	}
	&:hover::before {
		border-color: var(--primary);
		transform: scale(.8);
		
	}
	
}

/* Define grid behavior */
.grid {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(3, fit-content(33%));
    padding-left: 0.5%;
    padding-right: 0.5%;
    width: 99%;
    font-size: 20vh;
}
.grid-icon > a > img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: auto;
}
.grid-icon > a {
    text-decoration: none;
    color: var(--secondary); 
}

/* Define grid types */
.grid.grid-dbl {
    grid-template-columns: repeat(2, fit-content(50%));
    padding-left: 0.5%;
    padding-right: 0.5%;
}

.grid.grid-tri {
    grid-template-columns: repeat(3, fit-content(33%));
    padding-left: 0.5%;
    padding-right: 0.5%;
}
.grid.grid-quad {
    grid-template-columns: repeat(4, fit-content(25%)); 
}

/* Define wedding_details specific styling */
#wedding_details {
    margin-bottom: 3vh;
}

#wedding_details > h3 {
    margin-top: 0px;
    margin-bottom: 0px;
}

/* Define rsvp container styling */
#rsvpFormContainer {
    position: fixed;
    border: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
  }

  #rsvpFormContainer iframe {
    width: 100%;
    height: 100%;
    padding-top: 5%;
    border: none;
    outline: none;
  }

  #rsvpFormCloseButton {
    position: absolute;
    color: var(--primary);
    top: 10px;
    right: 20px;
    background: var(--overlay-tint);
    border-radius: 5px;
    border: none;
    font-size: 2em;
    cursor: pointer;
  }
/* Accomodations PDF iframe view */
  #Accomodations > iframe {
    width: var(--accom-pdf-width);
    height: var(--accom-pdf-height);
    padding-top: 0%;
    border: none;
    outline: none;
    scrollbar-color: dark;
  }