.wryta-header{
    background: #101010;
}

.page-body{
    background-color: #ffffff;
    
}

.blog-container{
    display: flex;
    flex-direction: row;
    padding: 128px 24px 24px 24px;

    background-color: #ffffff;
    color: black;

}

.social-media-icons-container{
    margin-bottom:2rem; 
    display:flex; 
    flex-direction:column; 
    align-items:end;

    position: sticky;
    top:250px;
    right: 0;

}

.social-media-icon{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 64px;
    width: 64px;
}


.blog-container img{
    width:100%; height:auto;
    border-radius: 16px;
}


.related-posts-container{
    margin-bottom:2rem;

    position: sticky;
    top:164px;
    right: 0;
}



/* Post Content Editing */

.post-title{
    
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    color: #020d53;
}

.post-thumbnail{
    font-family: 'Open Sans', sans-serif;
}

.post-cateogry{
    margin-bottom: 20px;
}



.post-cateogry h3{
    font-family: 'Open Sans', sans-serif;
    background: #f5f5ff;
    font-weight: 400;
    font-size: 14px;
    border-radius: 20px;
    

    
    display: inline-block;
    text-align: center;
    padding: 8px 16px;
    color: #020d53;
}

.post-cateogry h3:hover{
    cursor: pointer;
}

.post-cateogry h3 ul{
    list-style: none;
    text-decoration: none;
}

.post-cateogry h3 ul a{
    text-decoration: none;
    color: #0e1a6c;
}

.post-content{
    color: #020111;
}

.post-thumbnail{
    margin-bottom: 32px;
}

.post-content .toc-parent{
    background: #f5f5ff;
    padding: 16px 16px;
    border-radius: 4px;
    margin-bottom: 30px;
    z-index: 0 !important;
    font-family: 'Open Sans', sans-serif;
}

.post-content .toc-parent .wp-block-list{
    margin-left: 2rem !important;
}

.post-content .toc-parent .wp-block-list li{
    line-height: 1.25rem;
    font-size: 16px;
}

.post-content .wp-block-heading{
    font-family: 'Open Sans', sans-serif;
    color: #020d53;
}

.post-content h1{
    font-size: 40px;
    line-height: 110%;
    margin-bottom: 1.5rem;
    word-break: break-word;

}


.post-content h2{
    font-size: 34px;
    line-height: 120%;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 20px;
}

.post-content h3{
    font-size: 26px;
    line-height: 120%;
    font-weight: 700;
    margin-top: 26px;
    margin-bottom: 16px;
}

.post-content h4{
    font-size: 18px;
    line-height: 120%;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 12px;
}

.post-content strong{
    font-weight: 700;
}

.post-content img{
    width: 100%;
    margin: 20px 0px;
}

.post-content .wp-block-list{
    margin-left: 4rem;
    margin-top: 30px;
}



.post-content .wp-block-list li{
    margin-bottom: 20px;
}

.post-content a{
    color: #1c216a;
}

.post-content p:not(.post-info):not(.category-name):not(.toc_title){
    font-size: 17px;
    line-height: 26px;
    font-weight: 400;
    letter-spacing: .25px;
    padding-bottom: 20px;
    color: #1c216a;
}

.post-content a:not(.button):hover{
    color: #302d94;
    text-decoration: underline;
}

.post-content ul{
    color: #1c216a;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 26px;
    margin-left: 4rem;
    margin-bottom: 20px;
}



@media (max-width: 1200px) {
    aside{
        display: none;
        visibility: hidden;
    }

    .post-content .wp-block-list{
        margin-left: 1rem;
        margin-top: 16px;
    }

    .page-body{
        margin-top: 64px;
    }
}





/* Smartphones (portrait and landscape) ----------- */
        @media only screen 
        and (min-device-width : 320px) 
        and (max-device-width : 480px) {
        /* Styles */
        }

        /* Smartphones (landscape) ----------- */
        @media only screen 
        and (min-width : 321px) {
        /* Styles */
        }

        /* Smartphones (portrait) ----------- */
        @media only screen 
        and (max-width : 320px) {
        /* Styles */
        }

        /* iPads (portrait and landscape) ----------- */
        @media only screen 
        and (min-device-width : 768px) 
        and (max-device-width : 1024px) {
        /* Styles */
        }

        /* iPads (landscape) ----------- */
        @media only screen 
        and (min-device-width : 768px) 
        and (max-device-width : 1024px) 
        and (orientation : landscape) {
        /* Styles */
        }

        /* iPads (portrait) ----------- */
        @media only screen 
        and (min-device-width : 768px) 
        and (max-device-width : 1024px) 
        and (orientation : portrait) {
        /* Styles */
        }

        /* Desktops and laptops ----------- */
        @media only screen 
        and (min-width : 1224px) {
        /* Styles */
        }

        /* Large screens ----------- */
        @media only screen 
        and (min-width : 1824px) {
        /* Styles */
        }