:root {
  --color: #f4843e;
}

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
  overflow-x: hidden;
  width: 100vw;
}

.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}
input[type="text"],
input[type="date"],
input[type="time"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}


button {
  display: block;
  width: 100%;
  padding: 10px 20px;
  background-color: var(--color);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 10px;
}

button:hover {
  background-color: #ffffff;
}

.invitation {
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header h1 {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
}

.header p {
  font-size: 16px;
  color: #666;
  text-align: center;
}

.userData h2 {
  font-size: 20px;
}

.userData p {
  font-size: 16px;
  color: #666;
  margin-bottom: 5px;
  line-height: 1.6;
}

.footers{
  text-align: center;
  margin-top: 20px;
}

body {
  background-color: #fdf0e8;
  margin: 0;
  padding: 0;
  width: 100vw;
  overflow-x: hidden;
}
.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

.wrapper {
  min-height: 100vh; /* Para asegurarse de que el footer esté siempre en la parte inferior de la ventana de visualización */
  display: flex;
  flex-direction: column;
}


.container h2 {
  text-align: center;
  font-size: 35px;
  color: #ff7300;
  font-weight: bolder;
  height: 0px;
}

#userForm{
  padding-top: 25px;
  font-family: "Madimi One", sans-serif; 
  
}
#userForm p{
  font-family: "Madimi One", sans-serif; 
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  align-items: center;
  justify-content: center;

}


.form-group {
  margin-bottom: 15px;
  /* max-width: 300px; */
  font-weight: bolder;
  font-size: 18px;
  width: 90vw;
  
}
/* Estilo para el selector de fondos */
#background {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #f8f8f8;

}

/* Estilo para las opciones del selector */
#background option {
    padding: 10px;
    background-color: #fff;
}
label {
  display: block;
  margin-bottom: 5px;
}

h3{
  text-align: center;
  font-size: 50px;
  text-transform: capitalize;
  padding: 0;
  font-family: "Madimi One", sans-serif; 
  margin: 0;
}
h4{
  font-size: 40px;
  color: var(--color);
  font-family: "Permanent Marker", cursive;
  margin: 0;
  padding-top: 52px;
}
input[type="text"],
input[type="date"],
input[type="time"] {
  width: calc(100% - 12px);
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  display: block;
  width: 100%;
  padding: 10px 20px;
  background-color: var(--color);
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 17px;
  font-weight: bold;
}

button:hover {
  background-color: #f09724;
}

.invitation-container {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.invitation {
  max-width: 400px;
  margin-top: 50px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;

}

.header h1 {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
}

.header p {
  font-size: 16px;
  color: #666;
  text-align: center;
}
.countdown h2{
  color: var(--color);
  font-weight: bold;
  font-family: "Permanent Marker", cursive;
  font-size: 35px ;
}
.countdown p{
  font-family: "Madimi One", sans-serif;
  font-size: 20px;

}
.userData h2 {
  font-size: 20px;
  
}
h5{
  font-size: 25px;
  height: 10px;
  padding-bottom: 8px;
  font-family: "Madimi One", sans-serif;

}
h6{
  font-size: 15px;
  height: 10px;
  font-family: "Madimi One", sans-serif;
}

.userData p {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px; 
}




.footer{
  background-color: var(--color);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* padding: 20px; */
  color: white;
  text-align: center;
  width: 100vw;
  align-items: center;
  font-family: "Anton", sans-serif;
  bottom: 0;


}
.footer__info{
      display: flex;
      flex-direction: column;

}

  .footer__redes{
      font-size: 30px;
      display: flex;
      align-items: center;
  }
   .footer a{
          text-decoration: none;
          padding: 10px;
          color: #000000;
      }
    .footer i{
          transition: transform 0.6s;
               &:hover{
                  transform: rotate(360deg);
              }
          color: #272727;
      }

      .footer {
        background-color:var(--color);
        color: #fff;
        text-align: center;
        padding: 20px 0;
        bottom: 0;
        width: 100%;
        z-index: 999;
      }
      
      .footer a {
        color: #fff;
        text-decoration: none;
        margin: 0 10px;
        font-size: 25px;
      }
      
      .footer a:hover {
        text-decoration: underline;
      }
      .image-container {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 10vh;
        align-items: center;
      }
      .maps{
        text-decoration: none;
      }


      /* invitacion imagen */
      
      .invitation-image {
        display: block;
        margin: 0 auto;
        width: 200px; /* Ajusta el tamaño según sea necesario */
        height: 200px;
        border-radius: 50%; /* Hace que la imagen sea redonda */
        overflow:auto; /* Oculta cualquier parte de la imagen que se salga del radio */
        position: absolute;
        top: 45dvh;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

;
      }
      
      .invitation-image img {
        width: 100%; /* Ajusta el tamaño de la imagen para que se ajuste al círculo */
        height: auto;
      }
      .relleno {
        height: 60dvh;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 7px 7px 9px -5px rgba(94,94,94,0.67);
    }

   
      .invitation-image2 {
  
        display: block;
        margin: 0 auto;
        width: 100px; /* Ajusta el tamaño según sea necesario */
        border-radius: 50%; /* Hace que la imagen sea redonda */
        overflow:auto; /* Oculta cualquier parte de la imagen que se salga del radio */
        height: 100px;
      }

      a{
        text-decoration: none;
      }

/* CARRUSEL */

.container-carousel {
  position: relative;
  max-width: 100vw;
  height: 300px;
  /* box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.66); */
  border-radius: 15px;
  overflow: hidden;
  background-color: transparent;


}

.carruseles {
  
  width: 300%;    /* cantidad de images x 100% */
  height: 100%;
  display: flex;

}

.slider-section {
  width: calc(100% / 3);  /* se divide por la cantidad de imagenes */
  height: 100%;
}

.slider-section img {
  width: 100%;
  height: 100%;
  object-fit:contain;
  border-radius: 15px;
}

.btn-left,
.btn-right {
  display: flex;
  position: absolute;
  top: 50%;
  font-size: 35px;
  background-color: transparent;
  border-radius: 50%;
  padding: 5px;
  font-weight: 600;
  cursor: pointer;
  color: #08080881;
  transform: translate(0,-50%);
  transition: .5s ease;
  user-select: none;
}

.btn-left:hover,
.btn-right:hover {
  background-color: #333333d4;
  color: #fff;
}

.btn-left {
  left: 10px;
}

.btn-right {
  right: 10px;
}

/* CARRUSEL */


#shareButton {
  background-color: #73cc73e0;
}      

/* animacion latido */

.heartbeat {
	
  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.scale-in-center {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes scale-in-center {
 0% {
   -webkit-transform: scale(0);
           transform: scale(0);
   opacity: 1;
 }
 100% {
   -webkit-transform: scale(1);
           transform: scale(1);
   opacity: 1;
 }
}
@keyframes scale-in-center {
 0% {
   -webkit-transform: scale(0);
           transform: scale(0);
   opacity: 1;
 }
 100% {
   -webkit-transform: scale(1);
           transform: scale(1);
   opacity: 1;
 }
}

.logo{
  width: 120px;
}

#confettiButton{
  background-color: transparent;
  text-decoration: none;
  font-size: 30px;

}