@font-face {
    font-family: 'Xanh Mono';
    src: url(./XanhMono-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'TT Berlinerins script';
    src: url(./TTBerlinerinsScript.otf) format('opentype');
}

@font-face {
    font-family: 'Brittany';
    src: url(./BrittanySignature.ttf) format('truetype');
}

@font-face {
    font-family: 'Alegreya';
    src: url(./Alegreya-Regular.ttf) format('truetype');
}

@media (max-aspect-ratio: 8.5/11) {
  /* Styles for aspect ratios wider than or equal to this */
    .card{
        height: 100%;
        max-width: 90%;
        margin: auto;
        aspect-ratio: 8.5/11;
    }
}

@media (min-aspect-ratio: 8.5/11) {
  /* Styles for aspect ratios narrower than or equal to this */
    .card{
        height: 100vh;
        aspect-ratio: 8.5/11;
        margin: auto;
    }
}


body{
    padding: 0%;
    margin: 0%;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: azure;
}


.top-right-flower{
    position: fixed;
    top: -4vmin;
    right: 0;
    width: 60%;
    z-index: 2;
}

.top-left-flower{
    position: fixed;
    top: -5vmin;
    left: 0;
    width: 60%;
    z-index: 1;
    
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.bannerFlowers{
    position: relative;
    width: 100%;
    height: 15%;
}


.card{
    margin-bottom: 2%;
    padding: 0;
    /* fondo: imagen + sutil tono cálido para aspecto de papel */
    background-image: url('./background.avif');
    background-color: rgba(255,255,255,0.75);
    background-size: cover;
    background-blend-mode: lighten;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.06);
    /* sombras para efecto de carta/papel */
    box-shadow:
        0 20px 40px rgba(0,0,0,0.25),
        0 6px 5px rgba(0,0,0,0.12) inset;
    overflow: hidden;
    position: relative;
    transform: rotate(-0.4deg);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

/* hover: eleva la carta y suaviza la inclinación */
.card:hover{
    box-shadow:
        0 36px 80px rgba(0,0,0,0.32),
        0 8px 1px rgba(0,0,0,0.14) inset;
    transform: rotate(0deg) translateY(-8px);
}

/* opcional: textura de papel muy sutil (quitar si no se desea) */
.card::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(transparent 0 6px, rgba(255,255,255,0.02) 6px 7px);
    pointer-events: none;
    opacity: 0.6;
}

.novio-novia{
    margin-top: 6vmin;
}   


.nosCasamos{
    font-family: 'Alegreya', serif;
    font-size: 5vmin;
    color: black;
    margin-top: 1%;
}   

.names{
    font-family: 'Brittany', serif;
    font-size: 5vmin;
    color: black;
    margin-top: 1%;
}

.namesIMG{
    height: 50%;
    margin-top: 1%;
}

.texto{
    font-family: 'Alegreya', serif;
    font-size: 3vmin;
    color: black;
    margin-top: 3%;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
}

.fecha{
    font-family: 'TT Berlinerins script', serif;
    font-size: 4vmin;
    color: black;
    margin-top: 4%;
}

.anillos{
    margin-top: 1%;
    height: 8%;
    bottom: 0;
    position: fixed;
}

.bienvenida{
    font-family: 'Alegreya', serif;
    font-size: 3vmin;
    color: black;
    margin-top: 4%;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
}

.faltan{
    margin-top: 4vmin;
}

.reloj{
    text-align: center;
    margin: auto;
    font-family: 'Xanh Mono', serif;
    color: cadetblue;
    margin-top: 1%;
    width: 60%;
    height: 15vmin;
    font-size: 4vmin;
    font-weight: bolder;
    padding: 0;
}

.dias, .horas, .minutos, .segundos{
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 23%;
}

.alts{
    font-size: 1.8vmin;
    height: 1vmin;
}

.doubledot{
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 1vmin;
}


h3{
    font-family: 'Brittany', serif;
    color: black;
    font-size: 4vmin;
    margin: 0;
    margin-top: 3vmin;
}

.ButtonD{
    position: relative;
    width: 90%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-size: 2vmin;
}

.confirmar{
    height: 9vmin;
    width: 35vmin;
    font-family: 'Alegreya', serif;
    font-size: 2.3vmin;
    color: black;
    background-color: white;
    border: solid 2px black;
    border-radius: 30px 30px 30px 30px;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 5px 5px darkolivegreen;
    margin: 0 auto;
}

.Scuare{
    height: 6vmin;
    position: fixed;
    z-index: 1;
}

.Tick{
    height: 6vmin;
    position: fixed;
    z-index: 2;
    opacity: 0;
}

.ButtonD:hover .Tick{
    opacity: 1;
    transition: opacity 200ms ease-in-out;
}

.invitados{
    font-family: 'Alegreya', serif;
    font-size: 3vmin;
    color: black;
    margin-top: 3%;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
}

.marco {
  position: relative;
  display: inline-block;
  width: 45vmin;  /* ajusta según sea necesario */
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

.marco img {
  display: block;
}

/* Esquineros con pseudo-elementos */
.marco::before,
.marco::after {
  content: "";
  position: absolute;
  width: 7vmin;   /* ajusta tamaño */
  height: 7vmin;
  background: url("esquinero.png") no-repeat center/contain;
  z-index: 2; /* asegura que quede encima de la imagen */
}

/* Superior izquierda */
.marco::before {
  top: -0.5vmin;
  left: -0.5vmin;
}

/* Inferior derecha */
.marco::after {
  bottom: -0.5vmin;
  right: -0.5vmin;
  transform: rotate(180deg);
}

/* Esquineros con pseudo-elementos */
.marco2::before,
.marco2::after {
  content: "";
  position: absolute;
  width: 7vmin;   /* ajusta tamaño */
  height: 7vmin;
  background: url("Esquinero2.png") no-repeat center/contain;
  z-index: 2; /* asegura que quede encima de la imagen */
}

.marco2 {
  position: relative;
  display: inline-block;
  width: 15vmin;  /* ajusta según sea necesario */
  height: auto;
  margin: 0 auto;
}

/* Superior izquierda */
.marco2::before {
  top: -0.5vmin;
  left: -0.5vmin;
}

/* Inferior derecha */
.marco2::after {
  bottom: -0.5vmin;
  right: -0.5vmin;
  transform: rotate(180deg);
}

.marco2 img {
  display: block;
}


/* Esquineros con pseudo-elementos */
.marco3::before,
.marco3::after {
  content: "";
  position: absolute;
  width: 5vmin;   /* ajusta tamaño */
  height: 5vmin;
  background: url("Esquinero3.png") no-repeat center/contain;
  z-index: 2; /* asegura que quede encima de la imagen */
}

.marco3 {
  position: relative;
  display: inline-block;
  width: 60vmin;  /* ajusta según sea necesario */
  height: auto;
  margin: 3vmin auto;
  margin-left: 5vmin;
  transform: rotate(-2deg);
}

/* Superior izquierda */
.marco3::before {
  top: -0.5vmin;
  left: -0.5vmin;
}

/* Inferior derecha */
.marco3::after {
  bottom: -0.5vmin;
  right: -0.5vmin;
  transform: rotate(180deg);
}

.marco3 img {
  display: block;
}

.bot2{
    height: 60vmin;
    margin-top: 0;
}

.marco4 {
  position: absolute;
  display: inline-block;
  width: fit-content;
  height: fit-content;
  margin-top: 2vmin;
  margin-left: 2vmin;
  left: 2vmin;
  transform: rotate(-3deg);
}

/* Esquineros con pseudo-elementos */
.marco4::before,
.marco4::after {
  content: "";
  position: absolute;
  width: 5vmin;   /* ajusta tamaño */
  height: 5vmin;
  background: url("Esquinero4.png") no-repeat center/contain;
  z-index: 2; /* asegura que quede encima de la imagen */
}

/* Superior izquierda */
.marco4::before {
  top: -0.5vmin;
  right: -0.5vmin;
  transform: rotate(90deg);
}

/* Inferior derecha */
.marco4::after {
  bottom: -0.5vmin;
  left: -0.5vmin;
  transform: rotate(270deg);
}

.marco4 img {
  display: block;
  height: 35vmin;
}

.marco5 {
  position: absolute;
  display: inline-block;
  width: fit-content;
  height: fit-content;
  right: 10vmin;
  margin-top: 3vmin ;
  margin-left: 2vmin;
  transform: rotate(-5deg);
}

/* Esquineros con pseudo-elementos */
.marco5::before,
.marco5::after {
  content: "";
  position: absolute;
  width: 5vmin;   /* ajusta tamaño */
  height: 5vmin;
  background: url("Esquinero4.png") no-repeat center/contain;
  z-index: 2; /* asegura que quede encima de la imagen */
}

/* Superior izquierda */
.marco5::before {
  top: -0.5vmin;
  right: -0.5vmin;
  transform: rotate(90deg);
}

/* Inferior derecha */
.marco5::after {
  bottom: -0.5vmin;
  left: -0.5vmin;
  transform: rotate(270deg);
}

.marco5 img {
  display: block;
  height: 35vmin;
}

.STFoto1{
    width: 100%;
    height: 100%;
    object-fit: cover;
    bottom: 0;
}

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

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

.STFoto4{
    height: 100%;
    width: auto;
    object-fit: cover;
}


.STFoto5{
    height: 15vmin;
    width: auto;
    object-fit: cover;
}


.encantaria{
    font-family: 'Alegreya', serif;
    font-size: 3vmin;
    color: darkolivegreen;
    margin-top: 1%;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
}


.historia{
    font-family: 'Brittany', serif;
    font-size: 4vmin;
    color: darkolivegreen;
    margin-top: 5vmin;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.donde{
    font-family: 'Alegreya', serif;
    font-size: 3vmin;
    color: black;
    margin-top: 2%;
    margin-left: 10%;
    margin-right: 10%;
    text-align: center;
}

.lugar{
    margin: 1vmin auto;
    width: 90%;
    text-align: center;
    font-family: 'Alegreya', serif;
    font-size: 3vmin;
    color: black;
}

.lugar tr,
.lugar tr td{
    margin-bottom: 1vmin;
}

.lugar th{
    width: 50%;
}

.borderLeft{
    border-left: 1vmin solid #BCAD74;
}

.borderRight{
    border-right: 1vmin solid #BCAD74;
}

.txt{
    display: inline-block;
    width: 80%;
    margin: 0;
    padding: 0;
}

.square{
    display: inline-block;
    width: 18%;
    top: 0;
    left: 0;
}

.Ilugar{
    width:50%;
    height: auto;
}

.Ilugar img{
    width:10vmin;
    height: auto;
}

.TlugarMap a{
    text-decoration: none;
    color: black;
}

.TlugarMap a img{
    width: 5vmin;
}

.padres{
    width: 90%;
    margin: 5vmin auto;
}

.padres tr td{
    padding-bottom: 1vmin;
}

.Tpadres{
    font-family: 'Alegreya', serif;
    font-size: 2.5vmin;
    color: black;
}


.Tpadres img{
    height: 2.5vmin;
}

.padrinos{
    width: 90%;
    margin: auto;
}

.padrinos tr{
    height: 2.5vmin;
    padding-bottom: 0;
}

.padrinos th{
    height: 2.5vmin;
    padding-top: 2vmin;
}

.padrinos td{
    height: 2.5vmin;
    padding-bottom: 0;
}

.TpadrinosV{
    width: 50%;
    font-family: 'Alegreya';
    font-size: 2.5vmin;
    color: black;
}

.TlugarHora{
    font-family: 'Brittany';
    font-size: 2.5vmin;
    color: black;
}

.Tlugar{
    font-family: 'Alegreya';
    font-size: 2.5vmin;
    color: darkolivegreen;
}