@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arizonia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Carattere&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Radley:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');

body {
  background-color: #f2f4ed;
}

.text-wallet {
  color: #323232;
}

.text-title {
  color: #5A5A5A;
}

.bg-countdown {
  background-color: #e2e2e2c9;
}

.bg-form {
  background-color: #404342
}

.bg-name-placeholder {
  background-color: rgba(255, 255, 255, 0.4);
}

.bg-button {
  background-color: rgb(90, 90, 90);
}
.bg-button-loc {
  background-color: #32323275;
}

.bg-white-60 {
  background-color: rgba(255, 255, 255, 0.63);
}

.text-2xll {
  font-size: 30px;
}

.text-xss {
  font-size: 14px;
}

.text-xxss {
  font-size: 12px;
}

.form-shadow {
  box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
}

.border-overlay {
  border-color: #6363637D;
}

@font-face {
  font-family: 'Shelley';
  src: url('./assets/font/shelley.ttf') format('ttf');
}

.open-sans {
  font-family: 'Open Sans', sans-serif;
}

.roboto {
  font-family: 'Roboto', sans-serif;
}

.roboto-slab {
  font-family: 'Roboto Slab', serif;
}

.arizonia {
  font-family: 'Arizonia', Sans-serif;
}

.crimson-pro {
  font-family: 'Crimson Pro', Sans-serif;
}

.carattere {
  font-family: 'Carattere', Sans-serif;
}

.cardo-bold {
  font-family: 'Cardo', Sans-serif;
  font-weight: 700;
  font-style: normal;
}

.cardo {
  font-family: 'Cardo', Sans-serif;
}

.poppins {
  font-family: 'Poppins', sans-serif;
}

.playfair-display {
  font-family: 'Playfair Display', sans-serif;
}

.cormorant-garamond {
  font-family: 'Cormorant Garamond', Sans-serif;
}

.cormorant {
  font-family: 'Cormorant', Sans-serif;
}

.radley {
  font-family: 'Radley', Sans-serif;
}

.shelley {
  font-family: 'Shelley';
}

.alata {
  font-family: 'Alata', Sans-serif;
}

.albert-sans {
  font-family: 'Albert Sans', Sans-serif;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition:
    transform 1s ease-in-out,
    opacity 1s ease-in-out;
}
.slide-up-enter,
.slide-up-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

.fade-in-enter-active,
.fade-in-leave-active {
  transition:
    transform 1s ease-in-out,
    opacity 1s ease-in-out;
}

.fade-in-enter,
.fade-in-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.map-container iframe {
  width: 100%;
  height: 100%;
}
.map-container {
  width: 100%;
  height: 0;
  border-radius: 2px;
  padding-bottom: 56.25%;
  position: relative;
}
.map-container iframe {
  position: absolute;
  top: 0;
  border-radius: 2px;
  left: 0;
}

@media only screen and (max-width: 768px) {
  .w-mob {
    max-width: 500px;
    overflow: hidden;
  }

  #img-mempelai {
    box-shadow: 3px 7px 10px 0px rgba(0, 0, 0, 0.5);
    transform: rotate(-5deg);
    border-color: rgb(90,90,90);
    border-width: 5px;
    max-width: 75%;
  }
}

/* iPad styles */
@media only screen and (min-width: 401px) and (max-width: 1024px) {
  .w-mob {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
}

/* Laptop styles */
@media only screen and (min-width: 1025px) {
  .w-mob {
    width: 644px;
    margin: 0 auto;
    overflow: hidden;
  }
}

#img-mempelai {
  box-shadow: 3px 7px 10px 0px rgba(0, 0, 0, 0.5);
  transform: rotate(4deg);
  border-color: rgb(90,90,90);
  border-width: 5px;
  max-width: 75%;
}