html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Center vertically */
  background-color: #f8f8f8; /* Soft background color */
  font-family: "Helvetica Neue", sans-serif; /* Elegant font */
}

/* Adjust the width and height as needed */
.container-top {
  width: 100%;
  height: 100%; /* 50% of the viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 600px) {
  .container-top {
    width: 50%;
    height: 50%;
  }
}
.container-top video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-icon {
  width: 25px;
  border: 2px solid transparent;
  border-radius: 5px;
}

.icon-title {
  color: black;
  font-size: 14px;
}

.content {
  color: #d2b685;
  text-align: center;
}

.groom {
  font-family: "kissita", sans-serif;
}

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: whitesmoke;
  color: white;
  width: 100%; /* 90% of the viewport width */
  height: 100%;
  /* 50% of the viewport height */
  /*padding: 20px 0;*/
}
.modal-dialog {
  position: fixed;
  top: auto;
  right: auto;
  left: auto;
  bottom: 0;
  width: 96%; /* Adjust this value as needed */
  display: flex;
  justify-content: center;
}
.modal-content {
  background-color: #fff; /* White modal background */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  background-image: url("../img/flower.png");
  background-size: cover;
}
.modal-body h5{
  font-family: "Montserrat", sans-serif;
}
.modal-title {
  color: black; /* Soft pink title color */
  font-family: "Dancing Script", cursive; /* Cursive font for title */
}
form {
  padding: 20px; /* Add space inside the form */
}
input,
textarea {
  border: 1px solid #ccc; /* Light border for form inputs */
  border-radius: 5px; /* Rounded corners */
  padding: 8px; /* Padding for inputs */
}
button {
  background-color: #e47b9c; /* Pink button background */
  color: #fff; /* Button text color */
  border: none; /* Remove button border */
  border-radius: 5px; /* Rounded button corners */
  padding: 10px 20px; /* Button padding */
  cursor: pointer;
}
button:hover {
  background-color: #d8578f; /* Darker pink on hover */
}

@media (min-width: 600px) {
  footer {
    width: 50%;
    height: 50%;
  }
}
audio:hover,
audio:focus,
audio:active {
  -webkit-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.4);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  transform: scale(1.05);
}
audio {
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -moz-box-shadow: 2px 2px 4px 0px #006773;
  -webkit-box-shadow: 2px 2px 4px 0px #006773;
  box-shadow: 2px 2px 4px 0px lightslategray;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px 7px;
  border-radius: 7px 7px 7px 7px;
}
#guestBookContent {
  background-color: #fff; /* White background for guest book content */
  border: 1px solid #eee; /* Light border */
  border-radius: 5px; /* Rounded corners */
  padding: 10px; /* Add space inside content div */
  max-height: 300px; /* Set maximum height */
  overflow-y: auto; /* Enable vertical scrolling */
}

#guestBookContent::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
}

#guestBookContent::-webkit-scrollbar-thumb {
  background-color: lightgray; /* Set the color of the scrollbar thumb */
  border-radius: 4px; /* Add border radius to the thumb */
}