@import url('https://fonts.googleapis.com/css2?family=Play:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

.main-body{
    display:flex;
    align-items: center;
}

body {
  align-items: center;
  background: white;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  padding: 25px;
  width: 100%;
}

h2 {
  text-transform: uppercase;
  text-align: center;
  font-size:22px;
}

.controls{
    margin-left:30px;
    margin-top:85px;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /*you need to specific columns or else only top row will fill the grid as there is no specificied columns so it auto treats the grid as only having 1 column of 700px and hence only the top row will fill up. */
  grid-template-rows: repeat(7, 1fr);
  height: 700px;
  margin: 10px 0 25px;
  width: 700px;
}

.cell {
  align-items: center;
  background: #3284DA;
  display: flex;
  height: 100px;
  justify-content: center;
  width: 100px;
}

.cell::after {
  background: white;
  border-radius: 50%;
  border: 3px solid black;
  content: '';
  cursor: pointer;
  height: 75px;
  width: 75px; /*pseudo elements are like disowned children, they get all the attributes of the parents  so you can still style them but they are not  technically considered the children. so pseudo nth child properties dont work on them. think of it as adding a child div to the main div but that div inherits but is not technically considered a child div.*/
}

.cell.black::after{
    background-color:black;
}

.cell.black:not(.row-top).red.win {
  background: red;
}

.cell.black:not(.row-top).yellow.win {
  background: yellow;
}

.cell.grey{
    background-color:#767676;
}

.cell:not(.row-top).red::after {
  background: red;
}
.cell:not(.row-top).yellow::after {
  background: yellow;
}

.cell:not(.row-top).red.win {
  background: red;
}

.cell:not(.row-top).yellow.win {
  background: yellow;
}

.cell.row-top {
  background: white;
}

.cell.row-top::after {
  border: none;
}

.cell.row-top.red::after {
  background: red;
  border: 3px solid black;
  opacity:0.3;
}

.cell.row-top.yellow::after {
  background: yellow;
  border: 3px solid black;
  opacity:0.3;
}

.footer {
  align-items: left;
  display: flex;
  justify-content: space-between;
  flex-direction:column;
  width: 200px;
  margin-bottom:30px;
  text-align:center;
}

.misc{
    align-items: left;
  display: flex;
  justify-content: space-between;
  width: 200px;
  flex-direction:column;
  text-align:center;
}

.dark, .ai, .multi, .adjustU,.adjustD {
  background-color: #3284DA;
  border-radius: 5px;
  border: none;
  color: white;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 30px;
  text-transform: uppercase;
}

.reset, .undo {
  background-color: #3284DA;
  border-radius: 5px;
  border: none;
  color: white;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 30px;
  text-transform: uppercase;
}

button:hover {
  background-color: #1D50F1;
}

button:active {
  background-color: #4d7ef1;

}

button.black {
    background-color:#767676;
    font-family:"Play",sans-serif;
    color:black;
}

button.black:hover {
  background-color: #333333;
}

button.black:active {
  background-color: #030303;

}

button{
    margin:10px;
}


.status,.diff {
  display: block;
  font-size: 24px;
  font-family:"Play",sans-serif;
  width:180px;
  position:relative;
  left:10px;
}

/* CSS for styling the sides. and rounded corners */
.left-border {
  border-left: 3px solid black;
}

.top-border {
  border-top: 3px solid black;
}

.right-border {
  border-right: 3px solid black;
}

.bottom-border {
  border-bottom: 3px solid black;
}

.left-border.top-border {
  border-radius: 10px 0 0 0;
}

.right-border.top-border {
  border-radius: 0 10px 0 0;
}

.right-border.bottom-border {
  border-radius: 0 0 10px 0;
}

.left-border.bottom-border {
  border-radius: 0 0 0 10px;
}

.instruct{
    display:block;
    width:1000px;
    text-align:center;
    font-size:48px;
    font-family: 'Bangers', cursive;
    color:#E7CA00;
    position:relative;
    left:-600px;
    bottom:500px;
      transform: rotate(-90deg);
}


.undo.disable, .undo.black.disable{
    background-color:#EA412C;
    cursor:not-allowed;
}

.ai.enable, .multi.enable,.dark.enable{
    background-color:#009703;
}



.status{
    animation-name: example;
    animation-delay: 0s;
  animation-duration: 0.5s;
  animation-iteration-count:999
}

@keyframes example {
  0%   {opacity:1;}
  50%  {opacity:0;}
  100% {opacity:1;}
}

.diff{
    color:red;
}