/* margin 0 auto needs width for div to center
    Help from  S.O.forum:"Div not centering" from Karri RasinMaki and others in S.O. in similar forums*/

/* fixed div can't use margin: 0 auto for centering
    help from S.O. forum: Center aligning a fixed position div*/
.tactable{

    top: 50%;
    left: 50%;
    
    transform: scale(0);
    z-index: 10;
    position: fixed;

    width: 60%;
    height: 80%;
    
    background-color: rgb(251, 243, 229);

    border-collapse: collapse;
}
.tactable.active{
    transform: translate(-50%,-50%) scale(1);
}

td{
    width: 30%;
    height: 30%;

    border: 5px solid #f3daab;

    z-index: 0;
}


.x{
    height: 70%;
    width: 70%;
}
.circle{
    height: 70%;
    width: 70%;
}


#won{
    height: 40%;
    width: 40%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#lost{
    height: 40%;
    width: 40%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#tie{
    height: 40%;
    width: 40%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#retry{
    width: 15%;
    height: 15%;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%,-50%);
}


#Hstrike0{
    position: absolute;
    transform: scaleX(2) scaleY(.25);

    width: 50%;
    height: 50%;

    top: -10%;
    left: 25%;
}
#Hstrike1{
    position: absolute;
    transform: scaleX(2) scaleY(.25);

    width: 50%;
    height: 50%;

    top: 25%;
    left: 25%;
}
#Hstrike2{
    position: absolute;
    transform: scaleX(2) scaleY(.25);

    width: 50%;
    height: 50%;

    top: 55%;
    left: 25%;
}

#Vstrike0{
    position: absolute;
    transform: scaleX(.25) scaleY(1.1);
    
    width: 50%;
    height: 85%;

    top: 5%;
    left: -10%;
}
#Vstrike1{
    position: absolute;
    transform: scaleX(.25) scaleY(1.1);

    width: 50%;
    height: 85%;

    top: 5%;
    left: 20%;
}
#Vstrike2{
    position: absolute;
    transform: scaleX(.25) scaleY(1.1);

    width: 50%;
    height: 85%;

    top: 5%;
    left: 55%;
}

#strikeDL{
    position: absolute;

    width: 90%;
    height: 90%;

    top: 3%;
    left: 2%;
}
#strikeDR{
    position: absolute;

    width: 90%;
    height: 90%;

    top: 2%;
    left: 5%;
}