:root {

    --board-size: clamp(300px,100%, 450px);

}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: Commissioner;
    src: url(assets/fonts/Commissioner-ExtraLight.otf);
}

@font-face {
    font-family: Raleway;
    src: url(assets/fonts/RalewayDots-Regular.otf);
}

@font-face {
    font-family: Flamenco;
    src: url(assets/fonts/Flamenco-Light.otf);
}

html,
body {

    width: 100%;
    height: 100%;
    position: relative;
    
}  


/* START MENU */

.start-container {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 10px;
    color: white;




    display: grid;
   
    justify-items: center;
    align-items: center;
    z-index: 2;

    /*Comment this later*/
    /* display: none; */
}

.menu-title {

    text-align: center;
    padding: 20px;
    font-family: Flamenco, Arial, Helvetica, sans-serif;
    border-bottom: 1px solid rgba( 255, 255, 255, 0.18 );

}


.game-start {
    display: none;
}

.start-menu {
    /* border: 1px solid cyan; */
    position: fixed;
    height: 330px;
    height: 100%;
    width: clamp(250px,100%,490px);
    /* background-color: orange; */
    /* display: none; */
    /* border-radius: 15px; */
    justify-items: center;

    background: rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    /* border-radius: 10px; */
    color: white;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    display: grid;
    justify-items: center;
    align-items: center;
    border-top: none;
    border-bottom: none;
}

#start-button {
    background: rgba(255, 71, 126, 0.699);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    /* border-radius: 0px 0px 10px 10px; */
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    color: white;
    font-family: Flamenco, Arial, Helvetica, sans-serif;
    font-weight: bolder;
}

.form-container {
    display: grid;

}

.grid-size {

    display: grid;

    justify-self: center;
    justify-items: center;
    padding: 20px;

    font-size: 30px;

}

.grid-size > input {
    
    appearance: none;
    font-size: 20px;
    width: 40px;
    text-align: center;
    border-radius: 15px;
    

}

.players {

    /* grid-area: players; */

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));

    grid-template-rows: repeat(auto-fit, 70px);
    /* border: 1px solid burlywood; */

    justify-items: center;

    padding-top: 30px;
    width: 100%;
    height: 180px;
    font-family: Flamenco, Arial, Helvetica, sans-serif;
    



}

.players > div > label {

    font-family: Flamenco, Arial, Helvetica, sans-serif;
    font-weight: 600;

}

.players > div > input {
    appearance: none;
    width: 220px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );;
    /* padding-left: 15px; */
    font-size: 18px;
    text-align: center;


    font-family: Flamenco, Arial, Helvetica, sans-serif;
    font-weight: 600;

    background: rgba(0, 0, 0, 0.25);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 10px;
    color: white;


}

.player-one,
.player-two  {

    /* border: 1px solid goldenrod; */

    height: 50px;

    width: 220px;

    display: grid;

    justify-items: center;
    gap: 5px;

    font-family: Commissioner, Arial, Helvetica, sans-serif;

    /* grid-area: player-one; */

}




.button-container,
.button-container > button {
    width: 100px;
    height: 45px;
    justify-self: center;
    border-radius: 15px;

    
}


/* GAME CONTAINER */


.parent-container{
    /* border: 1px solid yellow; */
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
}

video {
    position: fixed;
    min-height: 100%;
    min-height: 100%;
    z-index: -1;
}

.main-container {

    /* background-color: gray; */
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
    position: absolute;
    display: grid;

    grid-template-rows: 1fr 3fr 40px;
    grid-template-columns: 1fr;

    grid-template-areas: 
    "status-container"
    "board-container"
    "footer";

}

/* STATUS - TOP */
.status-container{

    /* border: 1px solid blue; */
    width: 100%;
    height: 200px;
    display: grid;

    grid-area: status-container;

    grid-template-columns: minmax(100px,1fr) minmax(150px,2fr) minmax(100px,1fr);

    grid-template-areas: "left-status center-status right-status";




}

.center-status {
    height: 100%;
    

    grid-area: center-status;
    display: grid;
    justify-items: center;
    width: 100%;
    grid-template-columns: 1fr;
    /* padding-top: 20px; */
}


.status-display {
    height: 70%;
    /* border: 1px solid yellow; */
    color: white;
    text-align: center;
    font-size: 16px;
    padding-top: 20px;
    font-family: Commissioner, Arial, Helvetica, sans-serif;
    border-radius: 20px;
    width: 90%;

    background: rgba(0, 0, 0, 0.596);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px ); 
    border-radius: 0px 0px 10px 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    border-top: none;
}

.restart-button {
    display: grid;
    justify-items: center;
    align-items: end;
    text-align: center;
    height: 50%;
    font-family: Commissioner, Arial, Helvetica, sans-serif;
    /* border: 1px solid pink; */
    width: 100%;
    height: 100%;

    
}


.restart {
    width: 120px;
    height: 50px;
    border-radius: 15px;

    background: rgba(255, 161, 53, 0.63);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    font-family: Commissioner, Arial, Helvetica, sans-serif;

}

.continue {

    background: rgba(184, 255, 53, 0.63);

}




.left-status {
    /* border: 1px solid yellow; */
    height: 100%;
    width: 100%;

    grid-area: left-status;

    display: grid;
    justify-items: right;
    align-items: end;


}

.right-status {

    /* border: 1px solid green; */
    height: 100%;
    width: 100%;

    grid-area: right-status;

    display: grid;
    justify-items: left;
    align-items: end;


}


.player-one-container,
.player-two-container {

    display: grid;

    width: 90%;
    justify-items: center;
    /* border: 1px solid red; */
    height: 65%;
    color: white;
    border-radius: 10px;

    background: rgba(0, 0, 0, 0.445);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    /* border-radius: 0px 0px 10px 10px; */
    border: 1px solid rgba( 255, 255, 255, 0.18 );

}

.your-turn {

    background-color: rgba(255, 40, 105, 0.644);
    color: black;

}


.player-one-name,
.player-two-name {

    /* border: 1px solid white; */
    font-size: 20px;
    font-family: Flamenco, Arial, Helvetica, sans-serif;
    font-weight: 600;
    /* width: 50px; */
    text-align: center;
    padding-top: 15px;

    border-bottom: 1px solid rgba( 255, 255, 255, 0.18 );
}

.your-turn-border {

    border-bottom: 1px solid black;
    /* background-color: aqua; */
}

.player-one-score,
.player-two-score {

    /* border: 1px solid white; */
    font-size: 50px;
    font-family: Flamenco, Arial, Helvetica, sans-serif;
    font-weight: 600;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 5px;

    

}



/* BOARD CONTAINER - MIDDLE */

.board-container{

    grid-area: board-container;
    /* border: 1px solid purple; */
    width: 100%;
    height: max(320px,100%);
    display: grid;
    justify-items: center;
    align-items: center;

}   


.board {

    width:  300px;
    height: 300px;
    /* border: 1px solid orange; */
    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

   
    border-radius: 10px;
    color: white;

}

.grid {

    display: grid;
    width: 100px;
    height: 100px;
    /* Messes with the text spacing */
    line-height: 100px;
    justify-content: center;
    /* border: 1px solid greenyellow; */
    color: white;
    font-size: 110px;
    text-align: center;
    font-family: Flamenco, Arial, Helvetica, sans-serif;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    background: rgba(0, 0, 0, 0.486);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    

}



/* FOOTER CONTAINER - BOTTOM */

.footer {
    display: grid;
    grid-area: footer;
    /* border: 1px solid red; */
    text-align: center;
    color: white;
    width: 80%;

    justify-self: center;

    background: rgba(0, 0, 0, 0.445);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 10px 10px 0px 0px ;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    border-bottom: none;
    font-size: 15px;
    
}

.footer-content {
    padding-top: 10px;
}

.footer-content > a {
    color: white;
    font-family: Flamenco, Arial, Helvetica, sans-serif;
    font-weight: 600;
    text-decoration: none;
}