/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f8f5f1;
    font-family:'Montserrat',sans-serif;
    color:#3d3028;
}

.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
}

.container{
    max-width:900px;
    text-align:center;
}

h1{
    font-family:'Cormorant Garamond',serif;
    font-size:4rem;
    color:#b58a42;
    margin-bottom:10px;
}

.subtitle{
    font-size:1.1rem;
    margin-bottom:30px;
}

.invite{
    width:100%;
    max-width:800px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
    margin-bottom:35px;
}

.countdown{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:35px;
}

.countdown div{
    background:white;
    padding:20px;
    min-width:110px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.countdown span{
    display:block;
    font-size:2rem;
    font-weight:bold;
    color:#b58a42;
}

.countdown small{
    font-size:.9rem;
}

.info{
    margin-bottom:35px;
    line-height:1.8;
}

.info h2{
    font-family:'Cormorant Garamond',serif;
    font-size:2rem;
    color:#b58a42;
}

.btn{
    display:inline-block;
    padding:15px 35px;
    background:#b58a42;
    color:white;
    text-decoration:none;
    border-radius:50px;
    transition:.3s;
    font-weight:600;
}

.btn:hover{
    transform:translateY(-3px);
    opacity:.9;
}

@media(max-width:768px){

    h1{
        font-size:3rem;
    }

    .countdown{
        flex-wrap:wrap;
    }

    .countdown div{
        min-width:90px;
    }

}*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f8f5f1;
    font-family:'Montserrat',sans-serif;
    color:#3d3028;
}

.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
}

.container{
    max-width:900px;
    text-align:center;
}

h1{
    font-family:'Cormorant Garamond',serif;
    font-size:4rem;
    color:#b58a42;
    margin-bottom:10px;
}

.subtitle{
    font-size:1.1rem;
    margin-bottom:30px;
}

.invite{
    width:100%;
    max-width:800px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
    margin-bottom:35px;
}

.countdown{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:35px;
}

.countdown div{
    background:white;
    padding:20px;
    min-width:110px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.countdown span{
    display:block;
    font-size:2rem;
    font-weight:bold;
    color:#b58a42;
}

.countdown small{
    font-size:.9rem;
}

.info{
    margin-bottom:35px;
    line-height:1.8;
}

.info h2{
    font-family:'Cormorant Garamond',serif;
    font-size:2rem;
    color:#b58a42;
}

.btn{
    display:inline-block;
    padding:15px 35px;
    background:#b58a42;
    color:white;
    text-decoration:none;
    border-radius:50px;
    transition:.3s;
    font-weight:600;
}

.btn:hover{
    transform:translateY(-3px);
    opacity:.9;
}

@media(max-width:768px){

    h1{
        font-size:3rem;
    }

    .countdown{
        flex-wrap:wrap;
    }
    
    #confetti-container{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden;
    z-index:9999;
}


    .countdown div{
        min-width:90px;
    }

}