@import url('https://fonts.googleapis.com/css2?family=Goldman:wght@700&family=Russo+One&display=swap');

header {
    position: relative;
}

header > h1{

    font-size: 50px;
    text-align: center;
    top: 10px;
    color: #ff6600;
    font-family: Goldman;
}

#gameBoard {

    display:grid;
    grid-template-columns: auto auto auto auto;
    gap: 2px;
   
    margin: auto auto;
    width: 700px;
    height: 700px;
  
}


.square {

    border: 2px solid white;
    border-radius: 25px;
    width: 175px;
    height: 175px; 
    background-color: #00ccff;

}

#credit {
    font-size: 10px;
    position: absolute;
    right: 1%;
    bottom: 0%;
}
/* create a keyframe that changes the color from current to another
    create the animation within this key frame
 */