@charset "utf-8";
:root {
    --bg:#f2f5f7;
    --text: #3b3d3f; 
    --accent:#268cd0;
    

}

html{font-size:16px;}

body{color:var(--text); background-color: var(--bg);  
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
*,*::before,*::after
    {padding:0;margin:0;box-sizing:border-box;border:none;list-style: none;text-decoration: none;font-family: inherit; outline: 0;}


img{max-width:100%;}
img[src='']{visibility:hidden;}


h1,h2,h3,h4,h5{font-weight:bold;}
h1{font-size: 2.2rem;}
h2{font-size: 1.8rem;}
h3{font-size: 1.4rem;}
h4{font-size: 1.1rem;}
h5{font-size: 1.0rem;}

small{font-size:0.6rem;}

a{ 
    text-decoration:none; 
}
a:link,a:visited{
    color:var(--text);
}
a:focus,a:active,a:hover{
    color:color-mix(in srgb, var(--accent), black 20%);
}


/*================*/

body{
    width: 100%;
    overflow-x: hidden;
}

.container {
    display: flex;
    gap: 2rem;
    min-height: 100vh;
    max-width: 1200px;
    margin: 0 auto;
}

/*================*/

.an-sidebar{
    width: 250px;
    background-color: #f4f4f4;
    border-right: 1px solid #ddd;
    position: sticky;
    top: 0;
    left: 0;

    height: 100vh;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}
.an-article{    
    padding: 40px;
    width: 100%;
    line-height: 1.8;
}
 


.an-sidebar{
    &>h3{
        margin-bottom: 20px;
    }

    & nav>ul>li{
        margin-bottom: 1rem;
        font-weight: 700;
    }
    & nav>ul ul{
        margin-left:0.8rem;
        margin-top:0.4rem;
        font-size: 0.875rem;

        & li{
            margin-bottom: 0.4rem;
            font-weight: 300;
        }
    }

    & .nav-active{
        background-color: #fff3cd;
        
        
        
    }
}

.an-article{ 
    &>header,&>section{
        margin-bottom: 3rem;
    }
    & h3{margin-top:2rem;}
    & h2,& h3{scroll-margin-top:1.5rem;}

    & h3~dl,h3~p{ margin-left: 2rem;}
    & dt{font-weight: bold; margin-top:0.5rem;}
    & dd{
        display: list-item;
        list-style: circle;
        margin-left: 1.2rem;
    }

    & a{text-decoration: underline dotted var(--accent) 1px;}



}

@media (max-width: 768px) {
    .an-sidebar{
        display: none;
    }
    
}