:root{
    --primary: #CCC6BA;
    /* --secondary: #F7F1E4; */
    --black: black;
    --white: white;

    --font-primary: "Corben", serif;
    --font-cursive: "Italianno", cursive;;
}

*{
    font-family: var(--font-primary);
}

#app{
    overflow-x:hidden;
}

div.header{
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 9;
}

h1, h2{
    font-weight: 100;
    font-family: var(--font-cursive);
}

h2{
    font-size: 64px;
}

div.hero{
    width: 100%;
    height: 100vh;
    background-color: var(--primary);
}
    div.hero_names{
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 0px;
    }
    div.hero h1{
        font-size: 160px;
        text-align: center;
        color: black;
        transform: rotate(-20deg);
    }
        div.hero_names h1:first-child{
            transform: translate(-100%) rotate(-20deg);
            color: black;
        }
        div.hero_names h1:last-child{
            transform: translate(100%) rotate(-20deg);
            color: black;
        }
    div.hero_image{
        max-width: 600px;
        width: 100%;
        position: absolute;
        z-index: 0;
    }   
        div.hero_image img{
            width: 100%;
            height: 560px;
            border-top-left-radius: 1000px;
            border-top-right-radius: 1000px;
            object-fit: cover;
        }
div.invite_inner{
    max-width: 1300px;
    width: 100%;
}
div.timer{
    background-color: var(--primary);
}
div.timer_inner{
    gap: 64px;
}
div.timer_item{
    display: flex;
    flex-direction: column;
    text-align: center;
}
    div.timer_item span{
        font-size: 48px;
        font-family: var(--font-cursive);
        font-weight: 100;
    }
    div.timer_item i span{
        font-family: var(--font-primary);
        font-size: 48px;
    }
    div.timer_date{
        margin-top: 32px;
        font-size: 32px;
    }
div.nowHere{
    background-color: var(--primary);
}
div.here_image_cont{
    justify-content: space-around;
    margin-top: 32px;
}
    div.hero_image_item{
        max-width: 330px;
        width: 100%;
    }
        div.hero_image_item img{
            width: 100%;
            object-fit: cover;
            border-top-left-radius: 1000px;
            border-top-right-radius: 1000px;
        }
div.program{
    background-color: var(--primary);
}
    div.program_container{
        margin: 0 auto;
        width: max-content;
        display: flex;
        flex-direction: column;
        gap: 32px;
        margin-top: 64px;
    }
    div.program_item{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 32px;
    }
    div.program_text{
        text-align: left;
    }
        div.program_text h3{
            font-size: 32px;
            font-weight: 100;
        }
        div.program_text p{
            font-family: var(--font-cursive);
            font-size: 32px;
            font-weight: 100;
        }
    div.program_icon{
        max-width: 80px;
        width: 100%;
    }
        div.program_icon img{
            width: 100%;
        }



div.rsvp_yes{
    display: none;
    flex-direction: column;
}
#saveBtn{
    display: none;
}
section.rsvp-section{
    display: none;
    flex-direction: column;
}
    .rsvp_yes > h2{
        font-size: 64px;
    }
    div.rsvp_inner{
        text-align: center;
    }
        div.rsvp_inner p{
            width: max-content;
            font-size: 32px;
            transform: translate(100%, -100%);
        }
        div.btns{
            gap: 64px;
        }
    div.form_item{
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
    }
        div.form_item input, div.form_item select, div.form_item textarea{
            padding: 8px 12px;
        }

div.cantWait{
    width: 100%;
    height: 100vh;
    background-color: var(--primary);
}
    div.cantWait_text{
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 0px;
    }
    div.cantWait h1{
        font-size: 90px;
        text-align: center;
        color: black;
        transform: rotate(-30deg) translate(-150px, -150px);
    }
    div.cantWait_image{
        max-width: 600px; 
        width: 100%;
        position: absolute;
        z-index: 0;
    }   
        div.cantWait_image img{
            width: 100%;
            height: 600px;
            border-top-left-radius: 1000px;
            border-top-right-radius: 1000px;
            object-fit: cover;
        }
    div.hearts{
        width: max-content;
        align-self: flex-end;
        position: relative;
        top: 150px;
        left: 150px;
    }
        div.hearts img:first-child{
            transform: translateY(50px);
        }
        div.hearts img:last-child{
            width: 80px;
            height: 80px;
        }
div.info{
    background-color: var(--primary);
}
div.info_inner{
    max-width: 1100px;
    text-align: center;
}
    div.info_container{
        margin-top: 32px;
    }
        div.info_item{
            width: 100%;
        }
        div.info_item h3{
            font-size: 32px;
            font-weight: 100;
        }
            div.info_item p{
                margin-top: 32px;
                font-size: 24px;
                font-weight: 100;
            }
        div.info_item_divider{
            width: 4px;
            height: 100px;
            background: black;
            align-self: center;
            border-radius: 100px;
        }
div.master_item{
    max-width: 300px;
    width: 100%;
}
    div.masters_inner{
        justify-content: space-between;
        gap: 32px;
        text-align: center;
        margin-top: 32px;
    }
    div.master_item p strong{
        font-family: var(--font-primary);
    }
    div.master_item img{
        width: 100%;
        height: 400px;
        object-fit: cover;
        border-top-left-radius: 500px;
        border-top-right-radius: 500px;
        margin-bottom: 16px;
    }
@media only screen and (max-width: 1280px) {
    div.hero h1{
        font-size: 140px;
    }
    div.cantWait h1{
        font-size: 64px;
    }
}
@media only screen and (max-width: 1220px) {
    div.here_image_cont {
        justify-content: center;
        gap: 32px;
        flex-wrap: wrap;
    }
}
@media only screen and (max-width: 960px) {
    div.cantWait h1{
        transform: rotate(-20deg) translate(0px, -200px);
    }
}
@media only screen and (max-width: 900px) {
    div.hero_names h1:first-child{
        transform: translate(-20%) rotate(-20deg);
    }
    div.hero_names h1:last-child{
        transform: translate(20%) rotate(-20deg);
    }
}
@media only screen and (max-width: 810px) {
    div.timer_item span{
        font-size: 8vw;
    }
    
    div.info_container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    div.info_item_divider{
        height: 2px;
        width: 100px;
        margin-top: 32px;
    }
}
@media only screen and (max-width: 790px) {
    div.hearts{
        display: none;
    }
}
@media only screen and (max-width: 645px) {
    
    h2{
        font-size: 14vw;
    }
    div.rsvp_inner p{
        transform: translate(00%, -50%);
    }
    div.masters_inner{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    div.timer_inner{
        gap: 32px;
    }
    div.cantWait h1{
        transform: rotate(-20deg) translate(0px, 0px);
    }
    div.info, div.cantWait{
        padding-bottom: 16px;
    }
}
@media only screen and (max-width: 470px) {
    div.btns{
        gap: 32px;
        flex-direction: column;
    }
}