.teaching_material_btn_1 {
    color: white;
    transition: transform .1s ease-in-out, filter .1s ease-in-out;
}

.teaching_material_btn_1:hover {
    color: white;
    transform: translateY(-5px) translateX(-5px);
    filter: drop-shadow(5px 5px 0 #aaaaaa);
}

.teaching_material_btn_1 p {
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;
    font-family: 華康儷粗宋;
    font-size: 45px;
    font-weight: 200;
    letter-spacing: 4px;
}

.tm-tag {
    width: 135px;
    height: 55px
}

@media (max-width: 680px) {
    .bt-style-1 {
        width: 70px;
        height: 45px;
        font-size: 1.2rem;
        padding: 0 7px;
    }

    .tm-tag {
        width: 70px;
        height: 45px
    }
}

@media screen and (max-width: 600px) {
    .teaching_material_btn_1 {
        width: 100%;
    }

    .teaching_material_btn_1 img {
        width: 100%
    }
}

@media screen and (max-width: 470px) {
    .teaching_material_btn_1 p {
        font-size: 36px;
    }
}

.sg-color-1 {
    color: white;
    background-color: var(--custom-color-12);
    opacity: 0.7;
}

.sg-color-1:hover, .sg-color-2:hover, .sg-color-3:hover  {
    opacity: 1;
}

.sg-color-1 i, .sg-color-2 i, .sg-color-3 i{
    color: #999999;
    opacity: 0.7;
}

.sg-color-1:hover i {
    color: var(--custom-color-12);
    opacity: 1;
}

.sg-color-2 {
    color: white;
    background-color: var(--custom-color-17);
    opacity: 0.7;
}

.sg-color-2:hover i {
    color: var(--custom-color-17);
    opacity: 1;
}

.sg-color-3 {
    color: white;
    background-color: var(--custom-color-1);
    opacity: 0.7;
}

.sg-color-3:hover i {
    color: var(--custom-color-1);
    opacity: 1;
}

[item] {
    background-color: #f3d78b;
}

[item].correct {
    background-color: #6ec494;
}

[item].wrong {
    background-color: #999999;
}

[item]:focus-visible,
[switch-btn]:focus-visible {
    outline: 3px solid #1a608b;
    outline-offset: 2px;
}

.sg-border {
    border: 4px dotted #dcdcdc
}

.sg-color-4 {
    color: var(--custom-color-14)
}

@keyframes shining {
  0% {
    box-shadow: 0 0 0 0 white;
  }
  50% {
    box-shadow: 0 0 0 10px white;
  }
}

.shining_animation {
  animation: shining 2s infinite;
}

.sg-card-3 {
    min-height: 120px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    background-color: #fcedc4;
    border: 3px solid #fcedc4;
    color: #1a608b;
}

.sg-card-3:hover {
    border: 3px solid #ebbc3e;
}

.sg-card-3.active {
    background-color: #f3d78b;
    border: 3px solid #f3d78b;
}

.sg-card-3.active:hover {
    border: 3px solid #ebbc3e;
}

.sg-card-3.active.correct {
    background-color: #6ec494;
    border: 3px solid #6ec494 !important;
}

.sg-card-3.active.wrong {
    background-color: #999999;
    border: 3px solid #999999 !important;
}

.sg-card-3 i {
    font-size: 100px;
    color: rgba(202, 55, 55, 0.959);
}
.sg-card-3.lock:hover {
    border: 3px solid #fcedc4;;
}

.sg-body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.prev-btn, .next-btn {
    border: none;
    background-color: transparent;
}

.visibility-hidden {
    visibility: hidden;
}

.quest-container .text-secondary {
    min-height: 70px;
    margin-top: 1rem; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.quest-container .answer-box {
    margin-top: 1rem; 
}

.words-container [item] {
    margin-top: 1rem
}

.phone [switch-btn] {
    display: flex;
    flex-direction: column;
}

[switch-btn] i.sm {
    display: none;
}

.phone [switch-btn] i:not(.sm) {
    display: none;
}

.phone [switch-btn] i.sm {
    display: block;
}

.phone[game="1"]#sg_body {
    flex-direction: column;
}

@keyframes shining_1 {
    0% {
      filter: drop-shadow(0 0 0 rgba(35, 101, 210, 0.25));
    }
    50% {
      filter: drop-shadow(5px 0 0 rgba(35, 101, 210, 0.25))
        drop-shadow(0 5px 0 rgba(35, 101, 210, 0.25))
        drop-shadow(5px 5px 0 rgba(35, 101, 210, 0.25))
        drop-shadow(-5px 0 0 rgba(35, 101, 210, 0.25))
        drop-shadow(0 -5px 0 rgba(35, 101, 210, 0.25))
        drop-shadow(-5px -5px 0 rgba(35, 101, 210, 0.25));
    }
  }

.shining_1 {
    animation: shining_1 2s infinite; ;
}