@font-face { font-family: 'Stylish Calligraphy'; src: url('../../../assets/fonts/stylish-calligraphy.ttf'); }
@font-face { font-family: 'Master of Break'; src: url('../../../assets/fonts/master-of-break/master_of_break.ttf'); }
@font-face { font-family: reeyRegular; src: url('../../../assets/fonts/reey/Reey-Regular.otf'); }
@font-face { font-family: raquenRegular; src: url('../../../assets/fonts/raquen/Raquen-Regular.ttf'); }

:root {
    --color-primary: #338c90;
    --color-secondary: #fabf74;
    --color-alt: #5dab8a;
    --color-white: #ffffff;
    --color-bg: #fbf4e0;
}

body {
    background-color: var(--color-white);
    font-size: 16px; 
    overflow-x: hidden; 
    padding: 0; 
    margin: 0; 
}

.page, #cover {
    background-color: var(--color-bg);
    max-width: 420px;
    margin: 0 auto;
}

.overflow-y-h { overflow-y: hidden; }

.f-stylish { font-family: 'Stylish Calligraphy', sans-serif; }
.f-mob { font-family: 'Master of Break', sans-serif; }
.f-reey { font-family: reeyRegular, sans-serif; }
.f-raquen { font-family: raquenRegular, sans-serif; }

.bg-primary { background-color: var(--color-primary); }

.color-secondary { color: var(--color-secondary); }
.color-white { color: var(--color-white); }

h1, h2, h3, h4, h5 { margin: 10px 0; }

.btn {
    display: inline-block; 
    font-size: 12px;
    border-radius: 5px; 
    background-color: var(--color-primary); 
    color: #fff; 
    padding: 10px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}
.btn-primary {
    display: inline-block; 
    font-size: 12px;
    border-radius: 5px; 
    background-color: var(--color-primary); 
    color: #fff; 
    padding: 10px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}
.btn-secondary {
    display: inline-block; 
    font-size: 12px;
    border-radius: 5px; 
    background-color: var(--color-secondary); 
    border: none;
    color: #000000; 
    padding: 10px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}

.hero { background-color: var(--color-bg); display: flex; position: relative; height: 100vh; flex-direction: column; justify-content: center; align-items: center; color: var(--color-primary); text-align: center; overflow: hidden; }
    .hero .v-d-1 { position: absolute; right: -30px; top: -30px;}
    .hero .v-b-1 { position: absolute; left: 0; height: 130px; }
    .hero .v-b-2 { position: absolute; right: 0; height: 130px; }
    .hero .text-1 { margin-top: -35%; }
    .hero .img-mempelai {
        max-width: 100%;
        height: 200px;
    }

.inv-close { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; }

#audio { position: fixed; left: 1rem; bottom: 30%; z-index: 3; }
    #audio #btn-play { color: var(--color-primary); }

#btn-open { background-color: var(--color-primary); color: #fff; padding: 10px 15px; border: 1px solid #829077; border-radius: 10px; font-size: 0.8rem; z-index: 1; cursor: pointer; vertical-align:baseline; }
.btn-location { display: inline-block; font-size: 15px; border: none; border-radius: 5px; background-color: var(--color-primary); color: #fff; padding: 10px 18px; }

#welcome img { border-radius: 1rem 3rem 1rem 3rem; }
#welcome { font-family: 'Baskerville 9'; color: #767676; /*margin: 5rem 0;*/ }

/*#profile { background-size: cover; background-position: center; width: 100%; height: 500px; }*/
#profile { background-color: var(--color-primary); color: #fff; }
#profile .cover-profile { width: 100%; height: 500px; object-fit: cover; }
#profile .bride { font-family: 'Stylish Calligraphy', sans-serif; font-size: 3.5rem; }

.caption-profile { position: relative; top: -5rem; }
.m-circle { width: 130px; height: 130px; border-radius: 50%; border: 3px solid #fff;  }

.animat-hide { visibility: hidden; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s; }

.info-text { 
    background: linear-gradient(180deg, #fdf8e5 60%, #ede6ca 50%); 
    color: #000000;
    box-shadow: 3px 1px 9px 0px #888888;
    border-radius: 15px;
}
.cover-info { background-size: cover; background-position: center; width: 100%; height: auto; }
    .schedule-info {
        display: flex;
        flex-direction: column;
        background: #fcfaeb;
        box-shadow: 6px 2px 15px 0px #c9c9c9;
        border-radius: 15px;
    }

#countdown {
    margin: 1.5rem 0;
}
.countdown-item {
    background: var(--color-primary);
    margin: 0 10px;
    padding: 10px 13px;
    color: var(--color-white);
}

.gallery .item { margin-bottom: 10px; padding: 10px; }
.gallery .item img { width: 100%; height: 100%; object-fit: cover;  }

#gift .row { background-color: var(--color-primary); color: #fff; padding: 2rem; border-radius: 15px; }
.btn-amplop { background-color: var(--color-white); font-size: 1rem; border: 1px solid var(--color-white); border-radius: 10px; padding: 10px 20px; }

#guestBook .box-msg { background-color: var(--color-white); color: var(--color-primary); }
#guestBook .wrapper-msg { border: 1px solid var(--color-primary); color: #000; padding: 1.2rem; margin-bottom: 1rem; min-height: 500px; max-height: 500px; overflow-y: auto; border-radius: 15px; }
    #btnGB { background-color: var(--color-primary); color: var(--color-white); cursor: pointer; }
    #guestBook .wrapper-msg h5 { font-size: 1.3rem; margin-top: 0; margin-bottom: 10px; }
    #guestBook .wrapper-msg p { font-size: 14px; margin: 0; }

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

    .hero .v-b-1 { bottom: 7%; }
    .hero .v-b-2 { bottom: 7%; }

    /*.m-circle {  width: 150px; height: 150px;  }*/
    .welcome-caption { margin: 30px 0; font-size: 1.2rem; }
    .gallery .item { flex: 1 1 50%; height: 200px; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /*section { margin: 3rem 0; }*/
    
    .hero .v-b-1 { bottom: 0; }
    .hero .v-b-2 { bottom: 0; }

    /*.gallery .item { flex: 1 1 33.33%;  height: 400px; }*/
    .gallery .item { flex: 1 1 50%; height: 200px; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .welcome-caption { padding-top: 20%; padding-bottom: 20%; }
}