:root {
    --block-size: 100px; 

}


body {
    margin: 0;
    padding: 0;
}
.lightmode_colors {
    --border-colors: black; 
    --p1-colors: Tomato;
    --p2-colors: skyblue;
    --win-bg: #eceff4;
    --dk-tg: lightblue;
    --win-button-bg: white;
    --win-button-bc: white; 
    --win--button-bg-hg: #d8dee9;
    --textcolor: black;
    --win-bt-tc: var(--textcolor);
    background-color: white;
}
.darkmode_colors {
    --border-colors: #d8dee9; 
    --p1-colors: #8fbcbb;
    --p2-colors: #81a1c1;
    --win-bg: #3b4252;
    --dk-tg: #88c0d0;
    --win-button-bg: #81a1c1;
    --win-button-bc: #81a1c1; 
    --textcolor: #d8dee9;
    --win--button-bg-hg: #4C566A;
    --win-bt-tc: var(--textcolor);
    background-color: #2e3440;
}
.catppuccin_macchiato_pink_colors {
    --border-colors: #1e2030; 
    --p1-colors: #f5bde6;
    --p2-colors: #8bd5ca;
    --win-bg: #363a4f;
    --dk-tg: #f5bde6;
    --win-button-bg: #f5bde6;
    --win-button-bc: #f5bde6; 
    --textcolor: #cad3f5;
    --win--button-bg-hg: #e8cfe1;
    --win-bt-tc: var(--win-bg);
    background-color: #24273a;
}

.tic-tac-flex-box {
    top: calc(50% - 181.5px);
    right: calc(50% - 150px);
    width: 300px;
    display: flex;
    position: absolute;
    flex-direction: column;
}
.tic-tac-grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px ;
    justify-content: center;
    justify-items: center;  
    align-content: center;
    align-items: center;

}
.tic-tac-grid-text {
    font-family: 'EB Garamond', serif;
    font-size: 70px;
    width: 100%;
    vertical-align: center;
    margin: 0px;
    
 
}
.tic-tac-grid-item {
    display: flex;
    height: var(--block-size);
    width: var(--block-size);
    position: relative;
    text-align: center;
    align-items: center;
    justify-items: center;
    border-width: 3px;
    border-color: var(--border-colors);
    border-style: solid;
}
#tic-tac-grid-item-1, #tic-tac-grid-item-2, #tic-tac-grid-item-3 {
    border-top: none;
}
#tic-tac-grid-item-3, #tic-tac-grid-item-6, #tic-tac-grid-item-9 {
    border-right: none;
}
#tic-tac-grid-item-7, #tic-tac-grid-item-8, #tic-tac-grid-item-9 {
    border-bottom: none;
}
#tic-tac-grid-item-1, #tic-tac-grid-item-4, #tic-tac-grid-item-7 {
    border-left: none;
}
.tic-tac-grid-text-X {
    color: var(--p1-colors);
}
.tic-tac-grid-text-O {
    color: var(--p2-colors);
}
.win-div {
    position: absolute;
    display: flex;
    flex-direction: column;
    z-index: 1;
    width: 250px;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    background-color: var(--win-bg);
    padding: 5px;
    border-radius: 10px;

}
.win-button {
    background-color: var(--win-button-bg);
    border-width: 0;
    border-radius: 10px;
    padding: 5px 0px;
    border-width: 2px;
    border-style: solid;
    border-color: var(--win-button-bc);
    color: var(--win-bt-tc);
}
.win-button:hover {
    background-color: var(--win--button-bg-hg)
}

.win-stats-div {
    display: flex;
    text-align: center;
    justify-content: center;
    gap: 4px;

}
.win-stats-text {
    padding: 5px 0px;
    margin-top: 0px;
    color: var(--textcolor);
}
.win-stats {
    text-align: center;
    padding: 0px;
    margin: 0;
    color: var(--textcolor);
}
.playersel-div {
    display: flex;
    justify-content: center;

    
}
.player-text {
    padding: 0px 15px;
    font-size: 20px;
    color: var(--textcolor);
}
.darkmode-toggle {
    position: absolute;
    display: flex;
    top: 10px;
    right: 10px;
    padding: 5px;
    width: 15;
    height: 15px;
    background-color: var(--dk-tg);
    border-radius: 50px;
    align-items: center;
    align-content: center;
}
.lightmode-icon {
    font-size: 15px;

}
.darkmode-icon {
    font-size: 15px;
}
.win-text {
    color: var(--textcolor);
}
.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
  }
.tictactoe-title {
    text-align: center;
    padding: 5px;
    margin: 10px;
    color: var(--textcolor);
    font-family: 'EB Garamond', serif;
    font-size: 35px;

}