body{
    overscroll-behavior-y: contain;
    user-select: none;
    font-family:-apply-system,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}


.appBody{
    background: url('./image/game2.gif');
    background-repeat: no-repeat;
    background-size: cover;
    transition: ease-out 0.5s all;
    -webkit-transition: ease-out 0.5s all;
    -moz-transition: ease-out 0.5s all;
    -ms-transition: ease-out 0.5s all;
    -o-transition: ease-out 0.5s all;
    margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
}
.initApp{
    background: linear-gradient(90deg,#00000056,#00000059), url('./image/game2.gif');
    background-repeat: no-repeat;
    background-size: cover;
}

.app{
    width: 780px;
    margin: auto;
    max-width: 90%;
} 

.instruction{
    box-shadow: inset #fff 2px -1px 20px 1px;
}
.instruction p{
    text-shadow: rgba(20, 220, 120, 0.377) 1px -1px 1px;
    text-align: center;
}

.app-content{
    border:#00000031 inset 2px;
    width:fit-content; 
    margin: auto
}


.congrat{
    background: rgba(0, 0, 0, 0.719);
    width:100% ;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

}

.congrat img{
    opacity: 0.9;
    filter: invert();
    -webkit-filter: invert();
    border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    -ms-border-radius:30px;
    -o-border-radius:30px;
}
.gameEntries{
    -webkit-tap-highlight-color: rgba(52, 155, 235, 0.377);
}

/* Desktop mini-mode*/
@media screen and (max-width: 400px) {
    .instruction {
        font-size: small
    }
}

/* @media (display-mode:standalone){

} */


@media (max-width:260px) {
    .instruction {
        display: none;
    }
    .gameheader h1 {
        font-size: small; 
        padding:0 0.4rem;
    }
    .app-content .gameEntries{
        height: 2.5rem;
        width: 2.5rem;
    }
    .control .getenter,.control .resetGame{
        font-size: smaller;
        /* width: fit-content; */
        /* display: none; */
    }
    .app-content{
        grid-gap: 0.5rem;
    }
    .scoreBoard h1{
        font-size: 0.6rem;
        /* display: none; */
    }
}

@media screen and (max-height:370px) and (orientation: landscape) {
    
    .gamebody{
        display: flex;
        flex-direction: row;
        
    }
    .scoreBoard >h1{
        text-shadow: 1px 1px 1px #ffffffa6;
        font-size: 2rem;
    }
    .scoreBoard div{
        background: none;
        border: none;
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-top: 2rem;
        margin-left: 1rem;
    }
    .scoreBoard div h1{
        font-size: 1.2rem;
        color: white;
        text-shadow: 1px 1px 2px #000;

    }

    .scoreBoard{
        display: flex; 
        flex: 1;
    }

    .congrat{
        margin-top: -28.5vh;
        margin-left: -14.2vw;
    }
    
}