:root {
    --borderColor:rgb(20,19,19);
    --tileLight:rgb(159,177,188); /*black rgb(159,177,188)*/
    --tileMedium:rgb(37,110,235);/*rgb(157,40,204)*/
    --tileDark:rgb(71,133,255);
    --nodeOff:rgb(90,90,90);
    --nodeOn:rgb(232,170,0);/*rgb(255,186,8)*/
    --nodeOnBright:rgb(255,217,120);
    --subSecColor:rgb(198,196,190); /* menu color 176,208,211  165,204,156)*/
    --nodeBorder:rgb(22,183,137);/*purp 154 46,255*/
    --bannedNodeBorder:rgb(193,41,46); /*red color*/
    --subD:rgb(22,183,137); /*green buttons*/
    --textColor:rgb(180,180,180);
    --backgroundBlack:rgb(0,0,0);
    --backgroundGrey:rgb(30,30,30);
    
}
/*https://coolors.co/2e5266-6e8898-9fb1bc-d3d0cb-e4c555*/

div{/*same*/
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;      /* Likely future */
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* Gets rid of the brief blue highlight on tap */
    -webkit-tap-highlight-color: transparent; /* For some Androids */
    
}



*:focus{/*same*/
    outline: none !important;
}

.darkness{
    color: var(--textColor);
}

#subtitleLabel{
    background-color: var(--nodeOn);
}
#titleLabel{
    background-color: var(--nodeOn);

}
#pane{/*same*/
    /*display:inline-block;*/
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height:100%;
    width:100%;
    overflow: visible;
    background-color: var(--backgroundBlack);

}

#sectionHolder{
    vertical-align: top;
    display: inline-block;
}

#main{/*same*/
    position:absolute;
    text-align: center;
    min-width: 150;
    min-height: 150;
    height:100%;
    width:100%;
    overflow: hidden;
    background-color: var(--backgroundBlack);
    font-family: Arial, Helvetica, sans-serif;
}

body{/*same*/
    margin: 0;
    padding: 0
}
#ootLabel{
    position:absolute;
    text-align: center;
    color:var(--textColor);
}
#progBox{
    background-color: var(--backgroundBlack);
}

#challengeBox{
    /*background-color: var(--backgroundBlack);*/
    background-color: var(--backgroundGrey);
    color: var(--textColor);
}

.button{
    background-color: var(--subD);
    text-align: center;
    border-radius:9999px;
    white-space: normal;
}

.addColor{
    z-index:10;
    box-shadow: inset 0em 0em 1em 1em var(--nodeOn),
    0em 0em .5em 0em var(--nodeOn);
    background-color:var(--nodeOnBright);
    border-color:var(--nodeOn);    
    animation-name: blinkOn;
    /*animation-duration: .15s;*/
    animation-duration: .18s;
    animation-timing-function: linear;
}

.removeColor{
    background-color:var(--nodeOff);
    border-color:var(--nodeOff);
    /*box-shadow: inset 0em 0em 1em 1.6em var(--nodeOff);*/
    z-index:2;
    animation-name: blinkOff;
    /*animation-duration: .2s;*/
    animation-duration: .14s;
    animation-timing-function: linear;
}

@keyframes blinkOn{

    0% {
        box-shadow: inset 0em 0em 1em 1em var(--nodeOff), 0em 0em 0em 0em var(--nodeOn);
        background-color:var(--nodeOff);
        border-color:var(--nodeOff);
    }
    41.999%{box-shadow: inset 0em 0em 0em 0em var(--nodeOff), 0em 0em 0em 0em var(--nodeOn);}
    42% {
        box-shadow: inset 0em 0em 1em 1em var(--nodeOn), 0em 0em 0em 0em var(--nodeOn);
        background-color:var(--nodeOn);
        border-color:var(--nodeOff);
    }
    50%{
        box-shadow: inset 0em 0em 1em 1em var(--nodeOn), 0em 0em 0em 0em var(--nodeOn);
        background-color:var(--nodeOn);
        border-color:var(--nodeOn);
    }
    100% {
        box-shadow: inset 0em 0em 1em 1em var(--nodeOn), 0em 0em .5em 0em var(--nodeOn);
        background-color:var(--nodeOnBright);
        border-color:var(--nodeOn);
    }
    
}

@keyframes blinkOff{

    0% {
        box-shadow: inset 0em 0em 1em 1em var(--nodeOn), 0em 0em .5em 0em var(--nodeOn);
        background-color:var(--nodeOnBright);
        border-color:var(--nodeOn);
    }
    50%{/*recind outter shadow AND remove white interior*/
        box-shadow: inset 0em 0em 1em 1em var(--nodeOn), 0em 0em 0em 0em var(--nodeOn);
        background-color:var(--nodeOn);
        border-color:var(--nodeOn);
    }
    58% {/*border yellow to grey*/
        box-shadow: inset 0em 0em 1em 1em var(--nodeOn), 0em 0em 0em 0em var(--nodeOn);
        background-color:var(--nodeOn);
        border-color:var(--nodeOff);
    }
    58.0001%{box-shadow: inset 0em 0em 0em 0em var(--nodeOff), 0em 0em 0em 0em var(--nodeOn);}
    100% {
        box-shadow: inset 0em 0em 1em 1em var(--nodeOff), 0em 0em 0em 0em var(--nodeOn);
        background-color:var(--nodeOff);
        border-color:var(--nodeOff);
    }
}
.intersection{
    border-color:var(--nodeOff);
    background-color:var(--tileMedium);
    z-index:2;
}



.addBorder{
    border-color:var(--nodeBorder);
}

.addBannedBorder{
    border-color:var(--bannedNodeBorder);
}

.tile{
    position:absolute;
    border-style: solid;
    z-index: 1;
}

.cornerTile{
    background-color:var(--tileDark);
    border-color:var(--tileMedium);
}

.sideTile{
    background-color:var(--tileMedium);
    border-color:var(--tileMedium);
}

.middleTile{
    background-color:var(--backgroundBlack);
    border-color:var(--backgroundBlack);
}

.sectioner{
    position:absolute;
}
.subsection{
    /*background-color:var(--subSecColor);*/
    color:var(--textColor);
}

.node{
    position:absolute;
    border-radius:50%;
    border-style: solid;
    /*z-index: 2;*/
}

.topBorder{
    border-top-color:var(--borderColor);
}

.bottomBorder{
    border-bottom-color:var(--borderColor);
}

.leftBorder{
    border-left-color:var(--borderColor);
}

.rightBorder{
    border-right-color:var(--borderColor);
}

.menuButton{
    background-color: var(--subD);
    color: var(--backgroundBlack);
    text-align: center;
    border-radius:9999px;
    width:86%;
    margin: auto;
    padding:4%;
    font-weight: bold;
}

#myList{   
    display:inline-block;
    /*margin-left:15%;
    margin-right:4%;*/
    margin-top:0%;
    margin-bottom:0%;
    padding-left:0px;
    list-style-position:inside;
    text-align:left;
    /*width:100%;*/

}
.statsBox{

    vertical-align: top;
    display: inline-block;
    /*border-style: solid;
    border-color: black;
    border-width: 1px;*/
    background-color: var(--tileMedium);
}

#statsListA{
    font-weight: normal;
}
#progLabel{
    font-weight: normal;
}

#statsListC{
    border-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    margin-left:12%;
    margin-right:12%;    
}
#instructBox{
    background-color: var(--backgroundBlack);
    color: var(--textColor);
}
/*#shade{
    background-color: var(--backgroundBlack);
    width:100%;
    height:100%;
    z-index: 1000;
    position:absolute;
    top:0;
    left:0;
    display:none;
}*/

.mid{
    display:none; 
    position:absolute;
    border-radius:50%;
    background-color: var(--nodeBorder);
    z-index: 100;
}

h4{
    margin-top:0px;
    font-weight: normal;
}

.sideways{
    writing-mode: vertical-rl;
    text-orientation: upright;
}

/*
.test{
    border: 1px solid rgb(20,20,20);
}