@import "https://www.nerdfonts.com/assets/css/webfont.css";
@import url("../fonts/inter.css");
@import url("../fonts/gothic_ultra_ot.css");
@import url("../fonts/artifika.css");

@font-face {
    font-family: 'AlexBrush';
    src: url('../fonts/alexbrush-regular-webfont.woff2') format('woff2'),
         url('../fonts/alexbrush-regular-webfont.woff') format('woff'),
         url('../fonts/AlexBrush-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light dark;
    --bg-color: light-dark(#F5EFD6, #2b312b);
    --text-color: light-dark(#0C223B, white);
}

:target {
    scroll-margin-top: 150px;
}

* {
    box-sizing: border-box;
    font-size: 100%;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    color: var(--text-color);
}

body {
    margin-top: 7rem;
}

h2 {
    font-family: "gothic_ultra_otregular";
    letter-spacing: 0.5ch;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 2px;
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-size: 4rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

h3 {
    font-family: "gothic_ultra_otregular";
    letter-spacing: 0.5ch;
    font-size: 3rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
}

h4 {
    font-family: "artifika";
    font-size: 1.8em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0.6rem;
}

p {
    text-align: center;
    font-family: "artifika";
    font-size: 1.3rem;
}

sup {
    font-size: 0.8em;
}

.email-link {
    display: block;
    text-decoration: none;
    color: inherit;
    font-size: 1.1em;
    line-height: 2em;
}

.navbar {
    z-index: 100;
    font-family: "gothic_ultra_otregular";
    letter-spacing: 0.5ch;
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    flex-direction: row;
    background-color: light-dark(#013220, #01160E);
    height: 7rem;
    align-items: center;

    .logo img {
        margin-right: auto;
        height: 6rem;
        padding-left: 0.5em;
    }
    
    @media (max-width: 870px){
        .nav-links {
            display: none;
            flex-direction: column;
            position: fixed;
            top: 7rem;
            margin-top: 0;
            background-color: light-dark(#013220DD, #013220EE);
            width: 100%;
            height: calc(100vh - 7rem);
            text-align: right;
            overflow: auto;
            padding: 1.5rem;
            li {
                padding: 1.5em;
                margin-left: auto;
                display: block;
                list-style-type: none;
            }
            a {
                text-decoration: none;
                color: white;
                font-size: 4em;
            }
        }

        .hamburger {
            display: inline-block;
            background: none;
            border: none;
            font-size: 3.5em;
            margin-left: auto;
            color: white;
            vertical-align: middle;
            margin-right: 0.5em;

            #close-hamburger {
                display: none;
            }
        }
        .hamburger:hover {
            cursor: pointer;
        }
    }
    
    @media (min-width: 870px){
        .nav-links {
            align-self: center;
            display: flex;
            gap: 3em;
            justify-self: flex-end;
            margin-left: auto;
            padding-right: 3em;
            flex-direction: row;

            li {
                list-style-type: none;
                display: block;
                margin: 0;
                padding: 0;
            }
            a {
                text-decoration: none;
                color: white;
                font-size: 2em;
            }
        }

        .hamburger {
            display: none;
        }
    }
}

.hero {
    display: flex;
    justify-content: center;
    background-image: url('../images/hero.jpg');
    background-color: transparent;
    background-blend-mode: darken;
    @media (prefers-color-scheme: dark) {
        background-color: rgba(0, 0, 0, 0.25);

    }
    background-size: cover;
    background-position: center;
    /* aspect-ratio: 16 / 9; */
    width: 100%;
    height: calc(100vh - 7rem);
    text-align: center;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    padding-left: 2rem;
    padding-right: 2rem;

    .hero-text {
        align-self: center;
        transform: translateY(-7vh);
        font-family: 'AlexBrush', cursive;
        color: white;
        font-size: 6rem;
        line-height: 1.2;

        #ampersand {
           font-size: 4rem;
        }
     }
}

.link-section {
    margin-top: 5rem;
    margin-bottom: 9rem;
    p {
        padding-left: 4rem;
        padding-right: 4rem;
        padding-bottom: 3rem;
    }
    
    h2 {
        color: var(--text-color);
    }
    
    #registry-links {
        padding: 3rem;
        color: white;
        display: flex;
        flex-direction: column;
        justify-self: center;
        gap: 5rem;
        font-family: "InterVariable";
        font-weight: 800;
        li {
            list-style-type: none;
            border-radius: 9999px;
            box-shadow: 3px 2px 0 1px rgba(0, 0, 0, 0.8);
            a {
                text-align: center;
                margin-left: auto;
                margin-right: auto;
                max-width: 20rem;
                padding: 2rem;
                display: block;
                text-decoration: none;
                color: white;
                font-size: 2rem;
                box-decoration-break: clone;
                -webkit-box-decoration-break: clone;
            }
            
        }
        li:active {
            transform: scale(0.98);
        }

        #amazon-registry-link {
            background-color: #FF9900;
        }
        #amazon-registry-link:hover {
            background-color: #cc7a00;
        }
        
        #venmo-registry-link {
            background-color: #008CFF;
        }
        #venmo-registry-link:hover {
            background-color: #0070CC;
        }
    }

    #venmo-note {
        transform: translateY(0.3em);
        margin-left: auto;
        margin-right: auto;
        font-family: "artifika";
        font-size: 1rem;
        font-weight: normal;
    }
}

.event-details {
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
    /* align-content: center; */
    align-items: center;
    justify-content: center;
    section {
        display: block;
        min-width: 20rem;
        padding-left: 3rem;
        padding-right: 3rem;
    }
    padding-bottom: 3rem;
}