/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, 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,
dl, dt, dd, ol, ul, li,
fieldset, form, 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-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}

/* Main Styling */

:root {
  --orange: rgb(255,144,17);
  --bright-orange: rgb(255,90,13);
}

body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  background: rgb(253,225,201);
}

.page-content {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
}

.btn {
  padding: .5rem 3rem;
  border-radius: 3px;
  color: white;
  border: none;
  outline: none;
  background: #000;
  cursor: pointer;
}

.btn:hover { background: rgb(39,39,39); }

/* Header */

.page-header {
  display: flex;
  grid-column: 1 / -1;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

header > h1 {
  font-size: 3rem;
  font-weight: 700;
}

/* Player Info */

.player-info {
  font-size: 3rem;
  text-align: center;
  margin-top: 1rem;
}

.player1-info { grid-column: 1 / 4; }

.player2-info { grid-column: 8 / -1; }

.player-info p:first-child {
  display: inline-block;
  padding: .5rem .8rem;
  border-radius: 5px;
}

.player-info p:last-child { font-size: 7rem; }

.player-info p.active-player + p {
  animation-duration: 1.5s;
  animation-name: shakeit;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.5, .8, .355, 1);
}

@keyframes shakeit {
  to {
    transform: scale(.9);
  }
}

.active-player { background: var(--bright-orange); }

/*Board*/

.board {
  grid-column: 4 / -4;
  grid-row: 2 / -2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 15px;
  background: #000;
}

.square {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5em;
  background: var(--orange);
  cursor: pointer;
}

.winner-square { background: var(--bright-orange); }

.square:hover { background: rgba(255,133,33,.7); }

/* Overlay */

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(56,56,56,.9);
}

.overlay-box {
  flex-basis: auto;
  display: flex;
  flex-flow: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  padding: 4rem;
  margin: 0 15px;
  border-radius: 5px;
  box-shadow: 4px 4px 4px 4px rgb(0,0,0,.2);
  background-color: var(--bright-orange);
}

.overlay-box button {
  text-align: center;
  width: 90%;
  font-size: 1.2rem;
  padding: 1.2rem 2rem;
}

.overlay-box p { text-align: center; }

.overlay-text { font-size: 2rem; }

.overlay-secondary-text { font-size: 1.5rem; }

/* Start Game Overlay */

.startgame-overlay { display: flex; }

.close-overlay { display: none; }

/* Endgame Overlay */

.endgame-overlay { display: none; }

.open-endgame-overlay { display: flex; }


/* Form general */

form {
  padding: 5rem 5rem 2rem 5rem;
  text-align: center;
  box-shadow: 2px 2px 8px 2px rgba(0,0,0,.5);
  border-radius: 4px;
  background: var(--orange);
}

form a { display: block; }

form a:link, 
form a:visited { color: black; }

form a:active { color: white; }

form input {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  border: none;
  outline: none;
}

form legend {
  margin-bottom: .3rem;
  font-size: 1.3rem;
}

form select { font-size: 1.1rem; }

form input[type="text"] {
  padding: .8rem;
  border-radius: 3px;
}

form input:focus { box-shadow: 0 0 4px 4px rgba(0,0,0,.4); }

form input[type="submit"] {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  padding: .5rem 3rem;
} 

/* Single Player Form */

.singlePlayerForm-overlay { display: none; }

.open-singlePlayerForm-Overlay { display: flex; }

/* Two Player Form */

.twoPlayerForm-overlay { display: none; }

.open-form-overlay { display: flex; }

.close-form { display: none; }

/* Meida Queries */

@media (max-width: 900px) {
  .board { grid-column: 2 / -2; }
  
  .player1-info { grid-column: 2 / 5; }

  .player2-info { grid-column: 6 / 11; }
}

@media (max-width: 500px) {
  /* Board */
  .board { grid-row: 3 / -3; }

  /* Overlay Box */
  .overlay-box { padding: 3rem 2rem; }

  /* Player Info form */
  .player-info { font-size: 2rem; }

  .player1-info { grid-column: 1 / 5; }

  .player2-info { grid-column: 6 / 11; }

  .player-info p:last-child { font-size: 4rem; }

  /* Form */
  form { padding: 3.5rem 2.5rem 2rem 2.5rem; }

  form input[type="text"] { font-size: 1rem; }
}