.gradio-container {
    background: url('https://github.com/tywei08/PySpark_Essentials/blob/master/IMG_8711_1.jpg?raw=true');
}
.centered-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -20px;
    max-width: 500px; /* Maximum width of the image */
    width: 100%;
}
.custom-input {
    background: linear-gradient(to right, rgba(232, 243, 214, 0.8), rgba(252, 249, 190, 0.8)); /* Or any color you'd like */
    opacity: 0.8
    color: #333; /* Text color */
    padding: 10px; /* Padding inside the input */
    border: 2px solid #ddd; /* Border color */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: all 0.3s ease; /* Smooth transition for interactions */
} 
.custom-input:focus {
    border-color: #F0E68C; /* Highlight color when the input is focused */
    box-shadow: 0 0 8px rgba(240, 230, 140, 0.8); /* Glow effect on focus */
}
.custom-checkbox-group1 {
    background: linear-gradient(to right, rgba(252, 249, 190, 0.8), rgba(255, 220, 169, 0.8));
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.custom-checkbox-group1 input[type="checkbox"] + label {
    margin-right: 10px; /* Space between checkboxes */
    cursor: pointer; /* Mouse pointer changes to indicate clickable area */
}
.custom-checkbox-group1 input[type="checkbox"]:checked + label {
    color: #FF6347; /* Text color when checkbox is checked */
    font-weight: bold;
}
.custom-checkbox-group2 {
    background: linear-gradient(to right, rgba(255, 220, 169, 0.8), rgba(250, 171, 120, 0.8));
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.custom-input1 {
    background: linear-gradient(to right, rgba(232, 243, 214, 0.8), rgba(255, 220, 169, 0.8));
    color: #333; /* Text color */
    padding: 10px; /* Padding inside the input */
    border: 20px solid #FFDA42; /* Initial border color, change as needed */
    border-color: #FFDA42
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: all 0.3s ease; /* Smooth transition for interactions */
}
.custom-input2 {
    background: linear-gradient(to right, rgba(255, 220, 169, 0.8), rgba(250, 171, 120, 0.8));
    color: #333; /* Text color */
    padding: 10px; /* Padding inside the input */
    border: 20px solid #FFDA42; /* Initial border color, change as needed */
    border-color: #FFDA42
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: all 0.3s ease; /* Smooth transition for interactions */
}

.custom-input2:focus {
    border-color: #FFDA42; /* Highlight color when the input is focused */
    box-shadow: 0 0 8px rgba(240, 230, 140, 0.8); /* Glow effect on focus */
}

.slider-sweetness {
    background: linear-gradient(to right, rgba(232, 243, 214, 0.8), rgba(252, 249, 190, 0.8));
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.slider-sweetness::-webkit-slider-runnable-track {
    background: rgba(200, 152, 152, 0.8);
}
.slider-sour {
    background: linear-gradient(to right, rgba(252, 249, 190, 0.8), rgba(251, 230, 180, 0.8));
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.slider-sour::-webkit-slider-runnable-track {
    background: rgba(200, 152, 152, 0.8);
}
.slider-savory {
    background: linear-gradient(to right,rgba(251, 230, 180, 0.8), rgba(255, 220, 169, 0.8));
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.slider-savory::-webkit-slider-runnable-track {
    background: rgba(200, 152, 152, 0.8);
}
.slider-bitter {
    background: linear-gradient(to right,rgba(255, 220, 169, 0.8), rgba(252, 200, 135, 0.8));
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.slider-bitter::-webkit-slider-runnable-track {
    background: rgba(200, 152, 152, 0.8);
}
.slider-soberness_level {
    background: linear-gradient(to right, rgba(252, 200, 135, 0.8), rgba(250, 171, 120, 0.8));
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.slider-soberness_level::-webkit-slider-runnable-track {
    background: rgba(200, 152, 152, 0.8);
}
.custom-checkbox-group2 input[type="checkbox"] + label {
    margin-right: 10px; /* Space between checkboxes */
    cursor: pointer; /* Mouse pointer changes to indicate clickable area */
}
.custom-checkbox-group2 input[type="checkbox"]:checked + label {
    color: #FF6347; /* Text color when checkbox is checked */
    font-weight: bold;
}
.generate-button {
    background: linear-gradient(to right, #F0E68C, #E0FFFF, #FF6347);
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    outline: none; /* Removes the outline on focus for some browsers */
}
.generate-button:hover, .generate-button:active {
    background: linear-gradient(to right, #E0FFFF, #FF6347, #F0E68C);
    /* Combines the glow from each color in the gradient */
    box-shadow: 
      0 0 15px rgba(240, 230, 140, 0.7), 
      0 0 25px rgba(240, 230, 140, 0.7),
      0 0 15px rgba(224, 255, 255, 0.7),
      0 0 25px rgba(224, 255, 255, 0.7),
      0 0 15px rgba(255, 99, 71, 0.7),
      0 0 25px rgba(255, 99, 71, 0.7);
    transform: translateY(2px); /* Optional: Slightly push the button down on active */
}
.generate-button:active {
    /* You may want to add an extra inset shadow to give a sense of depth when clicked */
    box-shadow: 
      0 0 15px rgba(240, 230, 140, 0.7), 
      0 0 25px rgba(240, 230, 140, 0.7),
      0 0 15px rgba(224, 255, 255, 0.7),
      0 0 25px rgba(224, 255, 255, 0.7),
      0 0 15px rgba(255, 99, 71, 0.7),
      0 0 25px rgba(255, 99, 71, 0.7),
      0 0 20px rgba(30, 255, 255, 0.5) inset;
}
.example-box {
  background: white !important;
  padding: 15px; 
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 
  overflow: hidden; 
}