main {
    font-family: var(--fa);
    h1 {
        text-transform: uppercase;
        text-align: center;
        font-size: 30px;
        color: var(--mc);
    }

    .contain-link {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 60%;
        .link-see-advance {
            width: 100%;
            margin: 0 auto;
            background: var(--mc);
            color: var(--lc);
            text-align: center;
            text-decoration: none;
            padding: 7.5px 10px;
            border-radius: 5px;
        }
    }    

    .info-text {
        width: 60%;
        padding: 5px 0;
        color: var(--dc);
        text-align: center;
        margin: 0 auto;
        background: rgba(0, 0, 0, 4%);
    }

    .container-tatami {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        width: 60%;
        margin: 0 auto;
        a {
            text-decoration: none;
            padding: 5px 7.5px;
            border-radius: 5px;
            background: var(--mc);
            color: var(--lc);
            outline: 1px solid var(--mc);
            &.current {
                background: var(--lc);
                color: var(--mc);
            }
        }
    }

    h2 {
        color: var(--mc);
        text-transform: uppercase;
        margin: 50px 0 5px 5%;
    }

    /* DESIGN POULES ET ONE MATCH FIGHT*/

    .tableau-poule, .tableau-one {
        width: 90%;
        border-collapse: collapse;
        margin: 0 auto;
        thead {
            background: var(--dc);
            color: var(--lc);
            tr th {
                font-weight: bold;
                text-transform: uppercase;
                text-align: center;
                height: 30px;
                &:nth-child(2)&:nth-child(3) {
                    text-align: left;
                    padding-left: 12.5px;
                }
            }
        }
        tbody {
            tr {
                height: 50px;
                &:nth-child(odd) {
                    background: rgba(0, 0, 0, 7%);
                }
                td {
                    text-align: center;
                    &.winner {
                        background: rgba(0, 175, 0, 0.2);
                    }
                    &:nth-child(1) {
                        width: 5%;
                    }
                    &:nth-child(2), &:nth-child(3) {
                        width: 35%;
                        text-transform: uppercase;
                        font-weight: bold;
                        text-align: left;
                        padding-left: 12.5px;
                        .competitor {
                            display: flex;
                            align-items: center;
                            gap: 7.5px;
                        }
                        .barrette {
                            width: 10px;
                            height: 30px;
                            &.aka {
                                background: rgb(245, 52, 13);
                            }
                            &.shiro {
                                background: rgb(0, 28, 168);
                            }
                        }
                    }
                    &:nth-last-child(1) {
                        width: 10%;
                        font-weight: bold;
                    }
                }
            }
        }
    }

    /* CLASSIQUE */

    .category { 
        display:flex; 
        flex-direction:row; 
        width: 90%;
        margin: 0 auto;
        .category-inner {
            display: flex;
            flex-direction: row;
            flex-shrink: 0;
            .round { 
                display:flex; 
                flex-direction:column;
                justify-content:space-around; 
                flex-shrink:0;
                .fight {
                    display:flex; 
                    flex-shrink:0; 
                    align-items:center; 
                    padding-top:7.5px; 
                    padding-bottom:7.5px; 
                    padding-right:7.5px;
                    .fight-number {
                        flex-grow:0; 
                        flex-shrink:1; 
                        margin: 0 2.5px 0 27.5px;
                        text-align:right; 
                        border-radius: 50%;
                        width: 25px;
                        height: 25px;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        /* &.passed {
                            outline: 1px solid green;
                        }
                        &.passing {
                            outline: 1px solid darkorange;
                        }
                        &.topass {
                            outline: 1px solid red;
                        } */
                    }
                    .participants {
                        display:flex; 
                        flex-direction:column; 
                        flex-shrink:0; 
                        flex-grow:1; 
                        font-size:15px; 
                        min-width:150px;
                        .participant {
                            display:flex; 
                            flex-direction:row; 
                            align-items: center;
                            flex-grow:1; 
                            min-height:40px;
                            &:nth-child(1) {
                            border-top: 1px solid var(--dc);
                            border-right: 1px solid var(--dc);
                            border-left: 1px solid var(--dc);
                            border-top-right-radius: 5px;
                            border-top-left-radius: 5px;
                            }
                            &:nth-child(2) {
                            border-right: 1px solid var(--dc);
                            border-bottom: 1px solid var(--dc);
                            border-left: 1px solid var(--dc);
                            border-bottom-right-radius: 5px;
                            border-bottom-left-radius: 5px;
                            }
                            .barrette {
                            margin-left: 7.5px;
                            width: 8px;
                            height: 25px;
                            &.aka {
                                background: rgb(245, 52, 13);
                                }
                                &.shiro {
                                    background: rgb(0, 28, 168);
                                }
                            }
                            .name {
                                font-size: 16px;
                                padding: 0 5px;
                            }
                            &.winner {
                                background: rgba(0, 175, 0, 0.2);
                            }
                        }
                    }
                }
            }
        }
    }


        .category {
            display: flex;
            flex-direction: row;
            width: 90%;
            margin: 0 auto;
            .fight {
                display: flex;
                flex-shrink: 0;
                align-items: center;
                padding-top: 7.5px;
                padding-bottom: 7.5px;
                padding-right: 7.5px;
                .fight-number {
                    flex-grow: 0;
                    flex-shrink: 1;
                    margin: 0 2.5px 0 27.5px;
                    text-align: right;
                    border-radius: 50%;
                    width: 25px;
                    height: 25px;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    /* &.passed {
                                outline: 1px solid green;
                            }
                            &.passing {
                                outline: 1px solid darkorange;
                            }
                            &.topass {
                                outline: 1px solid red;
                            } */
                }
                .participants {
                    display: flex;
                    flex-direction: column;
                    flex-shrink: 0;
                    flex-grow: 1;
                    font-size: 15px;
                    min-width: 150px;
                    .participant {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        flex-grow: 1;
                        min-height: 40px;
                        &:nth-child(1) {
                            border-top: 1px solid var(--dc);
                            border-right: 1px solid var(--dc);
                            border-left: 1px solid var(--dc);
                            border-top-right-radius: 5px;
                            border-top-left-radius: 5px;
                        }
                        &:nth-child(2) {
                            border-right: 1px solid var(--dc);
                            border-bottom: 1px solid var(--dc);
                            border-left: 1px solid var(--dc);
                            border-bottom-right-radius: 5px;
                            border-bottom-left-radius: 5px;
                        }
                        .barrette {
                            margin-left: 7.5px;
                            width: 8px;
                            height: 25px;
                            &.aka {
                                background: rgb(245, 52, 13);
                            }
                            &.shiro {
                                background: rgb(0, 28, 168);
                            }
                        }
                        .name {
                            font-size: 16px;
                            padding: 0 5px;
                        }
                        &.winner {
                            background: rgba(0, 175, 0, 0.2);
                        }
                    }
                }
            }
        }
}