:root{
    --back:#2C2B2B;
    --top_back:#333232;
    --border:1px solid #454545;
    --color:#00bb00;
    --shadow:0px 0px 8px rgba(0,0,0,0.3);
    --add_back:#3D3C3C;
    --add_top:#454545;
    --text:#f2f2f2;
    --text2:#141414;
    --text3:#848484;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background:transparent;
    display:none;
}

::-webkit-scrollbar-thumb {
    background: var(--top_back);
    transition:.2s;
    border-radius: 10px;
    z-index:5;
}


*{
    font-family: 'IBM Plex Sans', sans-serif;
}

body,html{
    width:100vw;
    height:100vh;
    margin:0px;
    background:var(--back);
    overflow: overlay;
}

.nav{
    height:45px;
    width:100%;
    background:var(--top_back);
    border-bottom:var(--border);
    display:flex;
    align-items:center;
    position:fixed;
}

.nav a{
    display:block;
    position:relative;
    float:left;
}

.nav_img{
    height:100%;
    width:45px;
}

.nav_img img,.nav_pro img{
    width:calc(100% - 10px);
    height:calc(100% - 10px);
    margin:5px;
    box-sizing:border-box;
    object-fit:cover;
}

.nav_title{
    margin-left:8px;
    color:var(--text);
    font-size:20px;
}

.nav_pro{
    float:right !important;
    height:45px;
    width:45px;
    position:absolute !important;
    right:4px;
}

.nav_pro img{
    border-radius:50%;
    box-shadow:var(--shadow);
    border:var(--border);
}

.home_main{
    position:relative;
    box-sizing:border-box;
    top:46px;
    height:calc(100% - 46px);
    width:100%;
    left:0;
    padding:30px;
}