@import url(vendor/normalize.css);
@import url(vendor/flipcard.css);

@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&family=Pinyon+Script&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --sans: "Roboto", sans-serif;
    --serif: 'Gilda Display', serif;
    --script: 'Pinyon Script', serif;

    --small: 320px;
    --medium: 768px;
    --large: 1024px;

    --midnight: #1C3654;
    --stars: #E4CC94;
    --moon: #FBF8EE;
}

body {
    background-color: var(--midnight);
    background-image: url(../img/abstract-geometric-technology-pattern.svg);
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--moon);
    font-family: var(--serif);
    background-attachment: fixed;

    & h1 {
        font-family: var(--serif);
    }

    & a {
        color: var(--stars);
        transition: all 250ms;

        &::after {
            content: ' \00BB';
        }

        &:hover {
            color: var(--moon);
        }
    }
    & p {
        line-height: 1.4;
    }
}

.flip-card {
    margin: 24px auto;
}

.top-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    & .wrap {
        padding: 40px 20px;
        text-align: center;
        max-width: 550px;
    }

    &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-image: url(../img/weddingbanner.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        @media (min-width: 768px) {
            margin: 20px;
        }
    }
}

.script {
    font-family: var(--script);
    font-size: 1.25rem;
}

.name-content {
    & .name {
        font-family: var(--serif);
        text-transform: uppercase;
        font-size: 1.5rem;
        margin: 0 0 16px;
    }

    & .ampersand {
        position: relative;
        font-family: var(--script);
        font-size: 2rem;
        margin: 0 0 16px;

        &::before,
        &::after {
            content: '';
            position: absolute;
            width: 96px;
            height: 2px;
            background-color: var(--stars);
            top: 50%;
        }

        &::before {
            left: 0px;
        }

        &::after {
            right: 0;
        }
    }
}

.flip-card-back {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-layout {
    max-width: 980px;
    margin: 0 auto 30px;
}

.quick-info {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 30px;
    font-size: 1.25rem;

    @media (min-width: 768px) {
        flex-wrap: nowrap;
    }

    & .launchpad {
        flex: 0 1 100%;
        text-align: center;

        & a {
            text-decoration: none;
            font-weight: 600;

            &::hover {
                text-decoration: underline;
            }
        }

        @media (min-width: 768px) {
            flex: 0 1 50%;
        }
    }

    & .eyebrow {
        font-family: var(--sans);
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 12px;
    }
}



.spotlight {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;

    & .wrap {
        @media (min-width: 768px) {
            display: flex;
            align-items: center;
            gap: 40px;
        }
    }

    & .spotlight-image {
        flex: 0 1 50%;

        & img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 20px;
            border: 2px solid var(--stars);
        }
    }

    & .spotlight-content {
        flex: 0 1 50%;
    }
    & .eyebrow {
        text-transform: uppercase;
        letter-spacing: 1.5px;
    }
}

.call-to-action {
    position: relative;
    background-color: #000000;
    & .background-image {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        &::after {
            position: absolute;
            content: '';
            background: linear-gradient(134deg,rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.4) 100%);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    }

    & .wrap {
        text-align: center;
        position: relative;
        padding: 40px;
        @media (min-width: 768px) {
            padding: 80px 40px;
        }
    }
}

footer {
    background-color: #0a0a0a;
    color: #7D7D7D;
    font-family: var(--sans);
    font-size: 0.75rem;
    padding: 8px 20px;
    & .footer-wrap {
        display: flex;
        gap: 40px;
        max-width: 980px;
        margin: 0 auto;
        justify-content: center;
    }
}