#gamePod {
    background: #404;
    width: 75vw;
    height: 100%;
    position: absolute;
    z-index: 9;
}

#gamePod.v2 {
    background: #004;
}

#gamePod.v3 {
    background: #000;
}

.fragment {
    height: 100%;
}

#gameRulesFragment {
    display: flex;
}

#imgStartBtn{
    position: absolute;
    left: 40%;
    right: 40%;
    width: 540px;
    height: 540px;
    z-index: 100;
}

.animRotate {
    animation: rotate 9s linear forwards;
}


.animRotateAndScale {
    animation: rotateAndScale 3s linear forwards;
}

#toWhite {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 22;
    display: flex;
}

.animToWhite {
    animation: toWhite 4s linear forwards;
}

.animToBlack {
    animation: toBlack 4s linear forwards;
}

#getReady {
    color: black;
    margin: auto;
    font-size: 4em;
}

/* Intro logo Animations */

@keyframes rotateAndScale {
    100% {
        transform: scale(5) rotate(400deg);
        opacity: 0;
    }
}

@keyframes rotate {
    100% {
        transform: rotate(1800deg);
    }
}

@keyframes toBlack {
    0% {
        opacity: 0;
    }
    
    90% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes toWhite {
    0% {
        background-color: transparent;
    }

    90% {
        background-color: rgb(98, 0, 255);
    }
    100% {
        background-color: white;
    }
}

/* gameFraments bgColors */


/* qstFragment */

.line-horizontal {
    background-color: #d8d9d9;
    height: 5px;
    width: 100%;
    position: absolute;
}

#linediv1 {
    bottom: 318px;
    left: 0;
}

#linediv2 {
    bottom: 197px;
    left: 0;
}

#linediv3 {
    bottom: 102px;
    left: 0;
}


button#qst {
    background: url('/img/svg/QST.svg') no-repeat center center;
    color: white;
    font-size: 1.25em;
    width: 75vw;
    height: 140px;
    border: none;
    position: absolute;
    left: 0;
    bottom: 251px;
    z-index: 3;
    padding: 1em 2em;
}

button.answ {
    background: url('/img/svg/ANSW.svg') no-repeat center center;
    color: white;
    border: none;
    width: 575px;
    height: 80px;
    text-align: left;
    padding-left: 45px;
    font-size: 1.25em;
    z-index: 4;
}



span#abA,span#abB,span#abC,span#abD {
    color: rgb(255, 208, 0)
}

button#A {
    position: absolute;
    left: 5vw;
    bottom: 160px;
    background-image: url("/img/svg/ANSW.svg");
}

button#B {
    position: absolute;
    left: 40vw;
    bottom: 160px;
    background-image: url("/img/svg/ANSW.svg");
}

button#C {
    position: absolute;
    left: 5vw;
    bottom: 65px;
    background-image: url("/img/svg/ANSW.svg");
}

button#D {
    position: absolute;
    left: 40vw;
    bottom: 65px;
    background-image: url("/img/svg/ANSW.svg");
}

button#A.sel, button#B.sel, button#C.sel, button#D.sel {
    background-image: url("/img/svg/ANSWSel.svg");
}

button#A.cor, button#B.cor, button#C.cor, button#D.cor {
    background-image: url("/img/svg/ANSWCor.svg");
}

@media screen and (max-width: 1919px) {
    
    #moneyTree.show {
        display: initial;
        position: absolute;
        z-index: 18;
    }

    #moneyTree .lifelines {
        display: none;
    }

    #moneyTree .meter {
        position: absolute;
        top: 6em;
        right: 0;
    }

    .mobile {
        display: initial;
    }

    .mt-separator {
        display: none;
    }

    #imgStartBtn {
        position: initial;
        width: 100%;
    }

    #gamediv {
        overflow: scroll;
    }

    #linediv1, #linediv2, #linediv3 {
        display: none;
    }
    
    button#qst {
        width: 100%;
        height: initial;
        position: relative;
        left: initial;
        bottom: initial;
        background: #0000aa;
        border: 5px solid white;
        margin-bottom: .5em;
    }

    button#A, button#B, button#C, button#D {
        text-align: center;
        width: 100%;
        height: 80px;
        position: relative;
        left: initial;
        bottom: initial;
        display: block;
        margin:auto;
        margin-bottom: .5em;
        background: #0000aa;
        border: 5px solid white;
    }    

    button#A.sel, button#B.sel, button#C.sel, button#D.sel {
        background-image: none;
        background-color: #ffa600;
    }

    button#A.cor, button#B.cor, button#C.cor, button#D.cor {
        background-image: none;
        background-color: green;
    }
    

}

@media screen and (max-height: 1050px) {
    #qstFragment h2 {
        display: none;
    }    
}

