html {
    color: #E0E0E0;
    background-color: #1A1A1A;
    margin: 0;
    padding: 0;
    padding-top: 0;
    padding-bottom: 0;
    font-family: "Inter", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", sans-serif;
    font-size: 12pt;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
header {
    background-color: #1A1A1A;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: fixed;
    z-index: 10;
}
main {
    padding: 24px;
    padding-top: 60px;
    padding-bottom: 0px;
    flex: 1;
}
footer {
    padding: 24px;
    padding-top: 0px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 10;
}

h1, h2, h3, h4, h5, h6 {
    color: #FFFFFF;
}

/* Layout */
section {
    padding-top: 4px;
    padding-bottom: 4px;
}
.block {
    background-color: #272727;
    border-radius: 6px;
    padding-top: 4px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 4px;
    margin-bottom: 16px;
}

.flex {
    display: flex;
    align-items: center;
    gap: 16px;
}
.flex > * {
    margin: 0;
}
.flex-1 {
    flex: 1;
}
.flex-vertical {
    flex-direction: column;
}

/* Code */
pre {
    background-color: #272727;
    border-radius: 4px;
    padding: 8px;
    padding-left: 16px;
    overflow-x: auto;
    white-space: pre;
    line-height: 24px;
    font-size: small;
    font-family: "MesloLGS Nerd Font", monospace;
    font-optical-sizing: auto;
    font-style: normal;
}
.block pre {
    margin-bottom: 20px;
}

.code {
    padding: 4px;
    font-family: "MesloLGS Nerd Font", monospace;
    font-optical-sizing: auto;
    font-style: normal;
}

/* Fonts */
a {
    text-decoration: underline;
    color: inherit;
}
h1 {
    font-weight: 400;
    line-height: 8pt;
}
h2 {
    font-weight: 300;
}
section h2, section h3 {
    line-height: 8pt;
}

.font-inter {
    font-family: "Inter";
}
.font-nsajp {
    font-family: "Noto Sans JP";
}
.font-nsatc {
    font-family: "Noto Sans TC";
}
.font-nsasc {
    font-family: "Noto Sans SC";
}
.font-nsakr {
    font-family: "Noto Sans KR";
}
.font-meslo {
    font-family: "MesloLGS Nerd Font";
}

.font-small {
    font-size: small;
}
.font-bold {
    font-weight: 400;
}

.text-no-decoration {
    text-decoration: none;
}
.text-underline {
    text-decoration: underline;
}

/* Colors */
.text-white {
    color: #FFFFFF;
}

.text-bg {
    color: #1A1A1A;
}
.text-bg-alt {
    color: #272727;
}
.text-tx {
    color: #E0E0E0;
}
.text-tx-alt {
    color: #939393;
}

.text-red {
    color: #A03333;
}
.text-yellow {
    color: #CCA000;
}
.text-green {
    color: #00A050;
}
.text-teal {
    color: #00A0A0;
}
.text-blue {
    color: #0080C0;
}
.text-orange {
    color: #C86000;
}
.text-brown {
    color: #A07033;
}
.text-purple {
    color: #7844A0;
}
.text-magenta {
    color: #A043A0;
}
.text-indigo {
    color: #334DA0;
}

.text-bright-red {
    color: #C84040;
}
.text-bright-yellow {
    color: #FFC800;
}
.text-bright-green {
    color: #00C878;
}
.text-bright-teal {
    color: #00C8C8;
}
.text-bright-blue {
    color: #00C0FF;
}
.text-bright-orange {
    color: #FA7800;
}
.text-bright-brown {
    color: #C88C40;
}
.text-bright-purple {
    color: #C84040;
}
.text-bright-magenta {
    color: #C854C8;
}
.text-bright-indigo {
    color: #4060C8;
}

/* Responsive Design */
.hide {
    display: none;
}
@media (max-width: 720px) {
    .bold-on-small {
        font-weight: 400;
    }
    .hide.show-on-small {
        display: block;
    }
}
@media (min-width: 720px) and (max-width: 1080px) {
    .hide.show-on-medium {
        display: block;
    }
}
@media (min-width: 1080px) {
    .hide.show-on-large {
        display: block;
    }
}

/* Miscellaneous */
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.banner {
    height: 50px;
    width: auto;
    border-radius: 6px;
}
.social-icons {
    width: 12pt;
    height: 12pt;
    display: block;
}