@import url(/fonts/pressstart2p/css.css);
@import url(/fonts/vt323/css.css);
@import url(/fonts/dejavusansmono/css.css);

canvas,
iframe,
img,
select,
svg,
textarea,
video {
    max-width: 100%
}

.overflow-container {
    overflow-x: scroll
}

.aspect-ratio {
    height: 0;
    padding-top: 56.25%;
    position: relative
}

.aspect-ratio--object {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100
}

html {
    background-image: url("/images/background.gif")
}

body {
    background-color: rgba(0, 0, 0, 0.97);
    color: rgba(255, 255, 255, 0.7);
    /* padding: 5px;
    margin: 1.9em auto;
    width: 80%; */
    border: 1px dashed rgba(255, 255, 255, 0.7);
    font-family: "VT323", monospace
}

html {
    overflow: scroll;
    overflow-x: hidden;
    scrollbar-color: green black;
    scrollbar-width: thin;
    -ms-overflow-style: none
}

::-webkit-scrollbar {
    width: 13px;
    height: 13px;
    background: black
}

::-webkit-scrollbar-thumb {
    background-color: green;
    border: 3px solid transparent;
    border-radius: 9px;
    background-clip: content-box
}

p {
    font-size: 20px;
    color: #00FF66
}

ul {
    font-size: 18px
}

li {
    margin-bottom: 0.35em
}

img {
    display: block
}

a {
    outline: none;
    text-decoration: none;
    color: #DDDDDD;
    font-weight: bold
}

a:hover {
    text-decoration: underline
}

strong,
em,
del {
    color: yellow
}

blockquote {
    margin-inline-start: 1.5em;
    border-left: 5px solid blue;
    padding-left: 10px
}

button {
    margin: 1em auto;
    outline: none;
    background-color: transparent;
    color: white;
    cursor: pointer;
    padding: 5px 30px 5px 30px
}

button:hover {
    background-color: gray
}

button::-moz-focus-inner {
    border: 0
}

header,
nav {
    text-align: center
}

header,
nav,
main,
footer {
    margin: 15px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.5)
}

.ascii {
    color: rgba(255, 255, 255, 1);
    font-weight: bold
}

.logo {
    font-family: monospace
}

.small-avatar {
    display: none
}

.site-name,
#cursor {
    font-family: "Dejavu Sans Mono", "Courier New", "Dejavu Sans Mono Backup", monospace
}

.site-name {
    font-size: 13px
}

nav ul {
    display: block;
    padding: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: 13px;
    line-height: 26px
}

nav ul li {
    display: inline;
    padding-left: 10px
}

nav ul li a {
    text-decoration: none;
    color: rgba(255, 255, 255, 1)
}

nav ul li a:hover {
    font-weight: bold
}

main {
    margin: 15px 22px 15px 22px
}

main a {
    word-break: break-word
}

main header {
    text-align: center;
    padding-bottom: 15px;
    border: 0
}

main iframe {
    margin: 15px auto
}

main li {
    word-break: break-word
}

figcaption {
    font-style: italic;
    margin-top: 5px
}

table {
    margin: 0 auto;
    font-size: 18px;
    table-layout: auto;
    width: 100%
}

td,
th {
    color: #ccc;
    border: 1px solid #ddd;
    padding: 10px 15px
}

tr:nth-child(even) {
    background-color: #001e00
}

tr:hover {
    background-color: gray
}

th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: green;
    color: white
}

pre {
    font-family: "Dejavu Sans Mono", "Courier New", "Dejavu Sans Mono Backup", monospace
}

code,
code a {
    font-family: "VT323", monospace;
    color: #444444;
    font-weight: normal
}

li code,
p code {
    color: red
}

footer {
    padding-bottom: 15px;
    text-align: center;
    font-size: 18px
}

#totop {
    display: none;
    font-size: 15px;
    font-family: "VT323", monospace
}

.en {
    display: block;
    font-size: 15px;
    font-family: "VT323", monospace
}

.highlighter-rouge {
    color: rgba(255, 255, 255, 0.4)
}

.highlight {
    color: rgba(255, 255, 255, 0.7)
}

.highlight {
    border: 1px dashed rgba(255, 255, 255, 0.3);
    padding: 15px;
    background-color: #0D0D0D
}

.zh {
    display: block;
    font-size: 12px;
    font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp"
}

@-moz-document url-prefix() {
    pre {
        line-height: 1.135em
    }
}

@media only screen and (min-width:1000px) {
    table {
        padding: 0px 5vw
    }
}

@media only screen and (min-width:1300px) {
    table {
        padding: 0px 10vw
    }
}

@media only screen and (max-width:820px) {
    .large-avatar {
        display: none
    }

    .small-avatar {
        display: block;
        font-size: 10px
    }

    .site-name {
        font-size: 8px
    }
}

@media only screen and (max-width:620px) {
    figure {
        margin: 0
    }

    .small-avatar {
        font-size: 7px
    }
}

@media only screen and (max-width:420px) {
    .site-name {
        font-size: 7px;
        margin-bottom: 2em
    }
}

@media only screen and (max-width:410px) {
    .small-avatar {
        font-size: 6px
    }

    .site-name {
        font-size: 6px;
        margin-bottom: 3em
    }
}