css/style.css

/* .gradio-container {
    background: url('https://storage.googleapis.com/wpassets.junyiacademy.org/1/2023/11/background-scaled.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
} */

#player_avatar_container {
    place-items: center !important;
}

#player_avatar {
    background-color: transparent !important;
    width: 20vw; 
    height: 20vw;
    border-radius: 50% !important;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    border-color: #fff !important;
}

.achievements{
    margin: 0 auto;
    width: 80%;
    height: 200px !important;
    overflow: auto !important;

}

.achievements  [data-testid="block-label"] {
    display: none;
}

[data-testid="number-input"] {
    display: None !important;
}

#adventure_slider {
    overflow: auto !important;
    height: 200px;
}

#adventure_slider div{
    color: #232323 !important;
    font-size: large;
}

.textfield > * { 
    border-radius: 8px !important;
    display: block; 
    padding-left: .75rem !important;
    margin: 0.3rem auto;
    margin-left: 0px !important;
  }

#adventure_container {
    height: 200px;
}

#player_avatar_description h1{
    font-size: 2.5rem;
    text-align: center;
}

h1{
    font-size: 2rem;
    text-align: center;
    font-weight: 100 !important;
}

h1::after {
    content: '';
    display: block;
    width: 25%; /* Adjust this value to control the width of the line */
    height: 4px; /* Thickness of the line */
    border-radius: 4px;
    background: #12d2ab; /* Color of the line */
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%); /* This centers the line */
}

#achievements_description h1{
    font-size: 2rem;
    text-align: center;
}

#badge_avatar_description h1{
    font-size: 2rem;
    text-align: center;
}

#adventure_description h1{
    font-size: 2rem;
    text-align: center;
}

#adventure_log {
    margin: 2.5rem auto 0 auto;
}

#achievement_log {
    overflow: auto !important;
    height: 200px;
}

#pet_gallery .grid-wrap button  {
    margin: .5vh;
    background: transparent !important;
    border-color: transparent !important;
    height: 150px !important;
    width: 6vh !important;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

#pet_gallery .grid-container {
    grid-template-columns: repeat(30, minmax(6vh, 1fr));
}

#badge_gallery .grid-wrap button {
    margin: .5vh;
    height: 150px !important;
    width: 10vh !important;
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px); 
}

.preview button {
    color: #000;
}
    
::-webkit-scrollbar {
        width: 5px;
        height: 10px;
    }

[data-testid="block-label"] {
    opacity: 0;
}

[for="range_id_0"] div{
    background: #e4e4e48a;
    border-radius: 20px;
    padding: 5%;
    margin: 5%;
    line-height: 1.8;
}

[aria-label="Share"] {
    opacity: 0;
}

#adventure_slider {
    display: flex;
    flex-direction: column;
}

input[type="range"] {
    -webkit-appearance: none !important; /* Removes default styling for Webkit browsers */
    height: 20px !important; /* Makes the track thicker */
    background: linear-gradient(#12d2ab, #16a1b1) !important;
    box-shadow: 0 0 10px #16a1b1 !important;
    border-radius: 20px !important; /* Round corners of the track */
    padding: 20px !important;
    margin: 10px 0 !important;
    order: -1 !important;

  }
  
/* Styles for the slider thumb for Webkit browsers like Chrome and Safari */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important; /* Overrides default webkit styles */
    appearance: none !important;
    height: 24px !important; /* Height of the thumb */
    width: 24px !important; /* Width of the thumb */
    border-radius: 50% !important; /* Rounded corners of the thumb */
    background: #f3b968 !important; /* Background color of the thumb */
    margin-top: -6px !important; /* Ensures the thumb aligns with the track */
    box-shadow: 0px -2px 5px #eb6584 inset, 0px 2px 5px #b7456e !important;
  }
  
/* Styles for the slider thumb for Firefox */
input[type="range"]::-moz-range-thumb {
    appearance: none !important;
    height: 24px !important; /* Height of the thumb */
    width: 24px !important; /* Width of the thumb */
    border-radius: 50% !important; /* Rounded corners of the thumb */
    background: #f3b968 !important; /* Background color of the thumb */
    margin-top: -6px !important; /* Ensures the thumb aligns with the track */
    box-shadow: 0px -2px 5px #eb6584 inset, 0px 2px 5px #b7456e !important;
  }
  
/* Styles for the slider thumb for IE */
input[type="range"]::-ms-thumb {
    appearance: none !important;
    height: 24px !important; /* Height of the thumb */
    width: 24px !important; /* Width of the thumb */
    border-radius: 50% !important; /* Rounded corners of the thumb */
    background: #f3b968 !important; /* Background color of the thumb */
    margin-top: -6px !important; /* Ensures the thumb aligns with the track */
    box-shadow: 0px -2px 5px #eb6584 inset, 0px 2px 5px #b7456e !important;
  }
  
/* Styles for the track (progress) for Webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 10px !important; /* Height of the track */
    background: #eee !important;
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75) inset !important;
    border-radius: 10px !important; /* Rounded corners of the track */
  }
  
/* Styles for the track for Firefox */
input[type="range"]::-moz-range-track {
    width: 100% !important;
    height: 10px !important; /* Height of the track */
    background: #eee !important;
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75) inset !important;
    border-radius: 10px !important; /* Rounded corners of the track */
  }
  
/* Styles for the track for IE */
input[type="range"]::-ms-track {
    width: 100% !important;
    height: 10px !important; /* Height of the track */
    background: #eee !important;
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75) inset !important;
    border-radius: 10px !important; /* Rounded corners of the track */
  }