#gameModal {
    border: 30px solid transparent;
    padding: 0px;
    border-image: url(../images/WFrame.png) 26 stretch;

}

#gameContent {
    background: url("../images/bg_modal.png"); 
    background-size: 105% 105%;
    background-position: -10px -10px;
    border: none;
}

#gameBody {
    height: 350px;
}

#videoContainer {
    position: relative;
    width: 170px;
    overflow: hidden;
    display: block;
    height: 255px;
    margin-left: 65px;/*md 108px */
    margin-top: -5px;/*2160*1080 use -10px*/
}

@media screen and (max-width:991px) {
    #videoContainer {
        margin-left: 113px;
    }
    #gameBody {
        height: 600px;
    }
}
@media screen and (max-width:500px) {
    #videoContainer {
        margin-left: 80px;
    }
    #gameBody {
        height: 600px;
    }
}
#slVideo {
    margin-left: -160px;
    /*0~-180 according to the posentor's position*/
}

#slBox {
    background-image: url("../images/bgPanel.png");
    background-size: 82% 85%;
    background-repeat: no-repeat;
    background-position: 35px 35px;
    height: 300px;
}

.btnSel {
    background-image: url("../images/bgSelect2.png");
    /* background-image: linear-gradient(to bottom right, red, yellow); */
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
    animation: selAni 1.5s infinite;
    animation-direction: alternate;
    transform-origin: 50% 50%;
    position: relative;
    text-decoration: none;
}
.btnSel:hover{
    border:#ff0 2px solid;
    cursor: pointer;
}
#banner {
    background-image: url("../images/bgBanner.png");
    background-repeat: no-repeat;
    background-position: 50% 0%;
    background-size: 30% 100%;
    height: 70px;
}

.txtShadow {
    text-shadow: #000 2px 2px;
    color: #ff0;
}

#closeGame {
    background-image: url("../images/bgSelect3.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#closeGame:hover {
    color: #f00;
}

@keyframes selAni {
    0% {transform: scale(0.9, 0.9);}
    30% {transform: scale(1, 1);}
    31% { transform: scale(1, 1);}
    100% {transform: scale(1, 1);}
}

#sel1 {
    animation-delay: 1s;
}

#sel2 {
    animation-delay: 2s;
}

#sel3 {
    animation-delay: 0s;
}

#showResult {
    height: 300px;
}

#wrong {
    animation: wrongAni 1.5s infinite ease-in-out;
    animation-direction: alternate;
    transform-origin: 50% 50%;
    position: relative;
}

#right {
    width: 300px;
    height: 200px;
    background-image: url("../images/Right.png");
    background-size: auto 90px;
    background-repeat: no-repeat;
    background-position: 0% 60px;

}
 #right img{
    animation: blink 2s infinite ease-in-out;
 }
@keyframes wrongAni {
    0%,7% {   transform: rotateZ(0);}
    15% {transform: rotateZ(-15deg);}
    20% {transform: rotateZ(10deg);}
    25% {transform: rotateZ(-10deg);}
    30% {transform: rotateZ(6deg);}
    35% {transform: rotateZ(-4deg);}
    40%,100% {transform: rotateZ(0); }
}

@keyframes blink{
    0%, 7% {opacity:1; transform: scale(1); }
15% {opacity:0.75; transform: scale(0.8);}
20% { opacity:1; transform: scale(1);}
25% {opacity:0.7;transform: scale(0.85);}
30% {opacity:1;transform: scale(1); }
35% {opacity:0.7; transform: scale(.75);}
40%,80% { opacity:1;transform: scale(1);}
85%,100%{opacity:0.85;transform: scale(.8);}
}

.optionAni{
    animation: moveOption 1s ease-in-out;
    position: relative;
}
.optionAniBack{
    animation: moveOptionBack 1s ease-in-out;
    position: relative;
    top: -200px;
}
@keyframes moveOption{
    0%   {opacity:0.8; top: -200px; }
    85%,100%{opacity:1;top: 0px;}
}
@keyframes moveOptionBack{
    0%   {opacity:1; top: 0px; }
    85%,100%{opacity:0.8;top: -200px;}
}
#Options{
    visibility: none;
}
#Options h4{
    color: rgb(233, 77, 77);
-webkit-text-stroke: 1px rgb(231, 87, 87);
text-shadow: 2px 4px 4px #fff;
font-weight: bold;
}

.custom-tooltip {
    --bs-tooltip-bg: var(--bs-warning);
    --bs-tooltip-color: #000;
    font-size: 1.2em;
}