*{
margin:0px;
padding:0px;
button,a,link:hover{cursor:pointer;}
button{font-family:pixel-regular}
image-rendering:pixelated;
}
input[type="button"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0; 
}
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0; 
}
@font-face {
    font-family: 'pixel-regular' ;
    src: url('../a-fonts/LowresPixel-Regular.otf');
}
@font-face {
    font-family: 'pixel-bold' ;
    src: url('../a-fonts/PixelCode.woff2');
}
@keyframes trebble1 {
    0% { transform: translate(0, 0)}
    20% { transform: translate(-2px, 2px)}
    40% { transform: translate(1px, -1px)}
    60% { transform: translate(2px, 1px)}
    80% { transform: translate(1px, 2px)}
    100% { transform: translate(-0, -0)}
}
@keyframes trebble2 {
    20% { transform: translate(0, 0)}
    40% { transform: translate(-2px, 2px)}
    60% { transform: translate(1px, -1px)}
    80% { transform: translate(2px, 1px)}
    100% { transform: translate(0, 0)}
    0% { transform: translate(-1px, -2px)}
}
@keyframes trebble3 {
    40% { transform: translate(0, 0)}
    60% { transform: translate(-2px, 2px)}
    80% { transform: translate(1px, -1px)}
    100% { transform: translate(0, 0)}
    0% { transform: translate(1px, 2px)}
    20% { transform: translate(-1px, -2px)}
}
@keyframes trebble4 {
    60% { transform: translate(0, 0)}
    80% { transform: translate(-2px, 2px)}
    100% { transform: translate(0, 0)}
    0% { transform: translate(2px, 1px)}
    20% { transform: translate(1px, 2px)}
    40% { transform: translate(-1px, -2px)}
}
@keyframes defiler1 {
    0% {transform:translateX(-100%)}
    100% {transform:translateX(-300%)}
}
@keyframes zoomrebond {
    0% {transform:scale(1, 1)}
    70% {transform:scale(1.12, 1.12)}
    100% {transform:scale(1.1, 1.1)}
}
@keyframes dezoomrebond {
    100% {transform:scale(1, 1)}
    30% {transform:scale(1.13, 1.13)}
    0% {transform:scale(1.12, 1.12)}
}
@keyframes zoomrebond2 {
    0% {transform:scale(1)}
    30% {transform:scale(2.9)}
    80% {transform:scale(3)}
    100% {transform:scale(2.7)}
}
@keyframes dezoomrebond2 {
    100% {transform:scale(1)}
    0% {transform:scale(2.7)}
}

body {
background-color:rgb(29, 114, 101);
background-repeat: no-repeat;
background-size:cover;

font-family:pixel-regular;

width:100%;
height:100%;

overflow-x:hidden;
}

div.head{ grid-area: header; }
aside.aside{ grid-area: sidebar;}
section.interne{ grid-area: interne;}
aside.aside2{grid-area:sidebar2;}
div.footer{grid-area:footer;}

section.main {
    margin:0px;
    z-index:1;
    min-height:1000px;
    max-width: 100%;
    padding:0px;

    display:grid;
    grid-gap: 5px;
    grid-template: 
        "sidebar header header"
        "sidebar interne interne"
        "footer footer footer"
    ;
    grid-template-columns:minmax(200px, min(20%, 280px)) 1fr;
}
    
    @media (max-width: 800px) {
        section.main {
            margin-left:0;
            margin-right:0;
            grid-template:
            "sidebar"
            "header"
            "interne"
            "footer"
            / 100%;
        }
    }





aside.aside {
    min-height:100px;
    background-color:rgb(169, 17, 91);
    border:solid 1px rgb(136, 0, 45);
    border-radius:0px;
    padding:0px;
    margin:5px;

    p,li{
        color:gold;
    }
    h3{
        font-size:17px;
        margin-top:10px;
        margin-bottom:0px;
    }
    
    ul {
        border:2px solid rgb(150, 0, 82);
        border-radius: 10px;
        background-color:rgb(191, 20, 108);
        color:rgb(255, 255, 255);
        font-size:10px;

        list-style-position:inside;

        margin-bottom:30px;
        padding-bottom:10px;
        height:auto;
        max-width:90%;
        margin:10px auto 10px auto;
    }
    ul.menu>li{
        padding:0px;
        max-width:100%;
        border-radius:5px;
        background-color:rgb(213, 19, 129);
        max-width:100%;
        margin:5px 10px;
        height:35px;
    }
    ul.menu {
    a {
        width:100%;
        height:30px;
        display:block;
    }
    h4 {
        height:20px;
        padding:10px 0px 5px 7px;
    }
    a:link{
        color:rgb(255, 255, 255);
        text-decoration:none;
    }
    a:hover,h4:hover {
        color:gold;
    }
    a:visited {
        color:rgb(255, 255, 255);
        text-decoration:none;
    }
    li:hover {
        background-color:rgb(255, 74, 180);
    }
    a:active {
        color:rgb(255, 145, 0);
        text-decoration:none;
    }
    }
    @media (max-width:800px){
            display:block;
    }
    /* aside.aside-is-open {
        display:block;
        position:fixed;
        top:0px;
        z-index:998;
        width:100%;
        height:100%;
        margin:0;
        background-color:rgb(169, 17, 91);
        border:solid 0px rgb(255, 183, 0);
        padding-top:100px;
        border-radius:0px;
    }*/

}
    
        


div.head {
    scroll-margin-top:100px;
    scroll-behavior:smooth;

    margin:5px;
    h2 {
        height:30px;
        color:rgb(230, 123, 56);
    }
    div.container1 {
            height:200px;
            width:100%;

            display:flex;
            justify-content:center;

            background-color:rgb(255, 219, 141);
            border-radius:0px;
            border:0px solid rgb(230, 123, 56);
            padding:0px;
            margin-bottom:5px;
            
            div.sema-portrait-contain {
                min-width:300px;
                height:200px;

                position:relative;
            div.sema-portrait {
                position:absolute;
                bottom:0px;
                display:flex;
                justify-content:center;

                width:300px;
                height:200px;
            
                img.sema-portrait {
                    border-image-width:contain;
                }
                
                span.humeur-du-jour {
                    cursor:pointer;
                    padding:15px 15px 15px 15px;
                    line-height:12px;

                    background-image:url(../a-images/img-humeur-du-jour.png);
                    background-repeat:no-repeat;
                    background-size:contain;
                    span.humeur {
                        p {
                            color:rgb(219, 0, 91);
                            display:inline-block;
                            font-size:10px;
                            text-align:left;
                        }
                        small{
                            color:rgba(255, 0, 106, 0.573);
                            display:inline-block;
                            width:100%;
                            font-size:6px;
                            text-align:right;
                        }
                    }
                }                                                      
            }
            } 
            div.buttonsRS {
                margin:auto 4px;
                padding:2px;
                div.liste-btn {
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    flex-direction:column;

                    div.button {
                        display:inline-flex;
                        justify-content:center;
                        align-items:space-around;

                        background-image:url(../a-images/buttons/btn\ rs\ bleu.png);
                        background-size:contain;
                        background-repeat:no-repeat;
                        background-position:center;
                        width:100px;
                        height:40px;
                        margin:0px 3px;
                        padding:10px;

                        filter:drop-shadow(2px 3px 5px rgba(0, 20, 28, 0.471));
                        img {
                            height:30px;
                            width:30px;
                            margin:auto 0px auto 3px;

                            filter:drop-shadow(3px 2px 2px rgb(0, 0, 0));
                        }
                        span {
                            display:block;
                            margin:auto;
                        h4 {
                            text-align:left;
                            font-size:10px;
                            line-height:5px;
                            margin:auto 0px 3px 10px;

                            text-shadow:-3px 2px 2px black;
                        }
                        p {
                            text-align:left;
                            font-size:9px;
                            line-height:8px;
                            margin:auto 0px auto 11px;
                            color:rgb(111, 155, 183);
                            
                            text-shadow:-3px 2px 2px black;
                        }
                        }
                        }
                        }
            }         
            div.my-button {
                display:flex;
                align-items:center;
                flex-direction:column;

                padding:5px;
                h2 {
                    font-size:18px;
                }
                span.span-mybutton {
                    height:31px;
                    img.mybutton{
                        margin:0px;
                    }
                    &:hover{
                        img.mybutton {
                            z-index:2;
                            padding:0px;
                        }
                        z-index:1;
                        padding:5px;
                        animation:zoomrebond2 0.2s forwards;
                    }
                }
                textarea.code-textarea {
                    width:83px;
                    height:27px;

                    font-size:9px;
                    letter-spacing:-0.5px;
                    line-height:8px;
                }
                button.copy-mybutton {
                    border:1px solid rgb(138, 34, 110);
                    background-color:rgb(238, 131, 199);
                    width:50px;
                    height:20px;
                    border-radius:3px;
                    font-size:9px;
                    letter-spacing:0.1px;
                    line-height:8px;
                    margin:25px auto auto auto;
                    font-family: pixel-regular;
                    color:rgb(255, 255, 255);
                }
                button.copy-mybutton:hover {
                    border:1px solid rgb(93, 16, 73);
                    background-color:rgb(210, 98, 169);
                    color:pink;
                }
            }
    }
    span.humeur-du-jour:hover {
            animation:zoomrebond 0.2s forwards;
            p {
                letter-spacing:1.5px;
            }
    }
    div.button:hover {
        &{
            transform:scale(1.1,1.1);
        }
        img{
            animation:trebble3 0.2s forwards;
        }
        h4 {
            animation:trebble1 0.2s forwards;
        }
        p {
            animation:trebble2 0.2s forwards;
        }
    }
    div.sema-bio {
                background-color:rgb(46, 159, 145);
                width:100%;

                display:flex;
                align-items:center;
                flex-direction: column;

                position:relative;
                span.span-sema-bio1,span.span-sema-bio2{
                    display:flex;
                    justify-content:center;

                    button {
                        width:50px;
                        height:25px;
                        border:1px solid rgb(72, 140, 133);
                        border-radius:5px;
                        background-color:rgb(107, 194, 182);

                        position:absolute;
                        right:10px;
                        top:8px;
                    
                        color:rgb(39, 88, 84);
                        font-size:8px;
                        line-height:8px;
                    }
                    button:hover{
                        transform:scale(1.05,1.05);
                        border:1px solid rgb(53, 124, 119);
                        background-color:rgb(95, 181, 169);
                        p{
                                color:rgb(25, 66, 62);
                            }
                    }

                    img{
                        width:200px;
                        height:200px;
                        margin:auto 5px;
                    }
                    p {
                        margin:35px 5px 5px 5px;
                        width:50%;

                        color:rgb(255, 255, 255);
                        text-align:left;
                        b {
                            color:rgb(255, 231, 188);
                        }
                        a {
                            text-decoration:underline;
                            color:rgb(255, 207, 235);
                        }
                        a:hover {
                            color:rgb(255, 172, 186);
                        }
                    }
                }
    }
}
@media (max-width: 600px){
    div.head {
        height:auto;
        margin:auto;
        h2 {
            font-size:13px;
        }
        div.container1 {
            height:auto;
            justify-content:center;
            flex-wrap:wrap;
            overflow:visible;
            flex-direction:row;
            div.sema-portrait {
                margin:auto;
                padding:0px;
                span.humeur-du-jour {
                    padding:8px;
                    line-height:10px;
                    span.humeur {
                        p {
                            padding:5px;
                            font-size:7px;
                        }
                    }
                }
            }
            div.buttonsRS {
                width:100%;
                div.liste-btn {
                    flex-wrap:wrap;
                    height:45px;
                    width:100%;
                    padding:0px;
                    div.button {
                        width:100px;
                        height:40px;
                        padding:5px;
                        img {
                            height:20px;
                            width:20px;
                            margin-left:7px;
                        }

                        h4 {
                            font-size:10px;
                        }
                        p {
                            font-size:8px;
                        }
                    }
                }
            }
            div.my-button {
                align-self:flex-end;
                width:100%;
                height:auto;
                padding:0px;

                display:flex;
                justify-content:center;
                flex-direction:row;
                flex-wrap:wrap;
                h2 {
                    display:none;
                }
                span.span-mybutton {
                    padding:0px;
                    backdrop-filter:none;
                    mask-image: radial-gradient(ellipse, black 100%, transparent 80%);
                    img.mybutton {
                        backdrop-filter:none;
                        padding:2px;
                        margin:auto;
                    }
                }
                textarea.code-textarea {
                    width:90px;
                    margin:0px 10px 0px 10px;
                }
                button.copy-mybutton {
                    margin:auto 10px auto 10px;
                }
            }
        }
        div.sema-bio {
            p {
                width:60%;
            }
        }
    }
}
    
    


section.interne {
    text-align:center;
    display:flex;
    justify-content:space-around;
    flex-direction:row;

    div.page-blog {
        max-width:70%;
        min-width:50%;
        height:600px;
        border:1px solid rgb(226, 177, 97);
        background-color:rgba(255, 241, 210);

        overflow-y:auto;
        overflow-x:hidden;

        scrollbar-width: 20px;
        scrollbar-color:rgb(214, 146, 62) rgb(226, 177, 97);

    div.extrait-blog {
        margin:auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    div.fond-extrait-blog {
        padding-top:15px;
        background-color:rgb(255, 241, 210);
        margin:0px;
    }
    article.apercu {
        margin:10px;
        padding:10px;
        border:1px solid rgba(255, 0, 149, 0.545);
        border-radius:5px;
        background-color:rgb(255, 228, 177);
        width:80%;
        margin:10px auto 10px auto;
        cursor:pointer;
        position:relative;
        text-align:left;
        height:auto;

        display:grid;
        grid-template: 
            "pdp titre titre"
            "resume resume resume"
            "hr hr hr"
            / 70px 1fr ;

        &:not(:hover) {
            animation:dezoomrebond 0.2s forwards;
        }
        &:hover{
            animation:zoomrebond 0.2s forwards;
            border:1px solid rgba(255, 89, 186, 0.545);
            background-color:rgb(255, 225, 170);

        }
    }
        article.apercu>img.pdp {
            width:50px;
            height:50px;
            border-radius:100px;

        }
        div.titre {
            height:50px;
            margin-bottom:5px;
        }
        div.titre>h4{
            grid-area:titre;
            position:absolute;
            top:0px;
            display:inline;
            color:rgb(218, 0, 98);
            margin:auto;
        }
        p.dateetheure{
            grid-area:titre;
            text-align:left;
            font-size:8px;
            color:rgb(255, 141, 223);
            padding-top:35px;
            margin-bottom:5px;
        }
        p.dateetheure{
            grid-area:titre;
            text-align:left;
            font-size:8px;
            color:rgb(255, 141, 223);
            padding-top:35px;
            margin-bottom:5px;
        }
        
        article.apercu>p {
            grid-area:resume;
            color:rgb(203, 64, 127);
            text-align:left;
            margin:5px 5px 15px 70px;
            height:auto;
        }
        article.apercu>span.categorie {
            display:none;

            grid-area:categorie;
            text-align:right;
            font-size:10px;
            color:rgba(255, 141, 223);
            margin:0px 5px 0px 5px;
        }
        article.apercu>hr {
            grid-area:hr;
            margin:5px;
            color:rgb(185, 213, 210);
        }
    }
}
@media (max-width: 880px) {
        div.page-blog {
            max-width:90%;
            margin:auto;
            height:600px;
            article.apercu {
                width:90%;
            }
        }
}
@media (max-width: 800px) {
        div.page-blog {
            max-width:80%;
            margin:auto;

            article.apercu {
                width:90%;
            }
        }
}



aside.aside2 {
    border-radius:0px;
    width:27%;
    /* background-color:rgb(17, 169, 141); */

        ul{
            margin:5px;
            margin-bottom:10px;
            padding:5px;
            max-width:500px;

            border:2px dashed rgb(20, 147, 124);
            border-radius:0px;
            /* background-color:rgb(20, 147, 124); */

            list-style-type:square;
            font-size:12px;
            text-align:left;
        }
        h2 {
            color:rgb(255, 218, 138);
        }
        li{
            color:rgb(118, 212, 193);

            margin:7px 0px 7px 20px;
            width:80%;
        }
        input {
            border:1px solid rgb(255, 255, 255);
        }
        span {
            border:1px solid black;
            text-align:left;
        }
}
@media(max-width:880px){
    section.interne {
        flex-direction:column;
        aside.aside2 {
            display:flex;
            margin-top:10px;
            width:100%;
        }
    }
}





div.footer{
    background-color:rgb(248, 222, 151) ;
    border: 1px solid rgb(232, 129, 50);
    width:99.8%;
    height:60px;
    margin:auto;

    overflow:hidden;
    white-space:nowrap;
    
    h2 {
        margin:3px;
        padding:0px;
        height:20px;
        font-size:18px;
    }
    div.divsitescool {
        margin:auto;
        span.tous-les-sitecool {
            display:inline-flex;
            justify-content:space-around;
            flex-shrink:0;

            animation:defiler1 40s linear infinite;
        }

        a.sitecool,a.sitecool>img{
            margin:auto 1.5px;
            padding:0px;
            height:30px;
            width:auto;
            :hover {
                z-index:3;
                transform:scale(1.5);
            }
        }
    }
}
@media(max-width:800px) {
    div.footer {
        width:99.6%;
    }
}


















/* tout ce qui est style h p etc */


/* .hover-trebble:hover {
    display:inline-block;
    animation:trebble 0.2s infinite;
    animation-delay: var(--delai);
} */

small {
    font-size:9px;
}
p{
    color:rgb(255, 255, 255);
    font-family:pixel-regular;
    text-align:center;
    font-size:13px;
}

h1{
    color:rgb(255, 255, 255);
    font-family:pixel-bold;
    text-align:center;
}

h2 {
    color:rgb(255, 255, 255);
    font-family:pixel-bold;
    text-align:center;
}

h3 {
    color:rgb(255, 255, 255);
    font-family:pixel-bold;
    text-align:center;
    font-size:20px;
}

h4 {
    color:rgb(255, 255, 255);
    font-family:pixel-bold;
    margin:0px;
    font-size:13px;
}

h5 {
    color:rgb(255, 255, 255);
    font-family:pixel-bold;
    text-align:center;
}

h6 {
    color:rgb(0, 18, 29);
    font-family:pixel-bold;
    text-align:center;
}