/*********************************
     IMPORT MAIN PACKAGE
**********************************/
@import "./../../../assets/css/main.css"; 


/*********************************
            MAIN
**********************************/
main{
    width:100vw;
    height:100vh;
    overflow:hidden !important;
}


/*********************************
            HEADER
**********************************/

/*left_division*/
header .left_division{
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    color:var(--dark);
    scrollbar-width: none !important;
     -ms-overflow-style: none;
}

header .left_division::-webkit-scrollbar {
    display:none !important;
}

header .left_division article{
    background-color:var(--secondary);
    border-radius:10px;
    padding:1rem 2rem;
    position:relative;
}

header .left_division article:after{
    content:"\f0d7";
    font-family:"FontAwesome";
    position:absolute;
    color:var(--secondary);
    bottom:-15px;
    left:1rem;
    font-size:24px;
}

header .left_division article p{
    line-height:35px;
    color:var(--dark);
}

header .left_division .list{
    flex-wrap:wrap;
    flex-direction:column;
    gap:1rem;
}

header .left_division .list:not(:last-child){
    margin-bottom:5rem;
}

header .left_division .list ul{
    width:100%;
    background-color:var(--white);
    border-radius:10px;
    color:var(--dark);
}

header .list li{
    flex-wrap:wrap;
    flex-direction:column;
    gap:10px;
    padding:1rem 0;
}

header .list li hgroup{
    align-items:center;
    justify-content:space-between;
}

header .list li progress{
    background-color:var(--primary);
    outline:none;
    border:0;
    height:5px;
    border-radius:6px;
    overflow:hidden;
    width:100%;
}

header .list li progress::-webkit-progress-bar, header .list li progress::-webkit-progress-value, header .list li progress::-moz-progress-bar {
    background-color:var(--dark);
    border-radius:6px;
}

/*right_division*/
header .right_division{
    background-color:var(--dark);
    color:var(--lite);
    height:100vh;
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:space-between;
    gap:2rem;
}

header .links a{   
    color:inherit;
    position:relative;
}

header .logo img{
    filter:brightness(0) invert(1);
}

header .right_division .section_links{
    flex-wrap:wrap;
    flex-direction:column;
    gap:2rem;
}

header .right_division .section_links a{
    font-size:1.6em;
    white-space:nowrap;
}

header .right_division .section_links a:hover{
    color:var(--white);
}

header .right_division .section_links a:before{
    content:"";
    width:0px;
    height:100%;
    background-color:currentcolor;
    position:absolute;
    left:0;
    transition:0.5s;
}

header .right_division .section_links .active, header .right_division .section_links a:active{
    color:var(--white);
    padding-left:30px;
}

header .right_division .section_links .active:before, header .right_division .section_links a:active:before{
    width:20px;
}

header .right_division .footer_links{
    justify-content:flex-end;
    gap:1.5rem;
}

header .right_division .footer_links a:hover{
    color:var(--white);
}

@media (max-width:720px){
    main{
        height:auto;
    }
    
    header .left_division{
        height:auto;
        padding-bottom:80px;
    }
    
    header .left_division article{
        padding:0.5rem 1rem;
    }
    
    header .left_division article p{
        line-height:30px;
    }
    
    header .right_division{
        height:400px;
        position:fixed;
        bottom:-350px;
        left:0;
        border-radius:20px 20px 0 0;
        align-items:center;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        z-index:9;
    }
    
    header .right_division .section_links{
        gap:1rem;
        width:100%;
    }
    
    header .right_division .section_links a{
        width:100%;
        display:inline-block;
        font-size:16px;
        padding:1rem;
        padding-left:1rem;
        background-color:rgba(255,255,255,0.1);
    }
    
    header .right_division .section_links .active{
        background-color:var(--primary);
        color:var(--dark);
    }
    
    header .right_division .section_links .active:hover{
        color:var(--dark);
    }
    
    header .right_division .section_links a:hover{
        color:var(--lite);
    }
    
    header .right_division .section_links a:before, header .right_division .section_links a:active:before{
        display:none;
    }
    
    header .right_division .footer_links{
        justify-content:center;
    }
}