css/style.css

#personal_report-button {
    color: #fff;
    background: #f3b868 ;
    border-radius: 8px ;
    border: 4px solid transparent;
    margin: 5px;
}

#completion_reward-button {
    color: #fff;
    background: #f3b868 ;
    border-radius: 8px ;
    border: 4px solid transparent;
    margin: 5px;
}

#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;
}

.block {
    border-color: transparent !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;
}

#pet_avatar_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;
}

.gallery_container .preview {
    background: transparent !important;
    border-radius: 0% !important;
}

.gallery_container .preview [data-testid="detailed-image"] {
    padding-top: 10px;
}

#pet_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);
}

#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);
}

.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"] {
    display: none !important;
}

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

#adventure_slider .head {
    justify-content: center !important;
}

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 */
  }
  

  #player_name_title {
    margin: 5vh auto;
}

#player_name {
    padding: 6vh 6vw 10vh 6vw;
}

#player_name [data-testid="block-info"]{
    font-size: 2rem;
    padding: 1vh 0 1vh 0;
    display: block;
    color: #000;
    text-align: center !important;
}

#player_name div{
    color: #444;
    text-align: center;
}

#player_name textarea{
    border-style: solid;
    border-color: rgba(244, 250, 150, 0.2);
    border-width: 1px;
    background: rgba(255,255,255, 0.2);
}

#story_title {
    margin: 5vh auto;
}

#story_description p {
    font-size: 1.3rem;
    text-align: center;
    width: 70%;
    margin: 5vh auto;
}

#story_description {
    border: #12d2ab solid 1px !important;
    border-radius: 10px;
}

#start_make_reward {
    background-color: #12d2ab;
    margin: 20vh 10vw;
    height: 30vh;
    font-size: 2rem;
}

#not_participate {
    margin: 20vh 10vw;
    font-size: 2rem;
}

#not_start {
    margin: 20vh 10vw;
    font-size: 2rem;
}

#start_generate_story, #confirm_player_name, #player_name_next_step, #confirm_story, #start_generate_certificate {
    background-color: #48A1DD;
}

#cancel_player_name, #cancel_story {
    background-color: #eb6584;
}

#openai_img, #aws_img, #google_img, #mtk_img, #ntu_img {
    border-radius: 50%;
    transform: scale(0.7);
}

#openai_img [aria-label="Download"], #aws_img [aria-label="Download"], #google_img [aria-label="Download"], #mtk_img [aria-label="Download"], #ntu_img [aria-label="Download"] {
    display: none;
}

[aria-label="Loading response"] {
    background: rgba(0,0,0,0.1);
}

.selected {
    color: #fff !important;
    background: #f3b868 !important;
    border: 4px solid #eb6584 !important;
    border-radius: 8px !important;
    margin: 5px;
}

#bot1 .message {
    background: rgba(255,255,255,0.4) !important;
    border: None !important;
}

#bot2 .message {
    background: rgba(252, 208, 28, 0.4) !important;
    border: None !important;
}

#bot3 .message {
    background: rgba(99, 162, 98, 0.4) !important;
    border: None !important;
}

#bot4 .message {
    background: rgba(66, 130, 227, 0.4) !important;
    border: None !important;
}

#bot4 .message {
    background: rgba(227, 66, 104, 0.4) !important;
    border: None !important;
}

#processing {
    margin: 20vh 10vw;
    height: 30vh;
    font-size: 2rem;
}

.code_wrap {
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 1vh 1vw 1vh 1vw;
    margin: 1vh 1vw 1vh 1vw;
}

.code_wrap pre {
    background: none !important;
}

#certificate [aria-label="Download"]{
    background: #12d2ab !important;
    color: #fff !important;
    border: 5px solid #02b28f !important;
}

#certificate button {
    display: flex;
    margin: 0 auto;
}

#select_story {
    display: flex;
    justify-content: space-evenly;
}

#select_story label{
    color: #000;
}

#select_story input{
    background-color: #2563eb;
}

#select_story [data-testid="block-info"] {
    color: #000;
    margin: auto;
}

[data-testid="露米娜-radio-label"] {
    background: rgba(255,255,255,0.4) !important;
}

[data-testid="索拉拉-radio-label"] {
    background: rgba(252, 208, 28, 0.4) !important;
}

[data-testid="薇丹特-radio-label"] {
    background: rgba(99, 162, 98, 0.4) !important;
}

[data-testid="蔚藍-radio-label"] {
    background: rgba(66, 130, 227, 0.4) !important;
}

[data-testid="紅寶石-radio-label"] {
    background: rgba(227, 66, 104, 0.4) !important;
}