:root {
    --viewport-width: 540px;
    --font-size: 3vw;
    --font-size-countdown: 1.5vw;
    --font-size-spaces: 4vw;
}

@media (max-width: 768px) {

    :root {
        --viewport-width: 100vw;
        --font-size: 10vw;
        --font-size-countdown: 4vw;
        --font-size-spaces: 12vw;
    }
}

@font-face {
    font-family: 'Binggo-Wood';
    src: url('assets/fonts/binggo-wood-display-serif.ttf') format('truetype');
}


body {
    margin: 0;
    background-color: #b9b7b7;
}

.container {
    width: var(--viewport-width);
    height: calc(var(--viewport-width) * (1920 / 1080));
    background-color: #f1f1f1;
    margin: 0px auto;
    position: relative;
    overflow: hidden;
    display: none;
}

.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.circle-page-1 {
    width: calc(var(--viewport-width) * (472.4/ 1080));
    height: calc(var(--viewport-width) * (779.3/ 1080));
    position: absolute;
    top: 25.37%;
    left: 29.79%;
    z-index: 10;
    border: 4px solid #a8c0d8;
    border-radius: 200px;
    clip-path: inset(0 80% 0 0);
    transition: clip-path 0.8s ease-in-out;

}

.circle-page-1.animate {
    clip-path: inset(0 0 0 0);
}


.overlay-introduction {
    width: calc(var(--viewport-width) * (668.6 / 1080));
    height: calc(var(--viewport-width) * (112.3 / 1080));
    position: absolute;
    top: 68.41%;
    left: 20.44%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Binggo-Wood', sans-serif;
    font-size: calc(var(--viewport-width)*(100/1080));
    white-space: nowrap;
    overflow: hidden;
    color: #607890;
    animation: none;
}

.overlay-jaxiry {
    width: calc(var(--viewport-width) * (476.5/ 1080));
    height: calc(var(--viewport-width) * (202.6 / 1080));
    position: absolute;
    top: 30.84%;
    left: 27.58%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Binggo-Wood', sans-serif;
    font-size: calc(var(--viewport-width)*(170/1080));
    white-space: nowrap;
    overflow: hidden;
    color: #607890;
    opacity: 0;
    transform: scale(0.5);
    filter: blur(10px);
    animation: none;
}

.overlay-union {
    width: calc(var(--viewport-width) * (106.4/ 1080));
    height: calc(var(--viewport-width) * (186.4 / 1080));
    position: absolute;
    top: 39.07%;
    left: 46.74%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Binggo-Wood', sans-serif;
    font-size: calc(var(--viewport-width)*(170/1080));
    white-space: nowrap;
    overflow: hidden;
    color: #607890;
    animation: none;
    transform: scale(0);
}

.overlay-kevin {
    width: calc(var(--viewport-width) * (398.3/ 1080));
    height: calc(var(--viewport-width) * (186.4 / 1080));
    position: absolute;
    top: 46.14%;
    left: 33.23%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Binggo-Wood', sans-serif;
    font-size: calc(var(--viewport-width)*(170/1080));
    white-space: nowrap;
    overflow: hidden;
    color: #607890;
    opacity: 0;
    transform: scale(0.5);
    filter: blur(10px);
    animation: none;
}

.overlay-play {
    width: calc(var(--viewport-width) * (119.7/ 1080));
    height: calc(var(--viewport-width) * (119.7 / 1080));
    position: absolute;
    top: 63.19%;
    left: 46.53%;
    z-index: 10;
    border: none;
    cursor: pointer;
}

.overlay-countdown {
    width: calc(var(--viewport-width) * (705 / 1080));
    height: calc(var(--viewport-width) * (176.3 / 1080));
    position: absolute;
    top: 33.69%;
    left: 18.69%;
    z-index: 0;
    opacity: 0;
    transition: opacity 3s ease;
    transform: scale(0.8);
    transform-origin: center center;
    display: flex;
    justify-content: center;
    align-items: center;

}

#countdown {
    display: flex;
    justify-content: space-evenly;
    font-family: 'Times New Roman';
    color: #607890;
    font-size: calc(var(--viewport-width)*(38/1080));;
}

.time-unit {
    text-align: center;
    font-size: 3em;
}

label {
    display: block;
    font-size: 0.3em;
}

.separator {
    font-size: 3em;
    color: #607890;
    margin: 0 5px;
}

.overlay-countdown.show {
    opacity: 1;
}

.overlay-itenerario {
    width: calc(var(--viewport-width) * (410/ 1080));
    height: calc(var(--viewport-width) * (113.9 / 1080));
    position: absolute;
    top: 49.41%;
    left: 31.28%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Binggo-Wood', sans-serif;
    font-size: calc(var(--viewport-width)*(100/1080));
    white-space: nowrap;
    overflow: visible;
    color: #74aede;
    opacity: 0;
    transform: scale(0.5);
    filter: blur(10px);
    animation: none;
}

.overlay-church {
    width: calc(var(--viewport-width) * (191.4/ 1080));
    height: calc(var(--viewport-width) * (206 / 1080));
    position: absolute;
    top: 66.14%;
    left: 42.63%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Binggo-Wood', sans-serif;
    font-size: calc(var(--viewport-width)*(100/1080));
    white-space: nowrap;
    overflow: visible;
    color: #74aede;
    opacity: 0;
    transform: scale(0.5);
    filter: blur(10px);
    animation: none;
}


.overlay-location-church {

    width: calc(var(--viewport-width) * (556.4 / 1080));
    height: calc(var(--viewport-width) * (114.6/ 1080));
    position: absolute;
    top: 87.48%;
    left: 27.26%;
    z-index: 10;
    overflow: hidden;
    cursor: pointer;

}

.overlay-location-reception {

    width: calc(var(--viewport-width) * (556.4 / 1080));
    height: calc(var(--viewport-width) * (114.6/ 1080));
    position: absolute;
    top: 36.21%;
    left: 25.16%;
    z-index: 10;
    overflow: hidden;
    cursor: pointer;

}

.overlay-glasses {
    width: calc(var(--viewport-width) * (149/ 1080));
    height: calc(var(--viewport-width) * (228 / 1080));
    position: absolute;
    top: 12.72%;
    left: 43.88%;
    z-index: 10;
    display: flex;
    font-family: 'Binggo-Wood', sans-serif;
    opacity: 0;
    transform: scale(0.5);
    filter: blur(10px);
    animation: none;
}

.overlay-dress {
    width: calc(var(--viewport-width) * (259/ 1080));
    height: calc(var(--viewport-width) * (269 / 1080));
    position: absolute;
    top: calc(1108.1*100/1920 * 1%);
    left: calc(309.5*100/1080 * 1%);
    z-index: 10;
    display: flex;
    overflow: visible;
    color: #74aede;
    opacity: 0;
    transform: scale(0.5);
    filter: blur(10px);
    animation: none;
}

.overlay-suit {
    width: calc(var(--viewport-width) * (187/ 1080));
    height: calc(var(--viewport-width) * (254 / 1080));
    position: absolute;
    top: calc(1122.1*100/1920 * 1%);
    left: calc(579.5*100/1080 * 1%);
    z-index: 10;
    display: flex;
    overflow: visible;
    color: #74aede;
    opacity: 0;
    transform: scale(0.5);
    filter: blur(10px);
    animation: none;
}

.overlay-gift {
    width: calc(var(--viewport-width) * (150/ 1080));
    height: calc(var(--viewport-width) * (157 / 1080));
    position: absolute;
    top: calc(334.4*100/1920 * 1%);
    left: calc(462.9*100/1080 * 1%);
    z-index: 10;
    display: flex;
    overflow: visible;
    color: #74aede;
    opacity: 0;
    transform: scale(0.5);
    filter: blur(10px);
    animation: none;
}

.overlay-camera {
    width: calc(var(--viewport-width) * (177/ 1080));
    height: calc(var(--viewport-width) * (135 / 1080));
    position: absolute;
    top: calc(1250.4*100/1920 * 1%);
    left: calc(463.9*100/1080 * 1%);
    z-index: 10;
    display: flex;
    overflow: visible;
    color: #74aede;
    opacity: 0;
    transform: scale(0.5);
    filter: blur(10px);
    animation: none;
}

.overlay-photos {

    width: calc(var(--viewport-width) * (642.2 / 1080));
    height: calc(var(--viewport-width) * (114.6/ 1080));
    position: absolute;
    top: calc(1631.6*100/1920 * 1%);
    left: calc(230.1*100/1080 * 1%);
    z-index: 10;
    overflow: hidden;
    cursor: pointer;

}

.overlay-contact-jax {

    width: calc(var(--viewport-width) * (474.8 / 1080));
    height: calc(var(--viewport-width) * (144.4/ 1080));
    position: absolute;
    top: calc(737.6*100/1920 * 1%);
    left: calc(306.4*100/1080 * 1%);
    z-index: 10;
    overflow: hidden;
    cursor: pointer;

}

.overlay-contact-kev {

    width: calc(var(--viewport-width) * (474.8 / 1080));
    height: calc(var(--viewport-width) * (144.4/ 1080));
    position: absolute;
    top: calc(918*100/1920 * 1%);
    left: calc(312.4*100/1080 * 1%);
    z-index: 10;
    overflow: hidden;
    cursor: pointer;

}

.overlay-date {
    width: calc(var(--viewport-width) * (408.7/ 1080));
    height: calc(var(--viewport-width) * (114.7 / 1080));
    position: absolute;
    top: calc(382*100/1920 * 1%);
    left: calc(338.7*100/1080 * 1%);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Binggo-Wood', sans-serif;
    font-size: calc(var(--viewport-width)*(80/1080));
    white-space: nowrap;
    overflow: visible;
    color: #74aede;
    opacity: 0;
    transform: scale(0.5);
    filter: blur(10px);
    animation: none;
}

.loading-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f1f1f1;
}

.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    -webkit-mask: conic-gradient(from 15deg, #0000, #000);
    animation: l26 1s infinite steps(12);
}

.loader,
.loader:before,
.loader:after {
    background:
        radial-gradient(closest-side at 50% 12.5%, #607890 96%, #0000) 50% 0/20% 80% repeat-y,
        radial-gradient(closest-side at 12.5% 50%, #607890 96%, #0000) 0 50%/80% 20% repeat-x;
}

.loader:before,
.loader:after {
    content: "";
    grid-area: 1/1;
    transform: rotate(30deg);
}

.loader:after {
    transform: rotate(60deg);
}



.loading-text {
    margin-top: 10px;
    font-size: xx-large;
    color: #333;
    font-family: 'Binggo-Wood', sans-serif;
    clip-path: inset(0 100% 0 0);
    animation: wipe 2s ease forwards infinite;
}

.continue-button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: large;
    color: #fff;
    background-color: #607890;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Binggo-Wood', sans-serif;
    transition: background-color 0.3s ease;
}

.continue-button:hover {
    background-color: #a8c0d8;
}

@keyframes l26 {
    100% {
        transform: rotate(1turn);
    }
}

@keyframes wipe {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes pop-bounce {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.2);
    }

    80% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);

    }
}

@keyframes fade-grow {
    0% {
        opacity: 0;
        transform: scale(0.5);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}