body {
    /*flex Container*/
    display: flex;
    flex-direction: column;
}

h1{
    font-size: 100%;
}

h3{
    text-align: center;
}

p{
    text-align: center;
    font-size: 100%;
    min-width: 0;
}

.card h1{
    font-weight:900;

}

#timer_outer {
    /*flex Container*/
    display: flex;
    justify-content: flex-end;
    flex-wrap:nowrap;

    padding-right: 10%;
}

#gameArea {
    border:solid;
    width:90%;
    height:80%;
    background-color:darkgreen;
    /*flex container*/
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;

    /*flex item*/
    align-self:center;
    
}

#info {
    border:groove;
    width: 75%;
    height: 60%;

    /*flex container*/
    display: flex;
    flex-flow: column nowrap;
    justify-content:unset;
    
    /*flex item*/
    align-self: center;
    min-width: 0;
}

#scoreboard {
    /*flex Container*/
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    padding-right: 10%;
    padding-bottom: 3%;
}

#start{
    width: 25%;
    
    /*flex item*/
    align-self:center;
}

.card {
    border: solid;
    border-color:blue;
    width: 100px;
    height: 150px;
    background-color:white;

    /*flex Container*/
    display: flex;
    justify-content: center;
    align-items: center;

    /*flex item*/
    
}

.flipped {
    background-image: url("/images/webFun/MathMemory/cardBackground.jpg");
    background-size: contain
}

.flipped h1{
    display: none;
}

.gone {
    border: none;
    background-color:inherit !important;
}

.ui-dialog-titlebar{
    display:none;
}

.ui-dialog-buttonset{
    display:flex;
    justify-content: center;
    float: none !important;
}

.dialog{
    display: none;
}