#post header {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

#post main h2 {
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #54acff;
}


#post figure {
    
    max-width: 800px;
    margin-bottom: 1rem;
}

#post figure img {
    width: 100%;
}
   


#post .date {
    text-align: right;
}
#post main p:first-of-type {
    width: 100%;
    align-self: start;
}
#post main p, #post main h4, #post main h5, #post main h6 {
    width: 35rem;
    align-self: end;
}

#post main h4 {
    padding-left: 1rem;
    border-left : 5px solid #54acff;
}

#post img {
    width: 100%;
    margin-bottom: 1rem;
}
#post p:has( > img) {
    width: 100%;
    margin-bottom: 1rem;
}




#post main h1 {
    width: 100%;
}

@media screen and (max-width: 900px) {  
    #post main p:nth-child(1) {
        width: inherit;
        align-self: start;
    }
    #post main p{
        width: inherit;
        align-self: start;
    }
    #post main h2, #post main h3, #post main h4, #post main h5, #post main h6 {
        width: 100%;
        align-self: start;
    }

    .highlighter-rouge {
        width: 100%;
        margin-bottom: 1rem;
    }
    #post main figure {
        width: 100%;
        margin-bottom: 1rem;
    }
    .highlight {
        overflow-x: auto;
        padding-bottom: 1rem;
    }

}
    
  

  
@media screen and (max-width: 500px) {

    #post header h1 {
        font-size: 2rem;  
    
    }
    #post main h2 {
        font-size: 1.3rem;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
    }
}