* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    align-items: left;
    background: rgb(83, 82, 88);
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    /* padding: 15px; */
    width: 100%;
    
  }
  
  h1 {
    /* text-transform: uppercase; */
    background:rgb(83, 82, 88);
    font-family: monospace;
    font-size: 40px;
    text-shadow: 4px 4px #00aeff;


  }
  
  .game-board {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    height: 400px;
    width: 400px;

  }
  
  .cell {
    align-items: center;
    background: #9d43f1;
    display: flex;
    height: 100px;
    justify-content: center;
    width: 90px;
  }
  
  .cell::after {
    background: white;
    border-radius: 50%;
    border: 3px solid black;
    content: '';
    cursor: pointer;
    height: 60px;
    width: 60px;
  }
  
  .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;
  }
  
  .cell.row-top.yellow::after {
    background: yellow;
    border: 3px solid black;
  }
  
  .footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 600px;
  }
  
  .reset {
    background-color: #4370F1;
    border-radius: 2.5px;
    border: none;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 15px;
    text-decoration: none;
    margin: 4px 2px;
  }
  
  .reset:hover {
    background-color: #1D50F1;
  }
  
  .reset:active {
    background-color: #4d7ef1;
  
  }
  
  .status {
    display: block;
    font-size: 20px;
  }
  
  /* Util CSS */
  .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;
  }

  /* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}
.col {
    width: 6.25%; /* 60 / 960 = 0.0625 */
  }
  .container {
  display: flex;
}

.item {
  flex: 1;
}