html * {
  transition: all 0.0s;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: rgba(255, 255, 255, 0.87);
  user-select: none;
}
.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}


#svg-container {
  position: relative;
  width: 400px;
  height: 400px;
}

.overlay {
  position: absolute;
  top: 10px; /* Adjust as needed */
  left: 10px; /* Adjust as needed */
  z-index: 10;
}

.modern-input {
  /* Basic styling */
  background-color: #271c3b; /* A shade of purple */
  color: white; /* Text color */
  padding: 10px 15px; /* Padding inside the box */
  border: none; /* Remove the default border */
  border-radius: 5px; /* Slightly rounded edges */
  font-family: Arial, sans-serif; /* Modern font */
  font-size: 16px; /* Readable text size */
  cursor: pointer; /* Change cursor to pointer */
  transition: background-color 0.3s ease; /* Smooth transition for hover */
}

.modern-input:hover {
  background-color: rgb(77, 67, 96); /* Darker shade of purple on hover */
}

.modern-input:focus {
  outline: none; /* Remove the focus outline */
  box-shadow: 0 0 0 2px #B3AED0; /* Add a purple glow for focus */
}

select.modern-input {
  /* Styling for the dropdown arrow */
  -webkit-appearance: none; /* Remove default style for Chrome, Safari */
  -moz-appearance: none; /* Remove default style for Firefox */
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23ffffff" d="M7,10L12,15L17,10H7Z" /></svg>'); /* Custom dropdown arrow */
  background-repeat: no-repeat;
  background-position: right 15px center; /* Position the arrow to the right */
  background-size: 12px; /* Size of the arrow */
}

button.modern-input {
  border: none; /* Ensure no border for buttons */
  display: inline-block; /* Allows for better control of width/height */
  text-align: center; /* Center text inside the button */
}

#videoContainer {
  position: relative;
  top: calc((100vh - 100%) / 2); /* Center the container vertically */
  width: 178vh;
  height: 100%;
  left: calc((100vw - 178vh) / 2); /* Center the container horizontally */
  z-index: -1; /* Places the video behind the SVG canvas */
}