/* Global Styles for site-wide access. */
@font-face {
    font-family: AlverataBl;
    src:
        local("AlverataBl"),
        url("/_astro/AlverataBl.DhykMb42.otf") format("opentype");
}

@font-face {
    font-family: Greatly;
    src:
        local("Greatly Clean"),
        url("/_astro/Greatly%20Clean.DFs2YKQd.otf") format("opentype");
}

:root {
    /* Breakpoints */
    --mobile-width: 600px;
    --large-mobile-width: 600px;
    --widescreen: 1080px;
    --largescreen: 1200px;

    /* Font Family Groups */
    --Alverata: AlverataBl, Georgia, 'Times New Roman', Times, serif;

    /* Global color constants */
    --brand-main: #620a16;
    --brand-main-transparent: rgba(98, 10, 22, 0.86);
    --brand-second: #52452c;
    --brand-second-transparent: #52452c55;
    --brand-third: #f9f7ea;
    --brand-third-transparent: #f9f7ea55;
    --silver: #d9d9d9;
    --silver-transparent: #d9d9d955;

    /* Box Styling */
    --shadow-medium: 0px -8px 18px -1px var(--brand-third);
    --border-rad: 3px;
    --global-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    --button-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

    /* Spacing constants */
    --paragraph-space: 22px;
    --venue-features-space: 35px;

    pointer-events: auto;
}

:root figure {
        margin: 0;
}

/* Get rid of any default padding or margin that might
   be applied by the browser. */
html {
    padding: 0;
    margin: 0;
}

body {
    /* A nice fade-in to cover any loading delays in photo elements. */
    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 100;
        }
    }

    margin: 0;
    padding: 0;
    animation: .5s ease-in 0s 1 fadeIn;
    background-color: var(--brand-third);
}

/* All page content is loaded into a containing div. */
#content-container {
    box-sizing: border-box;
    display: grid;
    height: fit-content;

    /* Keep inner content to a reasonable width, but allow the background
       to expand however far is necessary. This puts the content on a central track
       and keeps them from stretching unreasonably.
    max-width: 1920px;*/

    /* Desktop grid columns */
    /* Shifts at 1080px, again at --large-mobile-width. */
    grid-template-columns: 12% 25% 22% 25% 12%;

    column-gap: 1%;
    row-gap: 20px;
    grid-auto-rows: 10vh;
    place-items: center;
    place-content: stretch;
}

#content-container .full-width-padded {
    grid-column: 3 / 4;
}

.button {
    cursor: pointer;
    font-family: var(--Alverata);
    height: 75px;
    width: 250px;
    padding: 0px 15px;
    display: block;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    box-shadow: var(--button-shadow);
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
    border-radius: var(--border-rad);
    z-index: 25;
    background: var(--brand-main-transparent);
    color: var(--brand-third);
    border: 1px solid var(--silver-transparent);
}

#content-container .button a {
    text-decoration: none;
    color: var(--brand-third);
    font-family: var(--Alverata);
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    align-content: center;
}

.white-buttons {
    cursor: pointer;
    font-family: var(--Alverata);
    height: 50px;
    width: min(75%, 250px);
    display: block;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    box-shadow: var(--button-shadow);
    -webkit-backdrop-filter: blur(13px);
    backdrop-filter: blur(13px);
    border-radius: var(--border-rad);
    z-index: 25;
    background-color: var(--brand-third);
    color: var(--brand-main);
    border-color: var(--brand-main);
    border-width: 1px;
    border-style: solid;
}

.white-buttons a {
    text-decoration: none;
    color: var(--brand-main);
    font-family: var(--Alverata);
}


#content-container .banner-button {
    z-index: 25;
}

@media screen and (max-width: var(--widescreen)) {
    #content-container {
        grid-template-columns: 3% 28% 30% 28% 3%;
    }
}

@media screen and (max-width: 600px) {
    #content-container {
        display: flex;
        flex-direction: column;
        height: fit-content;
        margin: 0 10px;
    }
}

.full-width {
    grid-column: 1 / 6;
}

.centered {
    grid-column: 3;
}

h1 {
    font-family: var(--Alverata);
    text-align: center;
    font-weight: 800;
    font-size: 84px;
    line-height: 0.9;
    color: var(--brand-main);
}

h1 strong {
    font-family: Greatly;
    font-weight: 400;
}

@media screen and (max-width: 600px) {
    h1 {
        font-weight: 600;
        font-size: 52px;
        padding: 18px 0;
    }
}

h2 {
    font-family: var(--Alverata);
    text-align: center;
    font-size: 3.4rem;
    font-weight: 200;
    line-height: 1.1;
    color: var(--brand-second);
}

h2 strong {
    font-family: Greatly, Georgia, 'Times New Roman', serif;
}

h3 {
    font-family: Greatly, Georgia, 'Times New Roman', serif;
    text-align: left;
    font-size: 48px;
    color: var(--brand-second);
    line-height: 0.9;
}

h4 {
    font-family: var(--Alverata);
    text-align: left;
    font-size: 24px;
    line-height: 0.9;
    color: var(--brand-second);
}

p {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 400;
    line-height: 1;
    color: var(--brand-second);
    font-size: 1.4rem;
}

li {
    font-size: 1rem;
    padding: var(--paragraph-space);
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Global Footer */
#footer {
    /* Ensure that it's always at the bottom of the page. */
    grid-area: -1 / 1 / -1 / 6;
    width: 100vw;
    display: flex;
    flex-direction: column;
    background-color: var(--brand-second);
    position: relative;
    box-sizing: border-box;
    height: fit-content;
    place-self: start stretch;
}

@media screen and (min-width: 600px) { 
    /* It's always the full width of the page. To make sure that
    it lines up on the edge of the window regardless of screen size,
    we need to calculate where exactly the left side is and position it
    accordingly.
    #footer {
        left: calc(calc(calc(100vw - 1200px) / 2) * -1);
    }*/
}

#footer #social-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    height: 100px;
    box-sizing: border-box;
    margin: 0 5vw 8vh;
}

#footer #social-icons figure {
    align-content: center;
    width: 45px;
    height: auto;
    padding: 20px;
}
        
#footer #social-icons img {
    width: 45px;
    height: auto;
}

#footer #social-icons #wedding-wire {
    width: 90px;
    height: auto;
}

#footer #social-icons #wedding-wire img {
    width: 90px;
    height: auto;
}


#footer #footer-left,
#footer #footer-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#footer img {
    height: 125px;
    width: fit-content;
    margin: auto;
}

#footer h2 {
    color: var(--brand-third);
}

#footer #addresses {
    text-align: center;
    color: var(--brand-third);
    text-decoration: none;
    padding-bottom: 10vh;
}

#footer #addresses a {
    color: var(--brand-third);
    text-decoration: underline;
}

@keyframes link-hover {
    0% {
        color: var(--brand-third);
    }
    100% {
        color: var(--brand-third-transparent);
    }
}

#footer #addresses a:hover {
    animation: 0.25s ease-in 0s both link-hover;
}

@media screen and (max-width: 900px) {
    h2 {
        font-size: 3rem;
    }

    p {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 600px) {
    h2 {
        font-size: 2rem;
    }
    
    #footer #footer-left,
    #footer #footer-right {
        width: 100vw;
        height: fit-content;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    
    #footer img {
        width: 100%;
        height: auto;
    }
    #footer #addresses {
        text-align: center;
        text-decoration: none;
        padding-bottom: 10vh;
    }
}