/*
							CSS for Tesseract Game
*/
* {margin:0; padding:0; }
@font-face {
    font-family: 'Francis';
    src: url('franciscolucas.briosa.ttf'); 
}
.clear {clear:both; }
body {background-image: radial-gradient(#f2f0f4, #f2f0f4 33%, #d9d2df ); 
background-image: -moz-radial-gradient (#f2f0f4, #f2f0f4 33%, #d9d2df ); }

#top-left {display:inline-block; position:absolute; left:6px; top:0px; font-size:1.5em; }
#top-left > a {text-decoration:none; }
#return {font-family: 'Andale Mono', 'Courier New', monospace; font-size:48px;}
h1,h2,h3,h4 {color:blue; }
#top-left > a {text-decoration:none; }
#boardHeading {font-family: 'Francis'; padding-top:6px; font-size:5rem; color:blue; text-shadow:2px 2px 3px White; }
.red {color:red; } .green {color:green; } .blue {color:blue; }
.left {text-align:left; } .bitBigger {font-size:1.2rem; }

#main {width:100%; margin:0; padding:0; text-align:center; }
#screen {position:relative; margin:0 auto; padding:0; 
width:98vw; height:98vh; text-align:center; color:#444; }
.maxWidth {margin:6px auto; max-width:600px; }
.oneLine {display:flex; justify-content:space-between; align-items:flex-start; }
#workingMsg {font-size:1.3rem; text-align:center; }
#warnings {margin:3px 0 0 12px; color:red; font-size:1.2rem; text-align:left; }
#notYet {font-size:1.5rem; color:red;}
#scoreboard {text-align:center; font-size:3rem; font-weight:bold; margin:-10px 0 0 0; }
#board {display:inline-block; margin:0 auto 0 auto; text-align:center; 
padding-bottom:32px; block-size:fit-content; }
.outsideGrid {
	margin:12px;
	display:grid;
	gap: 3%;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
}
.outsideGrid > div {display: grid; place-items: center; }
.insideGrid {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
}
.insideGrid > img {width: 100%; height: auto; }

/* The following are set from within Javascript functions */
.newGame {color :red; text-shadow: 2px 2px 0 yellow; }
.p1Score {color:#F56969; }  	/* P1's score */  
.scoreSep {color:#777; }		/* Separator between scores (colon) */
.p2Score {color:#4AA948; } 		/* P2's score 5AC864*/
.gameOverMsg {color :red; text-shadow: 1px 1px 2px black; font-size:2rem; }
/* End of classes set from within Javascript functions */

.lowerLeft {width:30%; text-align:left; }
.lowerRight {width:30%; text-align:right; }
#Easier {width:1.5em; height:1.5em; vertical-align: middle; accent-color: blue; margin-left:8px; }
#newScore {font-size:1.8rem; font-weight:bold; }
#newButton {margin-right:12px; }
#newButton button {padding:2px 12px 4px 12px;}
button {font-size:1.2rem; color:Blue; background:#eee; padding:3px 12px; border-radius:10px; }
.js-msg {font-size:1.5em; color: red; }

.info { position:absolute; bottom:10px; right:18px; text-align:right; }
.powered { position:absolute; bottom:10px; left:18px; text-align:left; }
.powered a { font-size:0.8rem; color:darkViolet; text-decoration:none; }
.powered a:hover {color:deepPink; }

/* For the ./stats/index.php */
body.stats { background:white; color:blue; }
div.stats-area { margin-left:10%; margin-top:28px; margin-bottom:48px; text-align:left; }
h2.hits { font-size:2em; color:#099; margin-bottom:18px; }

/* End */