@charset "UTF-8";


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, ol, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: Verdana;
}
body {
}

html {    
	background-color: #eee;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#wrapper {
	max-width:500px;
	margin: 0 auto;
	height:100vh;
	background-color:#fff;
}

#main {
	font-size:1em;
	margin:0;
	margin-top:0px;
	padding:4em 1em 1em 1em;
	background-color:#ffffff;
	background-position:top right;background-repeat:no-repeat;
	text-align:center;
}

.navbar {
  background-color: #eee;
  position:fixed;
  max-width:500px;
  width:100%;
  padding:0.5em 0em ;
  border-bottom:1px solid;
}

.navbar #shortcuts {
	float:right;
	margin:0.5em 0.5em 0 0;
}

.navbar #shortcuts a {
	padding-left:1em;
}

#keyboard_holder {
	position:fixed;
	bottom:0;
	/* border-top:2px solid; */
	width:100%;
	max-width:500px;
	padding:0em;
	text-align:center;
	/* background-color: #eee; */
}

#keyboard_holder input {
	font-size:2em;
	text-align:center;
	width:80%;
	border-radius:0.25em;
}

#gamearea {
	width:10em;
	height:10em;
	position:relative;
	margin:auto;
}

#msg_div {
	margin:0.5em;
	border:1px dotted #aaa;
	padding:0.25em;
	font-size:0.9em;
}
.minitile {
	float:left;
	width:1.5em;
	height:1.5em;
	background-color:#fff;
	border-radius:0.25em;
	border:1px solid;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:0.1em;
}

.miniletter {
	font-size:1em;
}

.oldguess {
	overflow:hidden;
}

.tile {
	position:absolute;
	width:1.75em;
	height:1.75em;
	background-color:#aaa;
	border-radius:0.5em;
	border:1px solid #000;
	display:flex;
	justify-content:center;
	align-items:center;
}

.tile .letter {
	font-size:1.25em;
}

.active {
	background-color:white;
}


.green {
	background-color:lightgreen;
}

.yellow {
	background-color:yellow;
}

.gray {
	background-color:#bbb;
}

.tile.row1 {
	top:0em;
}

.tile.row2 {
	top:2em;
}

.tile.row3 {
	top:4em;
}

.tile.row4 {
	top:6em;
}

.tile.row5 {
	top:8em;
}

.tile.col1 {
	left:0em;
}

.tile.col2 {
	left:2em;
}

.tile.col3 {
	left:4em;
}

.tile.col4 {
	left:6em;
}

.tile.col5 {
	left:8em;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100vh; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin:10vw auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #000000;
    width: 80vw; /* Could be more or less, depending on screen size */
	max-width:400px;
	font-size:80%;
}

.btn_small {
	background-color: #888;
	border: none;
	color: white;
	padding: 0.25em 0.5em 0.25em 0.5em;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1em;
	margin: 2px 1px;
	border-style:outset;
	border-radius:0.5em;
}