@font-face {
    font-family: 'Jetbrains Mono';
    src: url('/static/fonts/JetBrainsMono-Regular.woff2') format('woff2'),
        url('/static/fonts/JetBrainsMono-Regular.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu Mono';
    src: url('/static/fonts/UbuntuMono-R-12.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
}

body {
    background-color: rgb(34, 34, 34);
    font-size: 13px;
    font-family: 'Jetbrains Mono', 'Microsoft Yahei UI', Arial, sans-serif;
    color: rgb(180, 180, 180);
    display: grid;
    /* 使用网格布局 */
    grid-template-areas:
        "hero hero hero"
        "header header header"
        "nav nav nav"
        "left main right"
        "footer footer footer";
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr) minmax(0, 0.4fr);
    gap: 0;
    /* 区块之间的间距 */
    margin: 0;
    padding: 0;
}

nav {
    grid-area: nav;
}

main {
    grid-area: main;
}

aside.left {
    grid-area: left;
}

aside.right {
    grid-area: right;
}

header {
    grid-area: header;
}

footer {
    grid-area: footer;
}

@media (max-width: 900px) {
    body {
        grid-template-areas:
            "hero"
            "header"
            "nav"
            "right"
            "main"
            "footer";
        grid-template-columns: 1fr;
    }

    main {
        margin: 0 2.5rem;
    }

    aside.left {
        display: none;
    }

    aside.right {
        margin: 0 2.5rem !important;
        position: relative !important;
        top: 0 !important;
    }
}