/* Cosmetics */
body { font-family: Candara, sans-serif; background: #80cfff; scrollbar-color: #80cfff #ffff99 }
#content { background: #ffffff }
.toast { background: #ffff66 }
td { background: #44bbff; border: 1vh outset #55ccff; user-select: none; cursor: pointer }
td.selected { background: #404bdd; color: #ffffff; border: 1vh inset #404bdd }
a:link { color: #404bdd }
a:visited { color: #404bdd }
a:hover { color: #404bdd }
a:active { color: #ffff00 }
a.selected { color: #000000 }


/* All Layout */
body { margin: 0 }
img { height: 10vh }
#content { display: grid; height: 100vh; width: 100vh; padding-left: 2%; padding-right: 2%; margin-top: 0; padding-top: 0; margin:auto; font-size: 3vh }
#title { font-size: 8vh }
#header { height: 10vh; align-items: top; display: flex }
#display { height: 80vh }
#footer { height: 10vh; font-size: 2vh; display: flex; align-items: end; justify-self: center; text-align: center }


/* Game Layout */
.game { display: grid; font-size: 4vh; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: .5fr 3.5fr .7fr 1.3fr }
.tiles { grid-row: span 2; padding: 2% }
.found { grid-column: span 2; font-size: 2vh; height: 88%; overflow-y: auto }
.guess { font-size: 4.5vh; border: solid black 1px; margin-top: 2%; margin-bottom: 2% }
.buttons { grid-row: 4; text-align: center }
.toast { grid-column: span 2; grid-row: span 2; text-align: center; justify-content: center; border-radius: 5%; margin: 10%; margin-top: 0; padding: 0%; display: none; align-items: center; filter: drop-shadow(.3em .3em .3em #000000) }
button { width: 35%; font-size: 4vh }
td { border-radius: 10% }
table { height: 48vh; width: 48vh; text-align: center; margin: auto }
#table12 { width: 36vh }
.tile9  { font-size: 8vh; height: 33%; width: 33% }
.tile12 { font-size: 6vh; height: 25%; width: 33% }
.tile16 { font-size: 6vh; height: 25%; width: 25% }


/* Other Layout */
.scroller { overflow-y: auto; max-height: 80vh }
.subtitle { font-size: 6vh; padding-top: 2%; padding-bottom: 2% }
.yesterday { font-size: 4vh }