html,body{
    margin: 0;
    padding: 0;
}

#app{
    
    width: 100vw;
    height: calc(100vh - 5em);
    display: grid;
    grid-template-columns: auto 1fr;
}

.categorys {
    width: 10em;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: 1.8em;
    overflow: hidden;
    overflow-y: auto;
}

.categorys>b {
    padding: 0.8em 0.5em 0;
}

a.category {
    padding: 0 1.5em;
    margin-top: 0.8em;
}

a.category_focus{
    color: var(--el-color-primary);
}

a.category:hover {
    text-decoration: underline;
}

main {
    width: 100%;
    height: calc(100vh - 5em);
    overflow: hidden;
    overflow-y: auto;
}

.articles {
    margin: 0 auto;
    width: 790px;
    font-size: 1.8em;
    line-height: 1.5;
}

.article {
    margin-top: 2em;
    box-sizing: border-box;
    padding-bottom: 2em;
    border-bottom: 1px solid var(--el-border-color-darker);
}

.article img {
    width: 100%;
}

.article:last-child{
    border: none;
    padding-bottom: 0;
}

li {
    margin: 0.8em 0;
}

.download_old_versions {
    margin: 0 auto;
    width: 790px;
    font-size: 1.8em;
    line-height: 1.5;
}

.article a,
.app_top a,
.download_old_versions a{
    color:  var(--el-color-primary);
}

.article a:hover,
.app_top a:hover,
.download_old_versions a:hover{
    text-decoration: underline;
}

.app_top {
    margin: 0 auto;
    width: 790px;
    font-size: 1.8em;
    line-height: 1.5;
    text-align: center;
    margin-top: 2em;
    box-sizing: border-box;
    padding-bottom: 2em;
    border-bottom: 1px solid var(--el-border-color-darker);
}

@media screen and (max-width: 900px) {
    #app {
        font-size: 12px !important;
    }
    
    .categorys {
        display: none;
    }
    
    .app_top {width: 90vw;}
    
    .articles {
        width: 90vw;
    }
}