:root {
    --primary-color: rgb(159,230,170);
    --secondary-color: rgb(52,157,114);
    --third-color:rgb(159,230,170);
    --dark-color: rgb(11, 77, 42);
    --slightly-dark-color: rgb(11, 120, 66);
    --right-answer-color: rgb(255,213,144);
}

body {
    font-family: "Noto Sans TC", '微軟正黑體';
    font-weight: 500;
    background-color: var(--secondary-color);
}

input[type="radio"] {
    display: none;
}

.gear{
    filter: invert(83%) sepia(24%) saturate(772%) hue-rotate(69deg) brightness(87%) contrast(93%);
}
.secondary-green-svg{
    filter: invert(48%) sepia(63%) saturate(394%) hue-rotate(104deg) brightness(95%) contrast(91%);
}

@keyframes rotateAnimation {
    0% {
        transform:  rotate(0deg);
    }
    /* 50% {
        transform:  rotate(180deg);
    }
    50% {
        transform:  rotate(180deg);
    } */
    100% {
        transform:  rotate(360deg);
    }
}

.rotate-animation {
    animation: rotateAnimation 5s infinite ease-in-out;
		animation-delay: 1s;
		animation-fill-mode: forwards
}

.progress-ring__circle {
    transition: stroke-dashoffset 1s linear;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.audioProgress-bar-container{
	display: flex;
	justify-content: center;
    align-items: center;
    height: 80px;
	width: 80px;
    /* 設定整個進度條的最大高度 */
    border-radius: 100%;
    margin: 0 auto;
	background-color: var(--primary-color);
}
.audioProgress-bar {
    width: 8px;
    /* 每個 bar 的寬度 */
    background-color: var(--secondary-color);
    margin: 0 2px;
    transition: background-color 0.3s;
	border-radius: 5px;
  }

.text-arialB{
    font-family: 'Arial Black', "Archivo Black", monospace, system-ui;
}
.text-timesNR{
    font-family: 'Times New Roman', "Noto Sans TC", '微軟正黑體', serif;
    line-height: 1.28;
}

.setting-field{
    min-width: calc(4vw + 110px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px;
    color: white;
    background-color: var(--secondary-color);
    border-radius: 8px;
    margin-right: -15px;
    z-index: 10;
}
.setting-value{
    line-height: 2.3;
    color: var(--secondary-color);
    font-weight: 600;
    padding-left: 10px;
    text-align: center;
    width: calc(7rem + 1.5vw);
    background-color: white;
    flex: 4;
    border-radius: 8px;
}

.usernameText, .ptcp-font-size-adjust{
    overflow-wrap: anywhere;
}

.warning-text {
    color: #ff3333;
}

.correct-o-wrong-img{
    width: 36px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    filter: drop-shadow(1px 1px 1px rgb(0, 0, 0, 0.2));
    z-index: 100;
}