@import url('var_colores.css');

.Adorno_header {
    width: 100vh;
    background-color: var(--deep_main); /* El color que deseas */
    -webkit-mask-image: url('./assets/Header.png'); /* URL de tu imagen */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-image: url('./assets/Header.png');
    mask-repeat: no-repeat;
    mask-size: cover;
}

.Adorno_footer {
    width: 100vh;
    background-color: var(--deep_main); /* El color que deseas */
    -webkit-mask-image: url('./assets/Footer.png'); /* URL de tu imagen */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-image: url('./assets/Footer.png');
    mask-repeat: no-repeat;
    mask-size: cover;
}

/* Contenedor principal */
#contador {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

/* Cada elemento del contador (días, horas, etc) */
.contador-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

/* Números grandes */
.contador-numero {
    font-family: 'Arial', sans-serif;
    font-size: 38px;
    font-weight: bold;
    color: var(--blanco);
    text-shadow: 0 0 15px var(--blanco);
}

/* Etiquetas pequeñas */
.contador-etiqueta {
    font-family: 'Edwardian Script ITC', cursive;
    font-size: 20px;
    color: var(--blanco);
    margin-top: -15px;
}

/* Mensaje del día del evento */
#contador span {
    font-family: 'Edwardian Script ITC', cursive;
    font-size: 50px;
    color: var(--blanco);
    text-shadow: 0 0 20px var(--blanco);
    display: block;
    text-align: center;
}

.mensaje-agradecimiento {
    font-family: 'Edwardian Script ITC', cursive;
    font-size: 2.5rem;
    color: var(--blanco);
    text-align: center;
    line-height: 1.6;
}

.mensaje-agradecimiento small {
    font-family: 'vivaldi';
    font-size: 2rem;
    color: var(--blanco);
    display: block;
    margin-top: 10px;
}

.mensaje-boda {
    font-family: 'Edwardian Script ITC', cursive;
    font-size: 2.5rem;
    color: var(--blanco);
    text-align: center;
    line-height: 1.6;
    animation: brillo 1.5s infinite alternate;
}

.mensaje-boda small {
    font-family: 'vivaldi';
    font-size: 2rem;
    color: var(--blanco);
    display: block;
    margin-top: 10px;
}

@keyframes brillo {
    from { opacity: 0.9; }
    to { opacity: 1; text-shadow: 0 0 20px var(--blanco); }
}

.fondo_main {
    position: relative;
    background-color: var(--Main); /* Fondo para visualizar mejor */
    overflow: hidden;
    box-shadow: 10px 20px 10px rgba(65, 64, 64, 0.596);
}

.luciernaga {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--blanco);
    border-radius: 50%;
    filter: blur(1px);
    box-shadow: 
        0 0 5px 2px rgba(255, 255, 255, 0.7),
        0 0 10px 5px rgba(255, 255, 255, 0.3);
    animation: volar 8s infinite ease-in-out;
    opacity: 0; /* Inicialmente invisibles (se activan con JS) */
}

.tamano_pantalla_completa {
    height: 100vh; /* Contenedor ocupa toda la ventana */
}

.contenedor_horizontal {
    display: flex; /* Activa Flexbox */
    justify-content: center; /* Centra horizontalmente */
    flex-direction: row; /* Organiza los elementos en una columna */
    align-items: center; /* Alinea el contenido verticalmente */
    padding: 20px; /* Espaciado interior */
    box-sizing: border-box; /* Ajuste para incluir padding y bordes en el tamaño */
}

.contenedor_vertical {
    display: flex; /* Activa Flexbox */
    flex-direction: column; /* Organiza los elementos en una columna */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Alinea el contenido verticalmente */
    box-sizing: border-box; /* Ajuste para incluir padding y bordes en el tamaño */
}

.contenedor_centralizado {
    display: flex; /* Activa Flexbox */
    flex-direction: column; /* Organiza los elementos en una columna */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    box-sizing: border-box;
}

.text_align_center {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    flex-direction: column;
}

.contenido {
    font-family: 'Edwardian Script ITC';
    font-size: 90px;
    color: var(--blanco);
    text-align: center;
}

.rotacion_izquierda {
    position: absolute;
    transform: rotate(-25deg);
    left: 6vw;
}

.rotacion_derecha{
    position: absolute;
    transform: rotate(25deg);
    right: 6vw;
}

.foto {
    width: 10vw;
    border: 10px solid var(--blanco); /* Borde blanco similar a una foto antigua */
    box-shadow: 10px 10px 20px rgba(65, 64, 64, 0.596); /* Sombra suave para simular que está encimada */
    padding: 5px; /* Espacio interno para simular un borde más grueso */
    background-color: var(--Dorado); /* Fondo blanco detrás de la imagen para resaltar */
    display: inline-block; /* Para que se ajuste a la imagen y no ocupe todo el ancho */
    border-radius: 4px; /* Bordes ligeramente redondeados */
}

/* Animación de luciernagas para el contenedor */
@keyframes volar {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: translate(20px, -15px) scale(0.9);
        opacity: 0.4;
    }
    50% {
        transform: translate(-10px, 10px) scale(1.1);
        opacity: 1;
    }
    75% {
        transform: translate(15px, -5px) scale(0.8);
        opacity: 0.6;
    }
}