:root {
    --white: #fff;
    --off-white: #fdfcfd;
    --black: #000;
    --off-black: #343231;
    --lt-beige: #e0cfc2;
    --md-beige: #caae9f;
    --lt-grey: #e0dcdc;
    --md-brown: #665d56;
    --lt-pink: #e6d8d9;
    --md-pink: #e3c6ca;
    --dk-pink: #8e5e65;;
    --lt-burgundy: #83565c;
    --md-burgundy: #4f2b30;
    --dk-burgundy: #2e0c10;    
}

.container {
    max-width: auto;
}

body {
    background-color: var(--dk-burgundy);
    background-image: url(../img/bk-barnwood.jpg);
    font-family: 'Cinzel', serif;
    font-family: 'Great Vibes', cursive;
    font-family: 'Ruwudu', serif;
    color: var(--off-black);
    font-size: 100%;
    line-height: 1.5;
}

.inner-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 1rem;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/*************************Typography*************************/

h1 {
    font-family: 'Cinzel',serif;
}

h1 a {
    font-size: 1.5rem;
}

h2 {
    font-family:  'Great Vibes', cursive;
    color: var(--dk-burgundy);
    font-size: 3rem;
    font-weight: 100;
    text-align: center;
    margin: 1rem 0;
    line-height: 3rem;
}

a {
    color: var(--lt-pink);
    text-decoration: none;
    font-size: 1.25rem;
    text-transform: uppercase;
}

a:hover {
    color: var(--dk-burgundy);
    fill: var(--dk-burgundy);
} 

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

.sign-off:last-of-type{
    font-size: 1.5rem;
    font-family: 'Great Vibes', cursive;
}

/*************************Header*************************/

header {
    background-color: var(--md-burgundy);
    z-index: 3;
}

header .flex-container {
    justify-content: space-between;
    align-items: center;
    
}

nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height .8s ease-in-out;
    width: 100vw;
    position: absolute;
    top: 48px;
    left: 0;
    background-color: var(--md-burgundy);
    padding: 0 1rem;
    box-shadow: 2px 2px 5px 1px var(--dk-burgundy);
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

ul.main-menu {
    padding-top: .25rem;
}

ul.main-menu li {
    border-bottom: 1px solid var(--dk-pink);
}

ul.main-menu li:last-of-type {
    border-bottom: none ;
}

ul.main-menu a {
    line-height: 1.5rem;
    padding: .5rem;
    padding-top: 1rem;
    display: block;
}

.toggle-btn {
    background-color: transparent;
    border: none;
    padding: 0 0 0 .25rem;
}

.toggle-btn svg {
    width: 1.75rem;
    fill: var(--lt-grey);
    display: block;
}

.toggle-nav {
    background-color: var(--lt-burgundy);
    border: none;
    color: var(--white);
    font-size: .8rem;
}

.show-nav {
    max-height: 27rem;
}

/*************************Main*************************/

main .inner-container {
    background-color: var(--off-white);
    padding: 4rem 1rem 1rem 1rem;
}

main .flex-container {
    justify-content: center;
}

main p {
    text-align: center;
    padding: 0 1rem;
}

main h2 {
    display: block;
}

.main-paragraphs svg {
    visibility: hidden;
    width: 0;
}

.main-img {
    width: 100vw;
    background-color: var(--md-burgundy);
    background: linear-gradient(90deg, rgba(131,86,92,1) 0%, rgba(46,12,16,1) 50%, rgba(131,86,92,1) 100%);
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    max-width: 1300px;
    box-shadow: 0 0 2px 1px;
}

main img {
    max-height: 60vh;
}

.cards {
    width: 75vw;
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.cards a {
    color: var(--dk-burgundy);
}

.card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem 0;
    max-width: 375px;
}

.card h3 {
    font-size: 2rem;
    text-align: center;
}

.card p {
    margin: 0;
}

.card-svg {
    fill: var(--dk-burgundy);
    position: relative;
    align-self: center;
}


.bk-circle {
    fill: var(--lt-burgundy);
    z-index: 0;
}

.card-symbol {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1;
}

.rsvp-svg {
    top: 43%;
    left: 50%;
    width: 70%;
}

.reg-svg {
    top: 44%;
    left: 50%;
    width: 75%;    
}

.card p {
    text-transform: none;
}

/*************************Footer*************************/

footer {
    background-color: var(--md-burgundy);
    padding: 1rem 1rem .5rem 1rem;
    box-shadow: 0 0 2px 1px --dk-burgundy;
}

footer .inner-container p {
    font-family:  'Great Vibes', cursive;
    color: var(--lt-burgundy);
    font-size: 4rem;
    line-height: 5rem;
    text-align: center;
    width: 100%;
    margin: .5rem 0 .5rem 0;
}

ul.footer-menu {
    padding: 0;
    max-width: 25rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.footer-menu li {
    padding: .25rem 0;
}

.footer-menu a {
    font-size: 1rem;
    text-transform: capitalize;
    color: var(--lt-pink);
}

.footer-menu a svg {
    width: .75rem;
    fill: var(--lt-pink);
}

/*************************Media Queries*************************/
@media screen and (min-width: 800px) {

    main section {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    h1 {
        font-size: 2rem;
    }

    .toggle-btn svg {
        width: 2rem;
    }

    main h2 {
        width: 100%;
        font-size: 4.5rem;
        line-height: 4.5rem;
    }

    .main-img {
        width: auto;
        background-color: transparent;
        padding: 0;
    }

    .main-img, .main-img img {
        width: auto;
        max-height: auto;
    }

    .main-paragraphs {
        width: 45%;
    }

    .main-paragraphs svg {
        visibility: visible;
        fill: var(--md-brown);
        display: block;
        margin: 0 38% 0 38%;
        width: 24%;
        padding:0;
    }

}

@media screen and (min-width: 1100px) {
    h1 a {
        font: 4.5rem;
    }

    ul.main-menu li {
        border-bottom: none;
    }

    main section {
        align-items: flex-start;
    }

    main .flex-container {
        justify-content: center;
        align-items: flex-start;
    }

    button.toggle-btn {
        display: none;
    }

    nav {
        max-height: 53px;
        overflow: visible;
        position: static;
        width: auto;
        box-shadow: none;
    }

    .inner-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    ul.main-menu {
        display: flex;
        gap: 1rem;
    }

    ul.main-menu a {
        font-size: 1rem;
    }

}