/* Imported Stuff */
/* 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;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
.text-focus-in {-webkit-animation: text-focus-in 500ms both; animation: text-focus-in 500ms both;}/* * Generated by Animista on 2022-2-14 10:47:37 * Licensed under FreeBSD License. * See http://animista.net/license for more info.  * w: http://animista.net, t: @cssanimista *  *//** *  * animation text-focus-in *  */ @-webkit-keyframes text-focus-in {    0% {       opacity: 0;    }    100% {       opacity: 1;    }  }  @keyframes text-focus-in {    0% { opacity: 0;    }    100% {   opacity: 1;    }  }

/* Global Styles */
:root{
  --pageWidth: 300px;
  --mainColor: #000000;
  --secondaryColor: rgb(240, 240, 240);
  --whiteColor: white;
  --fontSmall: 16px;
  --fontMedium: 20px;
  --fontLarge: 40px
  }
  body{
    font-family: 'Calibri';
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  

  /* Message Box */
  #gameLogButton{
    font-size: var(--fontMedium);
    margin: 0px;
    margin-top: 20px;
    padding: 5px;
    width:var(--pageWidth);
    background-color: var(--mainColor);
    color: var(--whiteColor);
  }
  #gameLog{
    height: 120px;
    width: var(--pageWidth);
    padding: 2.5px;
    overflow-y: scroll;
    background-color: var(--secondaryColor);
    border: 2px solid var(--mainColor);
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
  }
  .gameLogMessage{
    margin: 5px 10px 5px 10px;
    opacity:1;
    font-size: var(--fontSmall);
    -webkit-transition: opacity 3s;
    -moz-transition: opacity 3s;     
    transition: opacity 3s; 
    color: var(--mainColor);
  }
  

  /* Gameboard */
  #gameboard{
  width: var(--pageWidth);
    height: var(--pageWidth);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .gameboardCell{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: 1px solid var(--mainColor);
    font-size: 60px;
    color: var(--mainColor);
    user-select: none;
    margin-bottom: -1px;
    margin-right: -1px;
  }
  .gameboardCellUsed{
    background-color: var(--secondaryColor);
  }
  .winnerCell{
    animation: text-focus-in 500ms both;
    background-color: var(--mainColor);
    color:var(--secondaryColor);
    border: 1px solid var(--secondaryColor);
  }


  /* Player Styles */
  #players{
    width: var(--pageWidth);
    margin: 10px;
    color: var(--mainColor);
  }
  #playerOne, #playerTwo{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .player_symbol{
    text-align: center;
    font-size: var(--fontLarge);
    padding: 10px;
  }
  #playerOneName, #playerTwoName, #playerOneScore, #playerTwoScore{
  border: none;
  font-size: var(--fontMedium);
  font-family: "Calibri";
  color: var(--mainColor);
  } 


  /* About Section */
  #about{
    display: flex;
    width: var(--pageWidth);
    margin-top: 30px;
  }
  .aboutButton{
    text-align: center;
    width: 50%;
    padding: 5px;
    background-color: var(--mainColor);
    color: var(--secondaryColor);
    text-decoration: none;
  }