/* Variables for border color and such. */
:root {
	--tmpl-border-color: #D3D6DA;
	--tmpl-hotbar-img-dimension: 32px;
	--tmpl-header-margins: 24px;
	--tmpl-playspace-box-gaps: 5px;
}

/* Custom font-face to match the reference
   Reference appeared to use Rude 'Slab Condensed Condensed Extrabold', 
   but I don't have that on hand so using this knockoff from google fonts. */
@font-face {
	font-display: swap;
	font-family: 'Alfa Slab';
	font-weight: 300;
	src: url('../font/alfa-slab-one-v20-latin-regular.woff2') format('woff2');
}

/* Remove the margin from the body. */
/* We also need to set the entire body as flex so we can easily place the 
   kboard element at the bottom */
body {
	margin: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* HEADER / NAV / TITLE */

/* Uses flex to position all children at start/end and center. */
div.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: solid 1px var(--tmpl-border-color);
	height: 76px;
	box-sizing: border-box;
}

/* Wordle Title,
   custom font and some scaling to match Rude Slab Condensed from reference. */
div.header h1.title {
	margin: 0;
	font-size: 26pt;
	font-family: 'Alfa Slab', sans-serif;
	transform: scaleX(0.8);
}

/* Header Hamburger Menu
   Sets display flex for the actual lines,
   Margin-right is set to help center the title a little better and match
   the size of the hotbar. */
div.header div.hamburger {
	display: flex;
	flex-direction: column;
	margin-left: var(--tmpl-header-margins);
	margin-right: 128px;
	cursor: pointer;
}

/* Hamburger div components with rounded corners */
div.header div.hamburger div{
	box-sizing: border-box;
	width: 26px;
	height: 4px;
	margin: 2px 0;
	border: solid 2px black;
	border-radius: 8px;
	background-color: black;
}

/* Setting height explicitly so all flexbox items stay visually centered vertically */
div.header div.hotbar, div.header div.hotbar a, div.header div.hotbar a img{
	height: var(--tmpl-hotbar-img-dimension);
}
/* Margin for the entire hotbar element from the right of the page. */
div.header div.hotbar {
	margin-right: var(--tmpl-header-margins);
}
/* Puts some margin between the hotbar images. */
div.header div.hotbar a img {
	margin-left: 8px;
}

/* MAIN CONTENT AREA */

/* Sets the main content area to fill entire page.
   Also sets display to flex so we can position children better. */
div.content {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/* Playspace is a flex container used to display the rows in column form
   It also centers all the content vertically and horizontally.
   Additional gap, height, and margin properties to match reference. */
div.playspace {
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: var(--tmpl-playspace-box-gaps);
	height: 100%;
	margin: 8px 0;
}
/* row container to contain cells and display in flex row style.
   Gap from variable and matches parent flex. */
div.playspace div.row {
	display: flex;
	gap: var(--tmpl-playspace-box-gaps);
}
/* Sets wordle cell size and border. */
div.playspace div.row div.cell {
	height: 64px;
	width: 64px;
	box-sizing: border-box;
	border: 2px solid var(--tmpl-border-color);
}

/* KEYBOARD */

/* kboad div selector,
   Add margin to prevent us from abutting the bottom of the page.
   Flex is used to display the keyboard kcap rows in column format.
   Flex is also used to add row gaps, align the items to be centered. 
   Font is also set here to a sans-serif font.*/
div.kboard {
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: var(--tmpl-playspace-box-gaps);
	font-family: sans-serif;
}
/* Row div selector, uses flex to organize and provide gap between cells/columns */
div.kboard div.row {
	display: flex;
	gap: var(--tmpl-playspace-box-gaps);
}
/* kcap div styling
   Uses flex (again) to center the text horizontally and vertically.
   Sets a fixed height/width of the div, background color, and our desired border radius
   Also removes selecting text, changes to a pointer, and transforms the text to uppercase.  */
div.kboard div.row div.kcap {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 64px;
	width: 46px;
	background-color: var(--tmpl-border-color);
	font-weight: bold;
	border-radius: 6px;
	text-transform: uppercase;
	font-size: 11pt;
	user-select: none;
	cursor: pointer;
}
/* Special case for when we want slightly wider kcap, such as enter and backspace.
   This could be achieved with padding but set sizing was easier to match reference. */
div.kboard div.row div.kcap.special {
	width: 69px;
}