/*
Theme Name: Libra
Theme URI: https://neiltorres.com
Description: A child theme for Twenty Twenty One.
Author: Neil Torres
Author URI: https://neiltorres.com/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

body{
/*    background-color: #ded9dd;*/
background-image: url(img/venus.jpg);
background-repeat: no-repeat;
background-size: cover;
}

body.logged-in{
    background-image: none;
}

.site-header{
    padding: 10px 24px;
    background: white;
    margin: 0;
    max-width: 100%;
    position: fixed;
    top:0;
    width: 100%;
}

#loginout{
        position: absolute;
    right: 24px;
    font-size: 16px;
    top: 14px;
}


.site-description{
    margin-left: 12px;
    margin-top: 3px;
    font-size: 16px;
}

.admin-bar .site-header{
    top: 30px;
}

.site-main{
    padding:0;
    display: flex;
}

.site-content{
    margin-top: 58px;
}

.site-branding{
    display: flex;
}

.page #side-nav-container{
    width: 300px;
    margin-top: 3px;
    float: left;
    height: calc(100vh - 50px);
    position: relative;
}

.site-main > * {
    margin-top: 0;
    margin-bottom: calc(3 * var(--global--spacing-vertical));
}

.logged-in .site-main article{
    padding: 48px;
    width: calc(100vw - 300px);
}

.site-main article{
 
    margin-top: 58px;
}

.logged-in .site-main article{
 
    margin-top: 0px;
}


.site-main article .entry-header{
    text-align: center;
    margin-bottom: 48px;
    padding-bottom: 48px;
    
}

.page #side-nav-content{
        overflow: scroll;
    width: 300px;
     height: calc(100vh - 60px);
    position: fixed;
    border-right: 1px solid #D6E7EB;
    padding: 12px;
        background: white;
}

#side-nav-content .menu{
    padding-bottom: 24px;
}


h1.entry-title, h2.entry-title{
   font-weight: 300;

}


#side-nav-content .menu ul,
#side-nav-content .menu ul li{
    list-style: none;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

#side-nav-content .menu ul li a{

    text-decoration: none;
    padding: 6px 8px;

}

#side-nav-content .menu ul.children a{
    text-decoration: none;
    width: 100%;
    display: inline-block;
    padding: 6px 8px;
    font-size: 15px;
    line-height: 1;
    font-weight: 400;
}


#side-nav-content .menu ul li a:hover{
    background-color: #E6F0F3;
}

#side-nav-content .menu ul li.page_item{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

#side-nav-content .menu ul.children li{
    margin-bottom: 0px;


}


#side-nav-content .menu .current_page_item a{
   color: #96a5e8;
}

#side-nav-content .menu ul.children .current_page_item a{
       color: #96a5e8;
       font-weight: 700;
}

#side-nav-content li.page_item_has_children > a:first-of-type {
    font-size: 18px;
    font-weight: 700;
    cursor: default;
    text-decoration: none;
}

#side-nav-content li.page_item_has_children:hover > a:first-of-type {
    background: none;
}



.singular .entry-title {
    font-size: 82px;
}


/*Footer*/
.no-widgets .site-footer {
    margin-top: 24px;
}

#colophon{
    display: none;
}
.logged-in #colophon{
    display: block;
        width: calc(100vw - 300px);
    margin: 0;
    float: right;
    padding: 48px;
}

.post-5{
    width: 100%;
    color: white;
}

.logged-in .post-5{
    background: url(img/venus.jpg) no-repeat;
    background-size: cover;
    color: white;
}

.post-5 a{
    color: white;
}


/*Responsive*/


@media (max-width: 500px){
    
    body{
        font-size: 16px;
    }
    .site-description{
        display: none;
    }
    
    .site-main {
        padding: 0;
        display: block;
    }

   .page #side-nav-container{
       display: none;
       position: absolute;
       width: 100%;
       float: none;
       margin-top: 0;
       top: 52px;
    }
    
    .page #side-nav-content{
        width: 100%;
        border: none;
        height: calc(100vh - 60px);

    }
    
    .logged-in .site-main article {
    padding: 24px;
    width: 100%;
}

    .site-header:not(.has-menu) {
        justify-content: left;
    }

    .logged-in #colophon {
        width: 100%;
        margin: 0;
        float: none;
        padding: 28px;
        max-width: 100%;
        text-align: center;
    }
    
    .singular .entry-title {
        font-size: 42px;
    }

    .site-main article .entry-header {
        text-align: center;
        margin-bottom: 24px;
        padding-bottom: 24px;
    }
    
   .logged-in #mobile-menu{
        display: block;
        background: url(img/menu.png) no-repeat center center;
        background-size: 100%;
        width: 32px;
        height: 32px;
        margin-right: 10px;
    }
    
    #masthead{
        padding: 8px 18px;
        border-bottom: 1px #c9c9c9 solid;
    }
    
    #loginout {
    position: absolute;
    right: 18px;
    font-size: 14px;
    top: 12px;
}

.site-content {
    margin-top: 50px;
}

h2{
    font-size: 1.8rem;
}
h3{
    font-size: 1.4rem;
}



}