@font-face {
            font-family: "Nunito";
            src: url("../Assets/Nunito-VariableFont_wght.ttf") format("truetype");
        }
        @font-face {
            font-family: "Roboto";
            src: url("../Assets/Roboto-VariableFont_wdth,wght.ttf");
        }
        @font-face {
            font-family: "Bonbon";
            src: url("../Assets/Bonbon-Regular.ttf" ) format("truetype");
        }
        @font-face {
            font-family: "CherryBomb";
            src: url("../Assets/CherryBombOne-Regular.ttf");
        }
        :root{
            font-size: 16px;
        }
        html{
            background-color: #f8d0d5b2; /*f8d0d5b2, fad4dab2*/
            background-image: url('test.svg');
            /* background-repeat: no-repeat; */
            background-position:center;
            background-size: contain;
            
        }
        *{
            margin: 0;
            box-sizing: border-box;

        }

        #main_wrapper{
            position: relative;
            width: 60%;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items:center;
            top: 50vh;
            left: 50vw;
            transform: translate(-50%, -50%);
            scrollbar-width: thin;
            scrollbar-color: rgb(255, 78, 202) transparent;
            gap: 1.5rem;
            backdrop-filter: blur(2px);
            
        }

        my-article-long{
            display: flex;
            flex-direction: column;
            height: 500px;
            overflow: auto;
            scrollbar-width: thin;
            max-width: 500px;
            min-width: 300px

            

        }

        long-article{
            margin: 2rem 0;
        }

        h1 {
            text-align: center;
            font-family: "CherryBomb", "sans-serif";
            font-weight: 400;
            margin: 0px;
            font-size: 48px;
        }
        h2{
            font-size: 32px;
            font-weight: 400;
            text-align: center;
            margin: 10px 0;
            font-family: "CherryBomb", "sans-serif";
        }

        h3{
            font-size: 24px;
            font-weight: 400;
            text-align: center;
            margin: 10px 0;
            font-family: "CherryBomb", "sans-serif";
        }

        my-article-long > h2{
            position: absolute;
            top: -60px;
            font-size: 28px;
            background-color: fbe0e5;
            margin-bottom: 60px;
        }

        body{
            
        }

        p{
            font-family: "Nunito", "sans-serif";
            text-align: justify;
            margin-top: 25px;
        }
        .date{
            font-family: "CherryBomb", "sans-serif";

        }

        /* Picoblog css */

.main-pico{
    
    min-width: 200px;
    max-width: 300px;

}
#picoblog{
    max-width: 100%;
    border: 1px solid black;
    background-color: #ffe2f2; /*ffe2f2, */
    margin-top: 1.2rem;

}
.navbar{
    border: 2px solid black;
    padding: 3px;
    display: flex;
    justify-content: flex-end;
}

#pico_title{
    margin: 0;
    margin-bottom: 10px;
}

.mupdate_root{
    border: 2px solid black;
    padding: 2px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* On pourra remettre 200px si besoin ici */
    max-height: 100px; 
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-gutter: stable both-edges;
    scrollbar-color: #ee7fc0 transparent;

}
.picopdate{
    padding: 4px 3px;

}
.picopdate h4, .picopdate p{
    margin: 0;

}