@import url('https://fonts.googleapis.com/css2?family=Cormorant+Upright:wght@300;400;500;600;700&family=Quattrocento:wght@400;700&family=Tajawal:wght@200;300;400;500;700;800;900&family=Waterfall&display=swap');

html
{
    scroll-behavior: smooth;
}

body
{
    background-image: url('../medias/images/livre.jpg');
    background-size:contain;
    font-family: 'Quattrocento';
}

nav
{
    ul
    {
        a:nth-child(5)
        {
            li
            {
                color:yellow;
            }
            
        }
    }
}

main
{
    section:nth-child(1)
    {
        background-color: rgb(173, 12, 20,0.9);
        border-radius: 2vw;
        border: solid 2px gold;
        display:grid;
        grid-template-columns: 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 1fr 0.8fr;
        gap: 1vh 0.5vw;
        a
        {
            padding: 1vh 0;
            color:yellow;
            display:flex;
            flex-direction: column;
            align-items:center;
            text-decoration: none;
            p
            {
                margin:0.5vw;
                font-size: 1.6vh;
            }
            img
            {
                border: solid 1px gold;
                height:25vh;
            }
        }
        a:nth-child(7)
        {
            margin: auto 0;
            img
            {
                height:16vh;
                border-style: hidden;
            }
        }
    }

    section:nth-child(2)
    {
        margin-top:2vh;
        color:yellow;
        article
        {
            background-color: rgba(107,9,13,0.9);
            border-radius:2vw;
            border: solid 2px gold;
            margin:1vw 0;
            display:flex;
            div
            {
                border-radius:2vw;
                h3
                {
                    font-size:4vh;
                    text-align:center;
                }
                .img_livre_responsive
                {
                    display:none;
                    margin: 0 auto;
                }
                p
                {
                    margin:1vw;
                    font-size:2.5vh;
                    font-family: 'Crimson Text';
                }
                div
                {
                    background-color: rgba(59, 14, 31,0.9);
                    border: solid 1px gold;
                    text-align:center;
                    margin:1vw;
                    h3
                    {
                        font-size:3vh;
                    }
                    div
                    {
                        display:flex;
                        align-items: center;
                        justify-content: space-around;
                        border-style:hidden;
                        background-color: rgba(59, 14, 31,0);
                        a
                        {
                            text-decoration: none;
                            color:yellow;
                            margin-top:2vh;
                        }
                        div
                        {
                            display: flex;
                            flex-direction: column;
                            margin:1vw;
                        }
                    }
                }   
            }
            img
            {
                height:45vh;
                margin:1vw;
                border: solid 1px gold;
                display:flex;
                align-self:center
            }  
            video
            {
                margin:1vh;
            }
        }
        article:nth-child(1)
        {
            div
            {
                div
                {
                    div
                    {
                        display: flex;
                        align-items: flex-start;
                        div
                        {
                            align-items: center;
                            width:45%;
                            a
                            {
                                margin-bottom:5vh;           
                                font-size: 2.5vh;
                                font-weight:bold;
                            }
                            iframe
                            {
                                width:100%;
                                height:30vh;
                            }
                        }
                        div:nth-child(1)
                        {
                            a
                            {
                                color: rgb(252, 203, 5);
                            }
                        }
                        div:nth-child(2)
                        {
                            a
                            {
                                color: rgb(101, 195, 214);
                            }
                        }
                    }
                }
            }
        }
        article:nth-child(3)
        {
            justify-content:center;
            div
            {
                text-align:center;
            }           
        }
        article:nth-child(5)
        {
            div
            {
                p:nth-child(4)
                {
                    text-align: center;
                    margin-top: 10vh;
                    a
                    {
                        text-decoration: none;
                        color: rgb(101, 195, 214);
                    }
                }
            }
        }
        article:nth-child(7)
        {
            display:flex;
            flex-direction:column;
            a
            {
                text-decoration:none;
                color:yellow;
                font-size:3vh;
            }
            div:nth-child(1)
            {
                display:flex;
                justify-content:space-around;
                h2
                {
                    align-self:center;
                    font-size:4vh;
                }   
                img
                {
                    height:20vh;
                    border-style:hidden;
                } 
                a
                {
                    color:white;
                }
                a:nth-last-child(1)
                {
                    p
                    {
                        font-style: italic;
                    }
                }
            }
            div:nth-child(2)
            {
                text-align:center;
            }  
        }
    }
}


/******************************* Responsive design *********************************************/


@media screen and (max-width:1500px)
{
    main
    {
        section:nth-child(1)
        {
        grid-template-rows: repeat(2,1fr);
        grid-template-columns: repeat(4,1fr);
            a:nth-child(7)
            {
                grid-row:1/3;
                grid-column:4/5;
            }
        }
        section:nth-child(2)
        {
            article
            {
                div
                {
                    .img_livre_responsive
                    {
                        display:flex;
                        height:30vh;
                    }
                }
                .img_livre_base
                {
                    display:none;
                }
            }
        }
    }
}

@media screen and (max-width:1400px)
{
    main
    {
        section:nth-child(2)
        {
            article:nth-child(7)
            {
                div:nth-child(1)
                {
                    display:grid;
                    grid-template-columns: 2;
                    grid-template-rows: 3;
                    h2
                    {
                        grid-row: 1/2;
                        grid-column: 1/3;
                        margin:3vh auto;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:1300px)
{
    main
    {
        section:nth-child(2)
        {
            article:nth-child(1)
            {
                div
                {
                    div
                    {
                        div
                        {
                            flex-direction: column;
                            align-items: center;
                            margin: 3vh auto;
                            div
                            {
                                a
                                {
                                    margin-bottom: 1vh;
                                }
                            }
                        }
                        
                    }
                }
            }
        }
    }
}



@media screen and (max-width:900px)
{
    main
    {
        section:nth-child(1)
        {
            grid-template-rows: repeat(4,1fr);
            grid-template-columns: repeat(2,1fr);
            gap: initial;
            a
            {
                padding:0;
                justify-content:center;
                p
                {
                    margin:0;
                }
                img
                {
                    display:none;
                }
            }
            a:nth-child(7)
            {
                grid-row:4/5;
                grid-column:1/3;
            }
        }
        section:nth-child(2)
        {
            article:nth-child(1)
            {
                div
                {
                    div
                    {
                        div
                        {
                            div
                            {
                                width:90%;
                                iframe
                                {
                                    width:90%;
                                    height:40vh;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:605px)
{
    main
    {
        section:nth-child(2)
        {
            article:nth-child(1)
            {
                div
                {
                    div
                    {
                        div
                        {
                            div
                            {
                                iframe
                                {
                                    height:30vh;
                                }
                            }
                        }
                    }
                }
            }
            article:nth-child(7)
            {
                div:nth-child(1)
                {
                    grid-template-columns: 1;
                    grid-template-rows: 5;
                    h2
                    {
                        grid-row:initial;
                        grid-column: initial;
                        font-size:3vh;
                    }
                    a
                    {
                        margin: 0 auto;
                        img
                        {
                            height:10vh;
                        }
                    }
                    #triphases
                    {
                        display:flex;
                        flex-direction: column;
                        align-items: center;
                        p
                        {
                            font-size:1.5vh;
                        }
                    }
                }
            }
        }
    }
}


@media screen and (max-width:530px)
{
    main
    {
        section:nth-child(1)
        {
            a
            {
                p
                {
                    font-size: 1.5vh;
                }
            }
        }
        section:nth-child(2)
        {
            article
            {
                div
                {
                    .img_livre_responsive
                    {
                        height:20vh;
                    }
                    h3
                    {
                        font-size:3vh
                    }
                    p
                    {
                        font-size:1.7vh;
                    }
                    div
                    {
                        h3
                        {
                            font-size: 2.5vh;
                        }
                    }
                }
            }
            article:nth-child(1)
            {
                div
                {
                    div
                    {
                        div
                        {
                            div
                            {
                                a
                                {
                                    font-size: 2vh;
                                }
                            }
                        }
                    }
                }
            }
            article:nth-child(2)
            {
                div
                {
                    div
                    {
                        video
                        {
                            width:80vw;
                        }
                    }
                }
            }
            article:nth-child(7)
            {
                a
                {
                    font-size:2vh;
                }
                div:nth-child(1)
                {
                    h2
                    {
                        font-size:2.2vh;
                    }
                }
            }
        }
    }
}