/* css/match-stats.css */
.content{
    display: grid;
    grid-template-columns: 0% 1fr 0%;
    grid-template-rows: auto auto auto;
    grid-template-areas:
            ". contentTitle . "
            ". playersDiv . "
            ". matchStats . ";
    justify-content: center;
    margin-bottom: 30vh;
}

.contentTitle{
    grid-area: contentTitle;
    text-align: center;
}

.matchStats{
    grid-area: matchStats;
    text-align: center;
}

.frameStat {
    grid-area: frameStat;
    display: grid;
    font-size: 2em;
    background-color: green;
    margin-top: 1vh;
    grid-template-columns: 4fr 6fr 1fr 6fr 4fr;
    grid-template-areas:
    "leftBrkString score_left frame_number score_right rightBrkString";
}

.leftBrkString{		
    grid-area: leftBrkString;
    text-align: center;
}

.score_left{		
    grid-area: score_left;
    text-align: center;
}

.frame_number{		
    grid-area: frame_number;
    text-align: center;
    background-color: red;
    padding-left: 0.15em;
    padding-right: 0.15em;
}

.score_right{		
    grid-area: score_right;
    text-align: center;
}

.rightBrkString{		
    grid-area: rightBrkString;
    text-align: center;
}

.redUnder{		
    background-color: red;
    font-size: 0.7em;
}

.framesTitle{
    background-color: black;
    grid-area: frameStat;
    display: grid;
    font-size: 1.7em;
    padding: 5px;
    border-bottom: 5px solid red;
    grid-template-columns: 4fr 6fr 1fr 6fr 4fr;
    grid-template-areas:
    "leftBrkString score_left frame_number score_right rightBrkString";
}

.playersDiv{		
    grid-area: playersDiv;
    background-color: black;
    display: flex;
    flex-direction: column;
    padding: 1em;
    border-bottom: 5px solid red;
}

.pl{
    display: flex;
    justify-content:space-between;
}

.playerFace{		
    background-color: black;
    width: 140px;
    margin-top: 0.5vh;
    padding-bottom: 3vh;
}

.leftPlayer{		
    display: flex;
    flex-direction: column;
    text-align: left;
    padding-right: 1vh;
}

.rightPlayer{		
    display: flex;
    flex-direction: column;
    text-align: right;
    padding-left: 1vh;
}

.middleLogo{		
    display: flex;
    text-align: center;
    justify-content:space-between;
}

.frameScore{
    font-size: 5em;
    color: yellow;
    padding-left: 0.25em;
    padding-right: 0.25em;
}

.playersName{
    font-size: 1.5em;
    padding-left: 0.25em;
    padding-right: 0.25em;
}

.the_best_of{
    font-size: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.centr_it{		
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 600px){	
    .content{
        grid-template-columns: 15% 1fr 15%;
    }
    .playerFace{		
        width: 180px;
        margin-top: 0.5vh;
        padding-bottom: 3vh;
    }
    .leftPlayer{		
        text-align: right;
    }
}

@media screen and (min-width: 1000px){		
    .content{
        grid-template-columns: 25% 1fr 25%;
    }
    .playerFace{		
        width: 250px;
        margin-top: 0.5vh;
        padding-bottom: 3vh;
    }
}

@media screen and (min-width: 1300px){		
    .content{
        grid-template-columns: 25% 1fr 25%;
    }
    .playerFace{		
        width: 300px;
        margin-top: 0.5vh;
        padding-bottom: 3vh;
    }
}