body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Column layout to stack elements vertically */
  justify-content: center;
  align-items: center;
  background-color: black;
  /* Dark background */
  font-family: Arial, sans-serif;
  color: #ffffff;
  /* Light text color */
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
  overflow: hidden;

}
@media only screen and (max-device-width: 700px) {
  main {
    
  }
  .call-interface {
      padding: 20px 50px 20px 50px !important;
    }
}

.call-interface {
  position: relative;
  width: fit-content;
  padding: 100px 64px 100px 64px;
  margin: 15px;
  /* Adjust the width as needed */
  height: fit-content;
  /* Adjust the height as needed */
  border-radius: 40px;
  border: 2px solid rgb(42, 42, 54);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  overflow: hidden;
  /* Ensure content doesn't spill over */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(18, 18, 18, 0.8);
  /* Add background color for content contrast */
}

/* Background Image with Blur */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(./media/flowing.gif);
  background-size: cover;
  background-position: center;
  filter: blur(29px) brightness(0.2) contrast(0.9);
  /* Apply blur effect */
  z-index: 0;
  /* Behind the content */
}

svg {
  z-index: 5;

}

.contact-info,
.hang-up-button {
  position: relative;
  z-index: 1;
  /* Ensure content is above the background image */
  text-align: center;
}

.contact-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0px;
}

.contact-name {
  font-size: 18px;
  /* Increased size for better readability */
  color: lightslategray;
  margin-top: 10px;
  /* Space above the contact name */
  transition: color 0.3s;
}

.hang-up-button {
  background-color: #081631;
  border: none;
  border-radius: 50%;
  padding: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.hang-up-button:hover {
  background-color: #d73c3c;
}

.hang-up-icon {
  width: 30px;
  height: 30px;
}

@keyframes throb {

  0%,
  100% {
    border-width: 1px;
  }

  50% {
    border-width: 4px;
  }
}


@keyframes throblight {

  0%,20%,80%,
  100% {
    border-color: #494f5c98;
  }

  50% {
    border-color: #6292cc70;
  }
}

.throblight {
  animation: throblight 5s infinite ease-out;
  border-style: solid;
}

.throbyel {
  animation: throb 3s infinite ease-in-out;
  border-style: solid;
  border-color: darkkhaki;
}

.throbblue {
  animation: thob 3s infinite ease-in-out;
  border-style: solid;
  border-color: lightslategray;
}

.throbred {
  animation: throb 3s infinite ease-in-out;
  border-style: solid;
  border-color: lightcoral;
}

/* .usrStyle {
  border: 1px solid lightsteelblue !important;
} */



.visblue {
  background-color: lightslategray;
}

.visred {
  background-color: darkkhaki;
}


main {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

main>div {

  /* no idea why chatgpt added this: */

  /* display: inline-block;
  width: 3px;
  height: 100px;
  margin: 0 7px;
  background: currentColor;
  transform: scaleY(0.5);
  opacity: 0.25; */

}

main.error {
  color: #f7451d;
  min-width: 20em;
  max-width: 30em;
  margin: 0 auto;
  white-space: pre-line;
}

button {
  margin: 5px;
  outline: 0px none;
  padding: 10px;
  background-color: #586d9749;
  color: #f2f6fb99;
  border: 2px solid #494f5c98;
  border-radius: 10px;
  cursor: pointer; 
}/* Styling for the form group */
.form-group {
  position: relative;
  width: 150px;
  text-align: center;
  display: inline-block;
}

/* Label styling with relative positioning */
.form-label {
  position: relative;
  top: -1px; /* Adjust this value based on your design */
  font-size: 13px;
  color: #b6d4ff99;
}

/* Select styling */
.form-select {
  color: #b6d4ff99;
  width: 150px;
  height: 40px;
  text-align: center;
  border-radius: 5px;

  text-align-last: center;
  background-color: #586d9749;
  border: 2px solid #494f5c98;
  position: relative;
  z-index: 1;
}

/* Button styling */
.start-button {
  color: #b6d4ff99;
  cursor: pointer;
  background-color: #586d9749;
  border: 2px solid #494f5c98;
  border-radius: 15px;
  padding: 10px 20px;
  margin: 10px 0;
}

.subbub {
  font-size:11px;
  color:#f2f6fb99
}

.controlBtns {
  text-align: center;
  visibility: hidden;
}