@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap');

* {
  background-color:#38191F;
  box-sizing:border-box;
}

body {
  margin:0;
}

container {
  max-width: 960px;
  margin: 0 auto;
}

/* header */
h1 {
  font-family:'Caveat Brush', sans-serif;
  color:#D8A48F;
  text-align: center;
  text-transform: uppercase;
  font-size:70px;
  margin: 5px 0;
}

/* result part */
.record {
  display:block;
  padding: 0 20px;
  position:relative;
  text-align:left;
}

#record1, #record2, #result {
  display:inline-block;
  margin:0;
  font-family:'Caveat Brush', sans-serif;
  font-size:40px;
}

#record1, #record2 {
  color:#A53F2B;
}

#record2 {
  position:absolute;
  right:20px;
}

#result {
  position:absolute;
  left:43%;
  color:#FBFFB9;
}

/* styling the game board */
#board {
  width: 100%;
  height: 100%;
  display:grid;
  justify-content:center;
  align-content:center;
  grid-template-columns:repeat(3,auto);
  grid-template-rows:repeat(3,auto);
  padding: 20px 0;
}

.cell {
  width: 140px;
  height: 140px;
  border: 3px solid #C7CCDB;
  justify-content:center;
}

.cell:first-child, .cell:nth-child(2), .cell:nth-child(3) {
  border-top:none;
}
.cell:nth-child(3n+1) {
  border-left:none;
}
.cell:nth-child(3n) {
  border-right:none;
}
.cell:nth-child(7), .cell:nth-child(8), .cell:nth-child(9) {
  border-bottom:none;
}

/* make the letter token */
.cell p {
  display: none;
}

.cell.X > *:first-child{
  display:block;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 135px;
  font-size: 60px;
  color:white;
  text-align: center;
  margin:0 0;
}

.cell.O > *:nth-child(2){
  display:block;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 135px;
  font-size:60px;
  color: white;
  text-align:center;
  margin:0 0;
}

/* make the icon token */
.cell.sun {
  background-image: url('./images/sun.png');
  background-size:50%;
  background-repeat:no-repeat;
  background-position: center center;
}

.cell.moon {
  background-image: url('./images/moon.png');
  background-size:50%;
  background-repeat:no-repeat;
  background-position: center center;
}

/* restart button */
.restart {
  position:relative;
  width:88%;
}

#restart {
  display:block;
  position:absolute;
  left:50%;
  width:150px;
  height:50px;
  background-color: #A53F2B;
  font-family:'Caveat Brush', sans-serif;
  font-size: 25px;
  color:#C7CCDB;
  border:none;
  margin-top: 10px;
}