@font-face {
	font-display: swap;
	font-family: 'Urbanist';
	font-style: normal;
	font-weight: 400;
	src: url('../font/urbanist-v17-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Urbanist';
	font-style: normal;
	font-weight: 500;
	src: url('../font/urbanist-v17-latin-500.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Urbanist';
	font-style: normal;
	font-weight: 700;
	src: url('../font/urbanist-v17-latin-700.woff2') format('woff2');
}



/* Reused variables for color, border styles, and font. */
:root {
	--border-style: 4px double #f1f1f1b3;
	--border-style-inside: 2px groove black;
	--bg-color: rgba(0, 0, 0, 0.55);
	--font-urbanist: 'Urbanist', sans-serif;
}

/* Remove margin and set our background. */
body {
	margin: 0;
	background-image: url("../img/webb-dark.png");
	color: #f1f1f1
}

/* Main, sets a fixed width and height.
   Sets margin, and displays its children in flex column. 
   Another background is also set.*/
body main {
	width: 900px;
	height: 850px;
	margin: 40px auto;
	margin-bottom: 0;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-direction: column;
	padding: 0.70em 1em;
	border: var(--border-style);
	border-radius: 12px;
	background-image: url("../img/bg.png");
}

/* Header that contains the game name and round state display.
   Contents are flex center in column mode. */
div.header {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
}

/* Game title, custom font, small-caps, and a border on the bottom. */
h1.title {
	font-family: var(--font-urbanist);
	font-weight: bold;
	font-variant: small-caps;
	margin-bottom: 0.125em;
	margin-top: 0.125em;
}

div.header div.title-line {
	border-bottom: 1px dashed rgb(159, 159, 159);
	width: 250px;
}

/* Round state display, custom font and small-caps. */
h2#state {
	font-family: var(--font-urbanist);
	font-variant: small-caps;
}

/* Columns with our player input, playspace, and high score.
   Flex is used to keep everything aligned at the top and even spacing. */
main div.columns {
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-direction: row;
	column-gap: 1em;
}


/* Player Name Entry */

/* User Entry Text, aligns text center and custom font. */
form#user-entry div h4 {
	font-family: var(--font-urbanist);
	text-align: center;
}
/* Container for the player input form, sets size, and border to hold contents. */
div.columns div.form-container {
	background-color: var(--bg-color);
	width: 200px;
	height: min-content;
	padding: 1em;
	box-sizing: border-box;
	border: var(--border-style-inside);
}

/* Give form fields a heavier font weight and custom font, align them centered. */
form#user-entry div div.fields {
	font-weight: 500;
	font-family: var(--font-urbanist);
	text-align: center;
}

/* Gives the input fields slight seperation from eachother with a margin. */
form#user-entry div div.fields div {
	margin-top: 1em;
}

/* Button container, gives some padding between the text entry and reset btn. */
div#buttons {
	padding-top: 1em;
	text-align: center;
}

/* Make the game restart button larger, sets custom font and heavier weight. */
input#restart {
	visibility: hidden;
	font-family: var(--font-urbanist);
	font-size: 14pt;
	font-weight: 500;
}

/* Hides our form submit button. */
input#submit {
	display: none;
}

/* Sets all divs in the column to have rounded corners. */
div.columns > div {
	border-radius: 6px;
}


/* Playspace Styling */

/* Main playspace container, fade background a bit and add padding.
   Height is set to min-content to avoid growing the same size as high score. */
div.playspace {
	padding: 1em;
	background-color: var(--bg-color);
	border: var(--border-style-inside);
	height: min-content;
}

/* Board with grid display to hold cells. */
div.playspace div.board {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

/* Board cells, set height and width with border. */
div.playspace div.board div.cell {
	width: 128px;
	height: 128px;
	border: 1px solid #f1f1f1;
}

/* Cell contents color for X */
div.board div.cell div.blue {
	color: #3e5bc4;
}

/* Cell contents color for O */
div.board div.cell div.red {
	color: #FF7E39;
}

/* Gives the cell content a monospaced font, sets the height to look centered
   Uses flex to center, removes user selecting, and sets the font size.*/
div.cell > div {
	font-family: monospace;
	height: 92%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 84pt;
	user-select: none;
	line-height: 0pt;
}

/* Removes the border on the TOP of the grid cells. */
div.playspace div.board div.cell:nth-child(-n+3) {
	border-top: 1px solid transparent;
}
/* Removes the border on the BOTTOM of the grid cells. */
div.playspace div.board div.cell:nth-child(n+7) {
	border-bottom: 1px solid transparent;
}
/* Removes the border on the RIGHt of the grid cells. */
div.playspace div.board div.cell:nth-child(3n) {
	border-right: 1px solid transparent;
}
/* Removes the border on the LEFT of the grid cells. */
div.playspace div.board div.cell:nth-child(3n-2) {
	border-left: 1px solid transparent;
}


/* High Score styling */

/* Sets the sizing for the high-score container, padding, and border. */
div.columns div#high-scores {
	background-color: var(--bg-color);
	width: 200px;
	height: 725px;
	padding: 1em;
	box-sizing: border-box;
	border: var(--border-style-inside);
}

/* high score title text, align center and use urbanist font. */
div#high-scores h4 {
	text-align: center;
	font-family: var(--font-urbanist);
}

/* Add a border and set the padding/margin for our score line item.
   hide the overflow if they have a super long name.*/
div#score-list div.score-line {
	padding: 0.5em 0;
	border: 1px solid #f1f1f1b3;
	margin-top: 0.5em;
	box-sizing: border-box;
	overflow: hidden;
}

/* Give the top score a little flare with a gold border and glow. */
div#score-list div.score-line:first-child {
	border-color: #efd050;
	animation: pulse linear 2s infinite;
}


/* Style the high scure username as Urbanist */
div#score-list div.score-line h5 {
	font-family: var(--font-urbanist);
	text-align: center;
	width: max-content;
	max-width: 100%;
	margin: 0.5em auto;
	margin-top: 0;
}

/* Flex the score div so children elements are spaced evenly. */
div#score-list div.score-line div.scores {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	width: 50%;
	max-width: 100%;
	margin: 0 auto;
}

/* Score type (win/tie) font and reduced margin. */
div#score-list div.score-line div.scores h6 {
	font-family: var(--font-urbanist);
	margin: 0.25em 0;
}

/* Score value font and slightly higher font weight. modified margins. */
div#score-list div.score-line div.scores div.score-column p {
	font-family: var(--font-urbanist);
	font-weight: 500;
	text-align: center;
	margin: 0.5em 0;
	margin-bottom: 0em;
}

/* Animation frames for our pulsing top score. */
@keyframes pulse {
	0%   {box-shadow: 0px 0px 4px 4px #efd05014;}
	50%  {box-shadow: 0px 0px 6px 6px #efcf5079;}
	100% {box-shadow: 0px 0px 4px 4px #efd05014;}

}