main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   h1 {
    font-size: 30px;
    text-transform: uppercase;
    color: var(--mc);
    font-family: var(--fa);
   }
    section {
        width: 100%;
        font-family: var(--fa);
        .header-section {
            width: 100%;
            text-align: center;
            padding: 10px 0;
            font-size: 40px;
            font-family: var(--fm);
            color: var(--lc);
            background: var(--mc);
            text-transform: uppercase;
            font-weight: bold;
            margin: 20px 0 10px 0;
        }
        .content-section {
            width: 90%;
            margin: 0 auto;
        }
        &#mas-oyama {
            .content-section {
                display: flex;
                flex-direction: column;
                gap: 10px;
                .section {
                    display: flex;
                    gap: 10px;
                    &:nth-child(odd) {
                        flex-direction: row;
                    }
                    &:nth-child(even) {
                        flex-direction: row-reverse
                    }
                    img {
                        height: 100%;
                        max-height: 250px;
                        width: auto;
                        max-width: 400px;
                        outline: 1px solid rgb(245, 245, 245);
                    }
                    .text-section {
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                        border-top: 5px solid var(--mc);
                        text-align: justify;
                        h2 {
                            color: var(--mc);
                            font-family: var(--fm);
                            text-transform: uppercase;
                            font-size: 27.5px;
                        }
                    }
                }
            }
        }
        &#symboles {
            .content-section {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                gap: 30px;
                .section {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    width: 40%;
                    box-shadow: 2px 2px 15px 1px rgba(0, 0, 0, 0.1);
                    padding: 5px 20px;
                    border-radius: 10px;
                    img {
                        height: 150px;
                        width: fit-content;
                    }
                    h2 {
                        text-transform: uppercase;
                        color: var(--mc);
                        font-family: var(--fm);
                        font-size: 30px;
                    }
                    p   {
                        text-align: justify;
                    }
                }
            }
        }
        &#ceintures {
            .content-section {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;
                .section {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                    width: 100%;
                    &:nth-child(odd) {
                        flex-direction: row;
                    }
                    &:nth-child(even) {
                        flex-direction: row-reverse;
                    }
                    div {
                        height: 50px;
                        width: 80%;
                        &#blanche {
                            outline: 1px solid rgb(200, 200, 200);
                        }
                        &#orange {
                            background: darkorange;
                        }
                        &#bleue {
                            background: darkblue;
                        }
                        &#jaune {
                            background:rgb(255, 242, 0);
                        }
                        &#verte {
                            background: darkgreen;
                        }
                        &#marron {
                            background: rgb(108, 13, 13);
                        }
                        &#noire {
                            background: black;
                        }
                    }
                    p {
                        color: var(--mc);
                        font-size: 30px;
                        font-family: var(--fm);
                        text-transform: uppercase;
                        margin: 0 auto;
                        font-weight: bold;
                    }
                }
            }
        }
        &#principes {
            .content-section {
                background: url('../img/images/principes.jpg') no-repeat center center/cover;
                p {
                    width: 100%;
                    color: var(--lc);
                    font-size: 30px;
                    font-family: var(--fm);
                    text-transform: uppercase;
                    font-weight: bold;
                    padding: 20px;
                    text-align: right;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    main {
        h1 {
            font-size: 22px;
            text-align: center;
        }
        section {
            .header-section {
                font-size: 30px;
            }
            &#mas-oyama {
                .content-section {
                    gap: 10px;
                    .section {
                        gap: 10px;
                        flex-direction: column!important;
                        img {
                            max-height: 300px;
                        }
                        .text-section {
                            border-top: 4px solid var(--mc);
                            h2 {
                                text-align: center;
                            }
                        }
                    }
                }
            }
            &#symboles {
                .content-section {
                    flex-direction: column;
                    justify-content: center;
                    gap: 20px;
                    .section {
                        width: 100%;
                    }
                }
            }
            &#ceintures {
                .content-section {
                    .section {
                        flex-direction: column!important;
                        div {
                            height: 30px;
                        }
                        p {
                            font-size: 28px;
                        }
                    }
                }
            }
            &#principes {
                .content-section {
                    background: url('../img/images/principes_deux.jpg') no-repeat center center/cover;
                    p {
                        font-size: 25px;
                        text-align: center;
                    }
                }
            }
        }
    }
}