:root
{
    --fontsize: 1vw;
    --textcolor: #222222;
    --backcolor: #eeeeee;
    --disabledtextcolor: #666666;
    --disabledbackcolor: #cccccc;
    --lightcolor: #aaddff;
    --darkcolor: #003399;
    --highlightcolor: #2255bb;
    --activecolor: #bb4444;
    --selectcolor: rgb(0, 0, 0, 0.2);
}

body
{
    font-size: calc(var(--fontsize) * 1.0);
    font-family: helvetica, sans-serif;
    color: var(--textcolor);
    background-color: var(--backcolor);
}

.vSpacer
{
    height: 2vw;
}

#User
{
    margin-left: 100px;
    font-size: calc(var(--fontsize) * 3.0);
}

section
{
    display: none;
}

section:target
{
    display: block;
    animation: fadein 1s;
}

nav
{
    box-sizing: border-box;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--lightcolor);
    border: 1px solid var(--darkcolor);
    font-size: calc(var(--fontsize) * 2.0);
    padding: 5px;
}

nav summary
{
    list-style-type: "☰";
    cursor:pointer;
}

nav summary:hover
{
    font-size: calc(var(--fontsize) * 2.0);
    background: var(--selectcolor);
}

nav summary span
{
    font-size: 0;
}

nav [open] summary
{
    list-style-type: "✖";
}

nav details
{
    text-align: left;
}

nav ul
{
    margin: 0;
    display: inline-block;
    list-style-type: none;
    padding: 0.1em 0.5em 0.1em 0.5em;
}

.navLi
{
    display: inline-block;
    box-sizing: border-box;
    border-style: none;
    text-decoration: none;
    cursor: pointer;
    color: var(--textcolor);
    background-color: var(--lightcolor);
    font-size: calc(var(--fontsize) * 2.0);
    padding: calc(var(--fontsize) * 0.5);
    margin: 0.1em 0.5em;
}

.navLi:hover
{
    background: var(--selectcolor);
}



.modalDivClass
{
    box-sizing: border-box;
    position: fixed; /* Stay in place */
    z-index: 4; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(200,200,200,0.9);
}

.modalFormClass
{
    box-sizing: border-box;
    background-color: var(--lightcolor);
    border: 1px solid var(--darkcolor);
    padding: 0.5em;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.modalFieldsetClass
{
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--lightcolor);
    border: 0 solid  var(--darkcolor);
    padding: 0.5em;
    margin: 0;
}

.leftModalDivClass
{
    box-sizing: border-box;
    float: left;
    width: 30%;
    padding: 0;
    margin: 0;
}

.rightModalDivClass
{
    box-sizing: border-box;
    float: left;
    width: 70%;
    padding: 0;
    margin: 0;
}

.modalLabelClass
{
    box-sizing: border-box;
    display: block;
    text-align: right;
    font-size: calc(var(--fontsize) * 1.0);
    font-family: inherit;
    font-weight: normal;
    padding-top: 4px;
    padding-right: 0.1em;
    margin-bottom: calc(var(--fontsize) * 1.0 * 1.5 * 0.5);
    width: 90%;
    height: calc(var(--fontsize) * 1.0 * 1.5 * 1.2);
}

.modalInputClass
{
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid var(--darkcolor);
    text-align: left;
    font-size: calc(var(--fontsize) * 0.8);
    font-family: inherit;
    font-weight: normal;
    padding-left: 0.2em;
    margin-bottom: calc(var(--fontsize) * 1.0 * 1.5 * 0.5);
    width: 90%;
    height: calc(var(--fontsize) * 1.0 * 1.5 * 1.2);
}

.inputClass
{
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid var(--darkcolor);
    text-align: left;
    font-size: calc(var(--fontsize) * 0.8);
    font-family: inherit;
    font-weight: normal;
    padding-left: 0.2em;
    margin-bottom: calc(var(--fontsize) * 1.0 * 1.5 * 0.5);
    width: 90%;
    height: calc(var(--fontsize) * 1.0 * 1.5 * 1.2);
}

.buttonClass
{
    display: inline-block;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    color:  var(--textcolor);
    background-color:  var(--lightcolor);
    border: 2px solid var(--darkcolor);
    font-size: calc(var(--fontsize) * 1.0);
    padding: calc(var(--fontsize) * 0.5);
    margin: 0.2em 0.5em;
}

.buttonClass:hover
{
    background: var(--selectcolor);
}

.buttonClass[disabled]
{
    pointer-events: none;
    background-color: var(--disabledbackcolor);
    color: var(--disabledtextcolor);
    border: 1px solid var(--darkcolor);
}

.activeButtonClass
{
    display: inline-block;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    color:  var(--textcolor);
    box-shadow: 0 0 5px 2px var(--darkcolor);
    background-color:  var(--lightcolor);
    border: 2px solid var(--darkcolor);
    font-size: calc(var(--fontsize) * 1.0);
    padding: calc(var(--fontsize) * 0.5);
    margin: 0.2em 0.5em;
}

.activeButtonClass:hover
{
    background: var(--selectcolor);
}

.smallButtons
{
    box-sizing: border-box;
    cursor: pointer;
    background-color: var(--lightcolor);
    border: 1px solid var(--darkcolor);
    font-size: calc(var(--fontsize) * 0.8);
    padding: 0.0em;
    margin: 0.0em 0.2em;
    width: calc(var(--fontsize) * 0.8 * 1.5);
}

.smallButtons:hover
{
    background-color: var(--selectcolor);
}

.smallImg
{
    height: calc(1em * 1.5);
    width: calc(1em * 1.5);
    vertical-align: bottom;
}

.debugDivClass
{
    box-sizing: border-box;
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    right: 0;
    top: 0;
    overflow: auto; /* Enable scroll if needed */
    background-color: var(--backcolor);
}

.debugFormClass
{
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    background-color: var(--lightcolor);
    border: 1px solid var(--darkcolor);
    width: 100%;
    padding: 0;
    margin: 0;
}

.debugFieldsetClass
{
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--lightcolor);
    border: 0 solid  var(--darkcolor);
    padding: 0.5em;
    margin: 0;
    width: 100%;
}

.divClass
{
    box-sizing: border-box;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: var(--backcolor);
}

.formClass
{
    box-sizing: border-box;
    background-color: var(--lightcolor);
    border: 1px solid var(--darkcolor);
    padding: 0.5em;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.fieldsetClass
{
    box-sizing: border-box;
    background-color: var(--lightcolor);
    border: 1px solid  var(--darkcolor);
    padding: 0.5em;
    margin: 0;
}

.divGames
{
    display: flex;
    flex-wrap: wrap;
}

.divGame
{
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    border: 10px solid #00AA33;
    border-radius: 5vw;

    width: 10vw;
    height: 10vw;
    margin: 1em;
}

.divMyGame
{
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    border: 0px solid var(--darkcolor);
    box-shadow: 0 0 10px 10px green;
    border-radius: 5vw;
    width: 10vw;
    height: 10vw;
    margin: 1em;
}

.divDisabledGame
{
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    border: 10px solid red;
    border-radius: 5vw;

    width: 10vw;
    height: 10vw;
    margin: 1em;
}

.spanGame
{
    font-size: calc(var(--fontsize) * 5.0);
}

.hiddeninput
{
    opacity: 0;
}

.thinkTimeClass
{
    box-sizing: border-box;
    z-index: 1;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--backcolor);
    border: 0 solid var(--darkcolor);
    padding: 0;
}

.thinkTimeBarClass
{
    width: 100%;
    border: 2px solid var(--darkcolor);
    margin: 0.1em 0;
}

.gameboard
{
    box-sizing: border-box;
}

.board
{
    box-sizing: border-box;
    width: 100%;
}

.leftside
{
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 45%;
}

.rightside
{
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 50%;
}

.userlabela
{
    text-decoration: none;
    box-sizing: border-box;
    color: var(--disabledtextcolor);
    background-color: var(--disabledbackcolor);
    border: 1px solid var(--darkcolor);
    font-size: calc(var(--fontsize) * 0.8);
    padding: calc(var(--fontsize) * 0.5);
    margin: 0.2em 0.5em;
}

.userlabelactivea
{
    text-decoration: none;
    box-sizing: border-box;
    color: black;
    background-color: var(--backcolor);
    border-radius: 10px;
    border: 1px solid red;
    box-shadow: 0 0 5px 2px red;
    font-size: calc(var(--fontsize) * 0.8);
    padding: calc(var(--fontsize) * 0.5);
    margin: 0.2em 0.5em;
}

.userlabelb
{
    text-decoration: none;
    box-sizing: border-box;
    color: var(--disabledtextcolor);
    background-color: var(--disabledbackcolor);
    border: 1px solid var(--darkcolor);
    font-size: calc(var(--fontsize) * 0.8);
    padding: calc(var(--fontsize) * 0.5);
    margin: 0.2em 0.5em;
}

.userlabelactiveb
{
    text-decoration: none;
    box-sizing: border-box;
    color: black;
    background-color: var(--backcolor);
    border-radius: 10px;
    border: 1px solid green;
    box-shadow: 0 0 5px 2px green;
    font-size: calc(var(--fontsize) * 0.8);
    padding: calc(var(--fontsize) * 0.5);
    margin: 0.2em 0.5em;
}

.emptycircle
{
    stroke-width: 2;
    stroke:	rgb(34 34 24);
    fill: var(--backcolor);
}

.setcircle[value="f"]
{
    stroke-width: 2;
    stroke:	transparent;
    fill: transparent;
}

.setcircle[value="g"]
{
    stroke-width: 2;
    stroke:	rgb(204 0 0);
    fill: transparent;
}

.setcircle[value="h"]
{
    stroke-width: 2;
    stroke:	rgb(204 0 0);
    fill: transparent;
}

.setcircle[value="i"]
{
    stroke-width: 2;
    stroke:	rgb(204 0 0);
    fill: rgb(204 0 0);
}

.setcircle[value="j"]
{
    stroke-width: 2;
    stroke:	rgb(204 0 0);
    fill: rgb(204 0 0);
}

.setcircle[value="k"]
{
    stroke-width: 2;
    stroke:	rgb(204 0 0);
    fill: rgb(204 0 0);
}

.setcircle[value="e"]
{
    stroke-width: 2;
    stroke:	rgb(0 204 0);
    fill: transparent;
}
.setcircle[value="d"]
{
    stroke-width: 2;
    stroke:	rgb(0 204 0);
    fill: transparent;
}
.setcircle[value="c"]
{
    stroke-width: 2;
    stroke:	rgb(0 204 0);
    fill: rgb(0 204 0);
}
.setcircle[value="b"]
{
    stroke-width: 2;
    stroke:	rgb(0 204 0);
    fill: rgb(0 204 0);
}
.setcircle[value="a"]
{
    stroke-width: 2;
    stroke:	rgb(0 204 0);
    fill: rgb(0 204 0);
}

.settext
{
    text-anchor: middle;
    dominant-baseline: central;
    cursor: inherit;
}
.settext[value="f"]
{
    fill: transparent;
}
.settext[value="g"]
{
    fill: rgb(0 0 0);
}
.settext[value="h"]
{
    fill: rgb(0 0 0);
}
.settext[value="i"]
{
    fill: rgb(255 255 255);
}
.settext[value="j"]
{
    fill: rgb(255 255 255);
}
.settext[value="k"]
{
    fill: rgb(255 255 255);
}
.settext[value="e"]
{
    fill: rgb(0 0 0);
}
.settext[value="d"]
{
    fill: rgb(0 0 0);
}
.settext[value="c"]
{
    fill: rgb(255 255 255);
}
.settext[value="b"]
{
    fill: rgb(255 255 255);
}
.settext[value="a"]
{
    fill: rgb(255 255 255);
}