/* /home/andre/Development/Form/style.css */


body {
  font-family: 'Times New Roman', Times, serif; /* Classic, formal font */
  background-color: #f4f0e8; /* Off-white, aged paper background */
  color: #333; /* Dark gray text for readability */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d4cabb' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); /* Subtle paper texture */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


body {
  font-family: 'Times New Roman', Times, serif; /* Classic, formal font */
  color: #333; /* Dark gray text for readability */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  font-size: 18px; /* Increased base font size */
   /* Add this to set the background of the body */
  background-image: url("./img/background.jpg"); /* Replace with your image path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.form-container {
  /* Remove the transparency */
  background-color: transparent; /* Make the form background transparent */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Soft shadow */
  width: 400px;
  max-width: 90%;
  border: 2px solid #c8b08f; /* thin brown border */

  /* Add the image background to the form-container */
  background-image: url("./img/musica.png"); /* Path to your form's background image */
  background-size: cover; /* Cover the entire form container */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent image repetition */
  position: relative;/*set the position to relative*/
}

/*add the pseudo element*/
.form-container::before{
  content: ""; /* Needed to show the before*/
  position: absolute;/*set the position to absolute*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.85); /* Add a translucent white background */
  z-index: 1; /* Set the z index to make it behind the content */
  border-radius: inherit; /*inherit the border radius from the .form-container */
}

/* set the position of the content inside the form-container to relative*/
.form-container > * {
    position: relative;
    z-index: 2;
}

h2 {
  font-family: 'Cormorant Garamond', serif; /* Decorative header font */
  font-size: 2.8em; /* Increased header size */
  color: #554939; /* Dark brown for headers */
  text-align: center;
  margin-bottom: 10px; /* Reduced bottom margin */
  text-shadow: 1px 1px 0 #eee; /* A subtle text shadow */
}
h3{
  font-family: 'Cormorant Garamond', serif; /* Decorative header font */
  font-size: 1.8em; /* Increased header size */
  color: #554939; /* Dark brown for headers */
  text-align: center;
  margin-bottom: 25px; /* Reduced bottom margin */
  text-shadow: 1px 1px 0 #eee; /* A subtle text shadow */
}

.form-group {
  margin-bottom: 25px; /* Increased margin */
}

label {
  display: block;
  font-size: 1.2em; /* Increased label size */
  font-weight: bold;
  margin-bottom: 8px; /* Increased margin */
  color: #554939;
}

input[type="text"],
input[type="time"],
select {
  width: 100%;
  padding: 12px; /* Increased padding */
  border: 1px solid #c8b08f; /* Brown border for inputs */
  border-radius: 5px;
  font-size: 1.1em; /* Increased input size */
  font-family: inherit; /* Inherit font from body */
  box-sizing: border-box; /* Include padding and border in element's total width and height */
}

input[type="text"]:focus,
input[type="time"]:focus,
select:focus {
  outline: none;
  border-color: #8b7359; /* Darker brown on focus */
  box-shadow: 0 0 5px rgba(139, 115, 89, 0.5); /* Subtle glow on focus */
}

select {
  appearance: none; /* Remove default arrow */
  -webkit-appearance: none; /* For Safari */
  -moz-appearance: none; /* For Firefox */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23554939' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

button[type="submit"] {
  background-color: #8b7359; /* Dark brown button */
  color: #fff;
  padding: 14px 20px; /* Increased padding */
  border: none;
  border-radius: 5px;
  font-size: 1.2em; /* Increased button size */
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-family: inherit;
  width: 100%;
}

button[type="submit"]:hover {
  background-color: #6f5e4a; /* Darker brown on hover */
}

button[type="submit"]:active {
  background-color: #554939;
}
/* /home/andre/Development/Form/style.css */

/* ... (previous CSS code) ... */

/* style the radio buttons */
.radio-group {
  display: flex;
  gap: 15px; /* Increased gap */
  align-items: center;
}

.radio-group input[type="radio"] {
  appearance: none; /* Remove default styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px; /* Increased size */
  height: 20px; /* Increased size */
  border: 2px solid #c8b08f;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
}

.radio-group input[type="radio"]:checked {
  border-color: #8b7359; /* Dark brown when checked */
}

.radio-group input[type="radio"]:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px; /* Increased size */
  height: 10px; /* Increased size */
  border-radius: 50%;
  background-color: #8b7359; /* Dark brown dot when checked */
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
}

.radio-group input[type="radio"]:checked:before {
  transform: translate(-50%, -50%) scale(1);
}

.radio-group label {
  font-weight: normal; /* Normal font weight for radio labels */
  margin-bottom: 0; /* Remove default bottom margin */
  font-size: 1.1em; /* Increased size */
}