/* everything in the body that has text will be in the middle and the background will be lightgreen */
body {
    background-image: url('https://media.istockphoto.com/id/1055107170/vector/retro-80s-futuristic-design-neon-sunset-background-with-laser-grids.jpg?s=612x612&w=0&k=20&c=bEfL325vNGKnvlzGenRCpyY837bO-Zo9y9mmm-Fg7M0=');
    text-align: center;
}

/* puts my h1 tag centered and changes font */
h1 {
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    /* puts a line under the h1 across the entire page */
    border-bottom: 2px solid white;
    color: white;
    border-top: 2px solid white;

/* animation for color change of my h1 */
    animation: color-change 2s infinite; }

/* changes the color of my h1 back and forth from red and yellow */
    @keyframes color-change {
        50% { color: red }
        100% {color: yellow}
}

 /* this allows me to create my entire grid */
.grid {
    border: 3px solid white;
    height: 480px;
    width: 560px;
    display: flex;
/* the flex-wrap allows all my divs to wrap in my grid */
    flex-wrap: wrap;
/* margin auto allows my grid to be in the middle of the page */
    margin: auto;
}


/* used .gird div because it grabs all the divs inside the grid */
.grid div {
    height: 80px;
    width: 80px;
}

/* when you hover over an option that a player can choose from you get the color below */
.grid div:hover{
    background-color: white;
    border-radius: 40px;
}

/* player one connect four color */
/* used 40px because the height and width of the divs in the grid were 80, halfing it creates the circle */
.player-one {
    background-color: red;
    border-radius: 40px;
}

/* player two connect four color */
/* same as above using 40px due to the grid being 80px, cutting it in half allows for the player's color of choice to be circles */
.player-two {
    background-color: yellow;
    border-radius: 40px;
}

h2 {
    color: white;
    animation: color-change 5s infinite; }

    /* changes the color of my h1 back and forth from red and yellow */
        @keyframes color-change {
            50% { color: yellow }
            100% {color: red}
    }

h4 {
    color: white;
}

.results {
    color: white;
}