/* style.css */

/* 
colors
#A3A380 olive green
#D7CE93 yellow green
#EFEBCE off white
#D8A48F peach pink
#BB8588 deep pink
#494212 green brown
*/

/* font */
@font-face {
    font-family:'Quicksand';
    src: url('font/Quicksand-Regular.eot');
	src: url('font/Quicksand-Regular.eot?#iefix') format('embedded-opentype'),
		url('font/Quicksand-Regular.woff2') format('woff2'),
		url('font/Quicksand-Regular.woff') format('woff'),
		url('font/Quicksand-Regular.svg#Quicksand-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-02C6;
}

/* remove default margin and padding */
* {
    margin: 0;
    padding: 0;
    font-family: 'Quicksand';

}

/* body style */ 
body {
    background-color: rgb(227, 235, 218); /* placeholder */
    color: #494212;
}

/* container style */
.container {
    background-color: rgb(227, 235, 218); /* placeholder */
    text-align: center;
    max-width: 1500px;
    margin: auto;
}

/* game layout style */
.game-layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
}

/* player username inputs */
.player-section {
    width: 20%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
}

input {
    padding: 0 5px;
}

#player1,
#player2 {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 25px;
}

/* game section with alert text */
.game-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* turn padding */
h2 {
    padding-bottom: 10px;
}

/* board style */
.board {
    display: grid;
    place-self: center;
    height: 500px;
    width: 500px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    border: 1px solid black;
    gap: 2px;
    padding: 2px;
    background-color: #494212; /* placeholder */
}

/* board cell style */
.cell {
    background-color: #EFEBCE; /* placeholder */
    font-size: 3rem;
    cursor: pointer;
    transition-duration: 0.4s;
}

/* cell hover default color */
.cell:hover {
    background-color: #D7CE93; 
}

/* player 1 hover color */
.board.player1-turn .cell:hover:empty {
    background-color: #A3A380; /* placeholder */
}

/* player 2 hover color */
.board.player2-turn .cell:hover:empty {
    background-color: #BB8588; /* placeholder */
}

/* new game button */
.button {
    background-color: #D8A48F; /*placeholder */
    border: none;
    border-radius: 8px;
    width: 170px;
    color: #494212; /*placeholder */
    padding: 15px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 16px;
    margin: 0 auto;
    margin-top: 10px;
    transition-duration: 0.4s;
    cursor: pointer;
}

.button:hover {
    background-color: #EFEBCE; /*placeholder */
    color: #D8A48F; /*placeholder */
    border: 2px solid #D8A48F; /*placeholder */
}

/* game alert padding */ 
.alerts {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* score tracker */
.tracker {
    margin-top: -20px;
    padding-bottom: 10px;
}