@font-face {
    font-family: 'robotoregular';
    src: url('./font/roboto-regular-webfont.woff2') format('woff2'),
         url('./font/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'chunkfiveregular';
    src: url('./font/chunkfive-regular-webfont.woff2') format('woff2'),
         url('./font/chunkfive-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

*,
*::after,
*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font: inherit;
}
:root{
    --grid-width: calc(0.049*100vw + 183.61px);
    --grid-height: var(--grid-width);
    --player-marker-holder-width: 10vw;
    --player-marker-holder-height: var(--player-marker-holder-width);

    --blue: #010084;
    --red: #ff002b;
    --light-blue: #a8bdfa;
    --medium-blue: #566fff;

    font-family: robotoregular,system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

button{
    outline: none;
    border: none;
    background: none;
    background-color: var(--light-blue);
    border-radius: 5px;
    padding: 1px 20px;
    border: 1px solid var(--blue);
}
button:hover{
    opacity: 50%;
}

/* the main background image */

#main_bg_image{
    height: 100vh;
    width: 100vw;
    min-width: 1920px;
    right: 0;
    top: 0;
}

/* Main wrapper that holds everything */

.main_wrapper{
    display: grid;
    grid-template-rows: 5fr 1fr 1fr 1fr 1fr 7fr;
    grid-template-columns: 2fr 3fr 2fr;
    height: 100vh;
    padding: 50px 10px;
    gap: 20px 30px;
    justify-items: center;
    align-items: center;
}

/* Page heading (Tic Tac Toe) */

.page_heading_holder{
    grid-column: 1/4;
    grid-row: 1/2;
    font-size: 4rem;
    font-family: chunkfiveregular,system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Player display styles starts */

.player_display_card{
    min-width: clamp(230px,50%,500px);
    padding-left: 20px;
    padding-right: 20px;
    border: 2px solid var(--blue);
    border-radius: 5px;
    display: grid;
    grid-column: 1/4;
    grid-row: 2/3;
    justify-self: center;
    font-size: 1rem;
    font-weight: bold;
}
.player_display_card_cell{
    display: flex;
    align-items: center;
    height: 30px;
    gap: 10px;
}
.player_display_card_cell{
    text-wrap: nowrap;
}
.player_icon{
    width: 1.5rem;
}
.player_display_card_cell>.player_details{
    flex: 1;
}
.player_display_card_cell>.player_details p{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* the box that holds the markers for each player on the both sides of the screen */

.player1_marker_box,
.player2_marker_box{
    width: var(--player-marker-holder-width);
    height: var(--player-marker-holder-height);
    background: radial-gradient(#a8bdfa, #8b96ed);
    border-radius: 10%;
    border: 4px solid #566fff;
    display: grid;
    place-content: center;
}
.player1_marker_box>svg,
.player2_marker_box>svg{
    width: 8vw;
    fill: var(--blue);
}

/* the dialog box that apears when player presses start or restart button allowing them to choose their marker */

.choose_marker_dialog>div{
    display: flex;
}
.choose_marker_dialog>button{
    width: 50px;
    height: 50px;
    display: grid;
    place-content: center;
}
.choose_marker_dialog svg{
    width: 2rem;
}

/* control panel itself no longer exits but its components bellow */

.control_panel_player1_display{
    grid-row: 2/6;
    grid-column: 1/2;
}
.control_panel_player2_display{
    grid-row: 2/6;
    grid-column: 3/4;
}
.control_panel_player1_display,
.control_panel_player2_display{
    display: grid;
    grid-template-rows: 3fr 2fr 7fr;
    gap: 20px;
    text-wrap: nowrap;
    align-items: center;
    justify-items: center;
}
.control_panel_player1_display>p:first-of-type,
.control_panel_player2_display>p:first-of-type{
    font-size: 3vw;
    font-weight: bold;
}
.control_panel_player1_display>p:last-of-type,
.control_panel_player2_display>p:last-of-type{
    font-size: 2vw;
    font-weight: bold;
}
#start_restart_btn_holder{
    grid-column: 2/3;
    grid-row: 4/5;
    font-weight: bold;
}
.display_holder{
    grid-column: 2/3;
    grid-row: 3/4;
    font-weight: bold;
    font-size: 1.2rem;
    background-color: var(--light-blue);
    border-radius: 10px;
    width: 100%;
    display: grid;
    place-content: center;
}

/* Game board styles */

.game_board{
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    height: var(--grid-height);
    width: var(--grid-width);
    justify-self: center;
}
.game_board_wrapper{
    box-sizing: content-box;
    padding: 5px;
    border-radius: 10px;
    grid-column: 2/3;
    grid-row: 5/7;
}
.game_board_cell{
    padding: 0;
    border: none;
}
.game_board_cell>svg{
    width: 4vw;
    fill: var(--blue);
}

.add_player1_dialog,
.add_player2_dialog,
.change_player1_dialog,
.change_player2_dialog{
    top: 300px;
    margin: 0 auto;
    width: 300px;
    height: 150px;
    border-radius: 10px;
    border: 3px solid var(--medium-blue);
    background-color: var(--light-blue);
}
.add_player1_dialog>form,
.add_player2_dialog>form,
.change_player1_dialog>form,
.change_player2_dialog>form{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 20px;
    gap: 10px;
}
.choose_marker_dialog{
    top: 300px;
    margin: 0 auto;
    border-radius: 10px;
    border: 3px solid var(--medium-blue);
    background-color: var(--light-blue);
    width: 300px;
    height: 200px;
}
.choose_marker_dialog_content_wrapper{
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: center;
    align-items: center;
    gap: 30px;
    font-weight: bold;
}
#name_error_dialog_box{
    top: 300px;
    margin: 0 auto;
    border-radius: 10px;
    border: 3px solid var(--medium-blue);
    background-color: var(--light-blue);
    width: 300px;
    height: 120px;
}
.name_error_dialog_content_wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px;
}

footer{
    position: fixed;
    bottom: 5px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
footer a{
    color: var(--blue);
}
footer p{
    text-align: center;
    font-size: 0.7rem;
}