/*Colors
green - #0f0
blue - #09f
orange - #f90
magenta - #909
*/
html, body {
    background-image:url('../img/ocean.jpg');background-repeat:no-repeat;background-position:center center;background-size:cover;background-attachment:fixed;
    color:#0f0;font-family: monospace, sans-serif;font-size:100%;
    height:100%;width:100%;
    border:0;padding:0;margin:0;
}

.item1 { grid-area: header;
	text-align:center;
	line-height:1.5rem;
	vertical-align:middle;
	margin-top:10px;
}
.item1 > img{vertical-align:middle;}
.item2 { grid-area: left; }
.item3 { grid-area: main; 
		width:750px;
        display: grid; /* start of new internal grid */
		grid-template-columns: repeat(auto, 1fr);
}
.box {background-color:transparent;color:transparent;font-size:50%;overflow:hidden;border-style:solid;border-width:1px;border-color:rgba(255,255,255,.15);cursor:crosshair;}
.box:hover {border-color:rgba(0,255,0,.5);}
.miss{background-color:rgba(0,153,0,.25);cursor:not-allowed;}
.hit{background-color:rgba(204,0,0,.75);cursor:not-allowed;}
.miss:hover,.hit:hover{border-color:rgba(255,255,255,.15);}
.current-select{background-color:rgba(0,153,0,1);}
.current-select:hover{background-color:rgba(0,153,0,.9);}

.item4 { grid-area: right; }
.item5 { grid-area: footer; 
	height:2vh;
    font-style:italic;
    font-size:75%;
    text-align:center;
}
.grid-container {
	min-height:98vh;
	display: grid;
	grid-template-areas:
	'header header header'
	'left main right'
	'footer footer footer';
	justify-content:center;
	grid-gap: 0px;
	padding: 0px;
}

#live-status{
    font-size:50%;
    color:#900;
}
#left-channel,#right-channel{
    width:135px;
    text-align:center;
	margin:0 10px;
}
#player2,#player4{
	padding-top:1rem;
}
#spanP1{color:#0f0;}
#spanP2{color:#f90;}
#spanP3{color:#09f;}
#spanP4{color:#909;}
.channel-ships-img{
    height:45px;
    width:135px;
}
#modify-game{
    display:none;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    overflow-x:hidden;
    z-index:10;
}