@font-face {
    font-family: 'open-sans';
    src: url('/assets/font/open-sans_r.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open-sans';
    src: url('/assets/font/open-sans_b.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'open-sans';
    src: url('/assets/font/open-sans_bi.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'open-sans';
    src: url('/assets/font/open-sans_i.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'consolas';
    src: url('/assets/font/consolas_r.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'consolas';
    src: url('/assets/font/consolas_b.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'consolas';
    src: url('/assets/font/consolas_bi.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'consolas';
    src: url('/assets/font/consolas_i.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

body {
    background: radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 1.01px), var(--body_bg);
    background-size: 24px 24px, auto;
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
    color: var(--body_color_1);
    font-family: 'consolas', monospace;
    word-wrap: break-word;
    font-size: 16px;
    height: 100vh;
    margin: 0px;
}

a {
    color: var(--a_color);
    text-decoration: none;
    font-weight: bold;

    &:hover {
        color: var(--a_color_hover);
        text-decoration: underline;
    }
}

p {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;
}

h2 {
    margin-top: 60px;
    margin-bottom: 20px;
}

pre {
    color: var(--pre_color);
    margin: 0px 10px 2px 40px;
    overflow-x: auto;
}

label {
    font-size: 16px;
    font-family: 'open-sans', 'arial';
}

ul.list {
    font-family: 'open-sans', 'arial';
    list-style-type: none;
    font-size: 14px;
    background: var(--ul_list_bg);
    padding: 20px;
    padding-left: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px 0px var(--ul_list_box_shadow);
    border: 1px solid var(--ul_list_border);

    li::before {
        content: '';
    }
}