body {background-color:black; font-family:"Arial"}
form {color:white}
h1 {color:white}


#container {display:grid; grid-template-areas:'board rules'; grid-template-columns:60vw 40vw; border-style:none}
#setup {grid-area:board; grid-template-columns: 50% 50%; text-align:center}

#ruleSheet {grid-area:rules; width:30vw; margin:0 auto; color:lightgrey}

#ruleSet {grid-area:rules; width:30vw; margin:0 auto; border-style:solid; border-width:3px; text-align:center; background-color:black}

.ruleBanner {grid-area:rules; width:30vw; height:auto; display:grid; margin-top:1vw; grid-template-columns:45% 10% 45%; grid-template-areas:'leftGrid midArrow rightGrid'}

.bannerLeft {grid-area:leftGrid; margin:0 auto}
.bannerRight {grid-area:rightGrid; margin:0 auto}

.tinyCell {margin:.1vw;}
.tinyCell.ignore {background-color:#222222}

#newRule {color:white; margin:1vw; height:5vw; text-align:center; opacity:0.8; transition:opacity 0.1s; border-width:5px; border-style:dashed; border-color:#333333}
#newRule:hover {opacity:1}

#ruleUI {position:absolute; width:40vw; margin-left:10vw; margin-top:5vw; display:grid; background-color:#222222; opacity:0.8; grid-template-columns: 45% 10% 45%; grid-template-rows: 20% 60% 20%; grid-template-areas: "tools tools tools" "fromGrid midArrow toGrid" "saveRule saveRule saveRule"; z-index:200}
.ruleEdit {}

.theArrow {width:100%; margin:-left:auto; margin-right:auto; margin-top:auto; margin-bottom:auto}

#ruleResizers {grid-area:tools; text-align:center}
#ruleResizers img {margin:1vw; height:50%; aspect-ratio:1 / 1; opacity:0.75}
#ruleResizers img:hover {opacity:1}
#apply {grid-area:saveRule; color:white; padding-left:1vw; padding-right:1vw; padding-bottom:1vw; padding-top:4vw; text-align:center}

button {background:none; border-width:3px; border-style:solid; border-color:white; margin:1vw; color:white; padding:.5vw; font-size:12pt; opacity:0.75}

input {background:none; border-width:3px; border-style:solid; border-color:white; margin:1vw; color:white; padding:.5vw; font-size:12pt}

input[type=submit] {opacity:0.75}
input[type=submit]:hover {opacity:1}

button:hover {opacity:1}
#from {grid-area:fromGrid; margin:0 auto}
#to {grid-area:toGrid; margin:0 auto}

.ruleSetupCell {display:block; margin:2px; padding:0; position:relative}
.ignore {background-color:black}
.require {background-color:white}

#gameBoard {border-width:3px; border-style:solid; margin:0 auto; padding:0; width:auto; height:auto; table-layout:fixed; background-color:black}
#gameHolder {grid-area:board; margin:0; padding:0; display:table}

.cell {display:block; margin:0; padding:0; border:none; position:relative}
    .null {background-color:black}
    .moves {box-shadow:inset 0px 0px 5px lightgray; background-color:black}
    .moves:hover {box-shadow:inset 0px 0px 10px lightgray}




    .p {background-color:purple; box-shadow:inset 0px 0px 5px black}
        .p:hover {box-shadow:none}
    .g {background-color:green; box-shadow:inset 0px 0px 5px black}
        .g:hover {box-shadow:none}
    .active {box-shadow:none}


tr {margin:0; padding:0; border-spacing:0px}
td {margin:0; padding:0; border-spacing:0px}



/*transition classes*/
        .ptog {animation-name:ptogFrames; animation-duration:.5s; width:100%; height:100%; box-shadow:inset 0px 0px 5px black}
            @keyframes ptogFrames {
                from {background-color:purple}
                to {background-color:green}
            }
        .ptonull {animation-name:ptonullFrames; animation-duration:.5s; width:100%; height:100%; box-shadow:inset 0px 0px 5px black}
            @keyframes ptonullFrames {
                from {background-color:purple}
                to {background-color:black}
            }
        .gtop {animation-name:gtopFrames; animation-duration:.5s; width:100%; height:100%; box-shadow:inset 0px 0px 5px black}
            @keyframes gtopFrames {
                from {background-color:green}
                to {background-color:purple}
            }
        .gtonull {animation-name:gtonullFrames; animation-duration:.5s; width:100%; height:100%; box-shadow:inset 0px 0px 5px black}
            @keyframes gtonullFrames {
                from {background-color:green}
                to {background-color:black}
            }
        .nulltop {animation-name:nulltopFrames; animation-duration:.5s; width:100%; height:100%; box-shadow:inset 0px 0px 5px black}
            @keyframes nulltopFrames {
                from {background-color:black}
                to {background-color:purple}
            }
        .nulltog {animation-name:nulltogFrames; animation-duration:.5s; width:100%; height:100%; box-shadow:inset 0px 0px 5px black}
            @keyframes nulltogFrames {
                from {background-color:black}
                to {background-color:green}
            }



/*Self-destructing animation cells*/
        .deselect {width:100%; height:100%; background-color:black; animation-name:deselectFrames; animation-duration:.5s}
            @keyframes deselectFrames {
                from {box-shadow:inset 0px 0px 5px lightgray}
                to {box-shadow:inset 0px 0px 0px lightgray}                
            }

        .gUp {width:100%; height:100%; background-color:green; position:absolute; animation:gUpFrames; animation-duration:.5s; box-shadow:inset 0px 0px 5px black; z-index:100}
            @keyframes gUpFrames {
                from {bottom:0%}
                to {bottom:103%}
            }
        .gDown {width:100%; height:100%; background-color:green; position:absolute; animation:gDownFrames; animation-duration:.5s; box-shadow:inset 0px 0px 5px black; z-index:100}
            @keyframes gDownFrames {
                from {top:0%}
                to {top:103%}
            }
        .gLeft {width:100%; height:100%; background-color:green; position:absolute; animation:gLeftFrames; animation-duration:.5s; box-shadow:inset 0px 0px 5px black; z-index:100}
            @keyframes gLeftFrames {
                from {right:0%}
                to {right:103%}
            }
        .gRight {width:100%; height:100%; background-color:green; position:absolute; animation:gRightFrames; animation-duration:.5s; box-shadow:inset 0px 0px 5px black; z-index:100}
            @keyframes gRightFrames {
                from {left:0%}
                to {left:103%}
            }

        .pUp {width:100%; height:100%; background-color:purple; position:absolute; animation:pUpFrames; animation-duration:.5s; box-shadow:inset 0px 0px 5px black; z-index:100}
            @keyframes pUpFrames {
                from {bottom:0%}
                to {bottom:103%}
            }
        .pDown {width:100%; height:100%; background-color:purple; position:absolute; animation:pDownFrames; animation-duration:.5s; box-shadow:inset 0px 0px 5px black; z-index:100}
            @keyframes pDownFrames {
                from {top:0%}
                to {top:103%}
            }
        .pLeft {width:100%; height:100%; background-color:purple; position:absolute; animation:pLeftFrames; animation-duration:.5s; box-shadow:inset 0px 0px 5px black; z-index:100}
            @keyframes pLeftFrames {
                from {right:0%}
                to {right:103%}
            }
        .pRight {width:100%; height:100%; background-color:purple; position:absolute; animation:pRightFrames; animation-duration:.5s; box-shadow:inset 0px 0px 5px black; z-index:100}
            @keyframes pRightFrames {
                from {left:0%}
                to {left:103%}
            }

@media only screen and (max-width:1000px) {
    
    #container {grid-template-areas:'board' 'rules'; grid-template-columns:100%}
    #ruleUI {width:80vw}
    #ruleSet {width:60vw; margin-top:10vw}
    #ruleSheet {width:60vw}
    #newRule {height:10vw}
    .ruleBanner {width:60vw}
}