/* ----

# Paul
# By: Dreamer-Paul
# Last Update: 2021.12.16

保罗的首页、作品和 API 页通用模板

本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com

---- */

/* 0 - 全局
-------------------------------- */
:root{
    --secondly: #2ecc71;
}

body{
    margin-left: 10em;
    padding: 1em 1.5em;
}

h1, h2, h3{ font-weight: lighter }

button{
    padding: 0;
    font: inherit;
    outline: none;
    cursor: pointer;
}

.radius-full{ border-radius: 100% }

/* 1 - 页眉
-------------------------------- */
.sidebar{
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2;
    color: #fff;
    width: 10em;
    position: fixed;
    background-color: #3498db;
    background-color: var(--primary);
    transition: transform .3s;
}

.sidebar .header{
    padding: 1em;
    background: #4cb1f3;
}

.sidebar h1{
    font-size: 1.3em;
    text-align: center;
}
.sidebar i{
    width: 1em;
    margin-right: .75em;
}
.sidebar hr{
    margin: 0;
    border-color: rgba(0, 0, 0, .15);
}

.sidebar .wrapper{
    height: 100%;
    display: flex;
    overflow-y: auto;
    flex-direction: column;
}
.sidebar .wrapper::-webkit-scrollbar{ width: 0 }

.sidebar nav a{
    padding: 1em;
    display: block;
    color: rgba(255, 255, 255, .9);
}
.sidebar nav i{
    opacity: .8;
    transition: transform .3s;
}

.sidebar nav a:hover{ background: rgba(0, 0, 0, .2) }
.sidebar nav a:hover i{ transform: scale(1.2); }

.sidebar a.active, .sidebar .has-child > a{
    position: relative;
    background: rgba(0, 0, 0, .1);
}
.sidebar a.active:before ,.sidebar .has-child > a:before{
    right: 0;
    content: '';
    position: absolute;
    border: .75em solid transparent;
    border-right-color: #fff;
}

.sidebar .sub-menu a{ padding: .75em 1em }

@media screen and (max-width: 600px){
    body{ margin-left: 0 }

    .sidebar{
        transform: translateX(-10em);
    }
    .sidebar.active{
        transform: translateX(0);
        box-shadow: .25em 0 .5em rgba(0, 0, 0, .2);
    }

    aside .toggle{
        top: 0;
        left: 10em;
        z-index: 3;
        color: #fff;
        width: 2.5em;
        height: 2.5em;
        cursor: pointer;
        position: absolute;
        text-align: center;
        background-color: var(--primary);
        box-shadow: .25em 0 .5em rgba(0, 0, 0, .2);
    }
    aside .toggle:before{
        content: "\f0c9";
        line-height: 2.5em;
        font-family: "FontAwesome";
    }

    .sidebar.active .toggle{
        background-color: #2ecc71;
        background-color: var(--secondly);
    }
}

.sidebar .menu{
    flex: 1 1 auto;
}

.sidebar .user-area{
    cursor: pointer;
    user-select: none;
    padding: .75em 1em;
    transition: background .3s;
    border-top: 1px solid rgba(0, 0, 0, .15);
}
.sidebar .user-area:hover{ background: rgba(0, 0, 0, .2) }
.sidebar .user-area img{
    width: 2em;
    border-radius: 66%;
    border: 2px solid #fff;
}
.sidebar .user-area .username{
    margin-left: .25em;
    vertical-align: middle;
}

/* 2 - 正文
-------------------------------- */
main, footer{
    margin: auto;
    max-width: 45em;
}

main .header{
    padding: 1em;
    text-align: center;
    margin-bottom: 3em;
    border-bottom: 1px solid #eee;
}
main .header h1{ font-size: 2em }
main .header h2{ color: #666; font-size: 1.25em }

main .post{
    margin-bottom: 3em;
}

main .post h3{
    margin-top: 3em;
    position: relative;
}
main .post > h3:after{
    content: "";
    width: 1.5em;
    height: 2px;
    display: block;
    margin-top: .25em;
    background-color: #2ecc71;
    background-color: var(--secondly);
}
main .post h3:first-child{ margin-top: 0 }

main .post img{ border-radius: .5em }

main .box{
    height: 100%;
    color: #fff;
    display: block;
    padding: 2em 1em;
    text-align: center;
    transition: background .3s;
    animation: fade-in-top .3s backwards;
}
main .box.first{
    background: #2ecc71;
    animation-delay: .2s;
}
main .box.first:hover{ background: #27ae60 }

main .box.second{
    background: #3498db;
    animation-delay: .4s;
}
main .box.second:hover{ background: #2980b9 }

main .box.third{
    background: #f1c40f;
    animation-delay: .6s;
}
main .box.third:hover{ background: #f39c12 }

main .box.fourth{
    background: #e74c3c;
    animation-delay: .8s;
}
main .box.fourth:hover{ background: #c0392b }

main .box.fifth{
    background: #9b59b6;
    animation-delay: 1s;
}
main .box.fifth:hover{ background: #8e44ad }

main .box.sixth{
    background: #1abc9c;
    animation-delay: 1.2s;
}
main .box.sixth:hover{ background: #16a085 }

main .box.seventh{
    background: #e67e22;
    animation-delay: 1.4s;
}
main .box.seventh:hover{ background: #d35400 }

main .box.eighth{
    background: #95a5a6;
    animation-delay: 1.6s;
}
main .box.eighth:hover{ background: #7f8c8d }

main .box i{ margin-right: .5em }
main .box h3:before{ content: normal }

main kplayer{ margin-bottom: 1em; }

main .comments{
    margin-bottom: 3em;
}

/* 3 - 页尾
------------------------------ */
footer{
    color: #666;
    padding: 1em 0;
    text-align: center;
    border-top: 1px solid #eee;
}

.server-flag{
    top: 0;
    right: 0;
    z-index: 6;
    color: #fff;
    cursor: help;
    position: fixed;
    background: orangered;
    padding: 2em 5em .5em 5em;
    transform-origin: top right;
    transform: rotate(45deg) translateX(50%);
}

/* 4 - 附加
------------------------------ */
.gt-meta{
    margin-top: 0;
    padding-top: 0;
}

.gt-copyright{ display: none }

.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata{ color: slategray }
.token.punctuation{ color: #f8f8f2 }
.token.namespace { opacity: .7 }
.token.property, .token.tag, .token.function-name, .token.constant, .token.symbol, .token.deleted{ color: #f92672 }
.token.boolean, .token.number { color: #ae81ff }
.token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted{ color: #a6e22e }

.token.operator, .token.entity, .token.url, .token.variable{ color: #f8f8f2 }
.token.atrule, .token.attr-value, .token.class-name{ color: #e6db74 }
.token.keyword { color: #66d9ef }
.token.regex, .token.important{ color: #fd971f }

.language-css .token.string, .style .token.string { color: #28b9be }

.token.important, .token.bold { font-weight: bold }
.token.italic { font-style: italic }
.token.entity { cursor: help }
.token.important { font-weight: normal }