h1 {
    margin-bottom: .6em;
}

h2 {
    margin: 1.5em 0 .9em 0;
}

h3, h4 {
    margin: 1.3em 0 .8em 0;
}

pre {
    overflow-x: auto;
    border: 1px solid #999;
    border-radius: 4px;
    background-color: #eee;
    color: #444;
    padding-left: 8px;
    line-height: 1.5em;
    font-size: .9rem;
}

.inline_code {
    border: 1px solid #999;
    border-radius: 4px;
    background-color: #eee;
    color: #444;
    font-family: "ROBOTO-MONO", monospace;
    padding: 0 1px;
}

.page_header_option.blog {
    color: #dde2f0;
}

.side_menu {
    background: #fafafa;
    padding: 20px;
    border-radius: 5px;
    margin-right: 30px;
    min-width: 23%;
    width: 23%;
    
    --button-display: block;
    --button-padding: .4em 0;
    --button-color: var(--grey40);
    --button-hover-color: black;
    --button-text-decoration: none;
    --button-active-color: var(--cyan1);
    --button-border: none;
    --button-outline: none;
    --button-line-height: 1.4;
}

.side_menu .dd-button:first-of-type {
    --button-font-weight: bold;
    font-size: 1.3rem;
    margin-bottom: .5em;
}

.side_menu label {
    display: block;
    color: var(--darkblue1);
    font-weight: bold;
    text-transform: uppercase;
    font-size: .95rem;
    padding: .5em 0;
}

@media(max-width: 1024px) {
    .side_menu {
        display: none;
    }
}

.main_content {
    background: #fafafa;
    padding: 20px;
    border-radius: 5px;
}

note_regular, note_important, note_tip {
    display: block;
    margin-bottom: 1em;
    border-left: 4px solid #0000aa;
    padding-left: 1rem;
    line-height: 1.8;
}

note_regular::before, note_important::before, note_tip::before {
    font-weight: bold;
}

note_regular {border-color: #0000aa}
note_tip {border-color: #008000}
note_important {border-color: #ff0000}

note_regular::before {content: "NOTE:"; color: #0000aa}
note_tip::before {content: "TIP:"; color: #008000}
note_important::before {content: "IMPORTANT:"; color: #ff0000}

.author_line {
    font-size: .9rem;
    font-style: italic;
    color: var(--grey40);
}

.related_section {
    margin-top: 3em;
}

.related_section::before {
    content: "RELATED:";
    font-weight: bold;
    font-size: .9rem;
    color: var(--darkblue1);
}