body {
    background-color: #282a36;
    color: #50fa7b;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    /* 继承父元素的文本颜色 */
}

#bottom {
    position: absolute;
    bottom: 0;
    display: flex;
    overflow: hidden;
    font-size: 16px;
    justify-content: center;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    color: #50fa7b;

}

html {
    margin: 0;
}

.keywords {
    color: #CC7832;
}

.func {
    color: #FFC66D;
}

.strings {
    color: #6A8759;
}

.note {
    color: #808080;
}

.bracket {
    color: #BBBBBB;
}

.operator {
    color: #F0C674;
}

.func1 {
    color: #B09D79;
}

.pack {
    color: #AFBF7E;
}

.typewriter {
    margin: auto;
    padding: 20px;
    border-radius: 5px;
    background-color: #1e1f29;
    width: 300px;
    font-family: 'JetBrains Mono', monospace;
}

.typewriter div {
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    animation: typing 4s steps(40) 0.5s forwards;
}

.typewriter div:nth-child(2) {
    animation-delay: 2s;
}

.typewriter div:nth-child(3) {
    animation-delay: 5s;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
        border-right: 0px;
    }
}

@keyframes typing2 {
    from {
        border-right: 2px solid #fff;
        width: 0;
    }

    to {
        width: 100%;
        border-right: 0px;
    }
}

.run-div {
    text-align: right;
    margin-top: 10px;
    opacity: 0;
    animation: runDiv 2s ease-in-out forwards;
    animation-delay: 5s;
}

@keyframes runDiv {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* 按钮样式 */
.el-button {
    width: 100px;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    user-select: none;
    background-color: #548de2;
    border: 0px;
    color: #fff;
    font-size: 14px;
    padding: 10px 10px;
    border-radius: 4px;
    transition: all .3s;
}

.el-button:hover {
    background-color: #66b1ff;
}

.el-button:active {
    background-color: #3a8ee6;
    border-color: #3a8ee6;
    color: #fff;
}

/* 按钮内部的文本样式 */
.el-button span {
    position: relative;
    z-index: 1;
}


* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --hue: 0;
    --sat: 0%;
    --bg: hsl(var(--hue), var(--sat), 90%);
    --fg: hsl(var(--hue), var(--sat), 10%);
    --trans-dur: 0.3s;
    font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}

body,
button {
    color: var(--fg);
    font: 1em/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}

.keyboard,
.keyboard:before,
.keyboard:after {
    transition:
        background-color var(--trans-dur),
        box-shadow var(--trans-dur);
}

.keyboard,
.keyboard__key-lines {
    display: flex;
}

.keyboard {
    background-color: hsl(var(--hue), var(--sat), 80%);
    background-image: linear-gradient(90deg, hsla(var(--hue), var(--sat), 10%, 0.4), hsla(var(--hue), var(--sat), 10%, 0));
    border-radius: 0.75em;
    box-shadow:
        -0.5em 0.5em 0.75em hsla(0, 0%, 0%, 0.6),
        0 0 0 1px hsl(var(--hue), var(--sat), 67%) inset;
    align-items: center;
    margin-top: 100px;
    padding: 0.375em;
    position: relative;
    width: 18.5em;
    height: 6.5em;
}

.keyboard:before,
.keyboard:after {
    background-color: hsl(var(--hue), var(--sat), 90%);
    content: "";
    display: block;
    position: absolute;
    top: 100%;
}

.keyboard:before {
    box-shadow:
        -0.5em 0.5em 0.75em hsla(0, 0%, 0%, 0.6),
        0.25em 0 0.25em hsla(var(--hue), var(--sat), 10%, 0.2) inset,
        0.25em -1.25em 0.5em hsla(var(--hue), var(--sat), 10%, 0.5) inset;
    left: calc(50% - 0.5em);
    width: 1em;
    height: 40em;
}

.keyboard:after {
    border-radius: 0 0 0.25em 0.25em;
    box-shadow: 0.375em 0.25em 0.5em hsla(var(--hue), var(--sat), 10%, 0.5) inset;
    left: calc(50% - 0.75em);
    width: 1.5em;
    height: 1.25em;
}

.keyboard__cmd {
    display: block;
    width: 1em;
    height: 1em;
}

.keyboard__key {
    background-color: hsl(var(--hue), var(--sat), 95%);
    border-radius: 0.5em;
    box-shadow:
        -0.4em -0.25em 0.25em hsla(0, 0%, 0%, 0.25),
        0 0 0 0.1em hsla(0, 0%, 0%, 0.3),
        0.04em 0.04em 0.04em hsla(0, 0%, 0%, 0.4) inset,
        -0.1em -0.1em 0.04em hsla(0, 0%, 100%, 0.8) inset;
    color: hsl(var(--hue), var(--sat), 50%);
    margin: 0 0.375em;
    outline: transparent;
    padding: 0.75em;
    position: relative;
    width: 5em;
    height: 5em;
    transition:
        background-color var(--trans-dur),
        box-shadow 0.15s,
        color var(--trans-dur);
    -webkit-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.keyboard__key--meta {
    width: 5.5em;
}

.keyboard__key:active,
.keyboard__key.active {
    box-shadow:
        0 0 0.2em hsla(0, 0%, 0%, 0.2),
        0 0 0 0.1em hsla(0, 0%, 0%, 0.4),
        0 -0.05em 0 hsla(0, 0%, 0%, 0.6) inset,
        -0.05em -0.15em 0.05em hsla(0, 0%, 100%, 0.8) inset;
}

.keyboard__key-line {
    font-size: 2em;
    line-height: 1;
}

.keyboard__key-line--small {
    font-size: 0.875em;
}

.keyboard__key-line--tr {
    margin: 0 0 auto auto;
}

.keyboard__key-line--br {
    margin: auto 0 0 auto;
}

.keyboard__key-lines {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: transform 0.15s;
}

.keyboard__key:active .keyboard__key-lines,
.keyboard__key.active .keyboard__key-lines {
    transform: translateY(-1px);
}

.keyboard__key:before {
    box-shadow: 0 0 0 0.5em hsla(223, 90%, 50%, 0);
    border-radius: 0.5em;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: box-shadow var(--trans-dur);
}

.keyboard__key:focus-visible:before {
    box-shadow: 0 0 0 0.5em hsla(223, 90%, 50%, 0.5);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue), var(--sat), 20%);
        --fg: hsl(var(--hue), var(--sat), 90%);
    }

    .keyboard__key {
        background-color: hsl(var(--hue), var(--sat), 15%);
        box-shadow:
            -0.4em -0.25em 0.25em hsla(0, 0%, 0%, 0.25),
            0 0 0 0.1em hsla(0, 0%, 0%, 0.3),
            0.04em 0.04em 0.04em hsla(0, 0%, 0%, 0.4) inset,
            -0.1em -0.1em 0.04em hsla(0, 0%, 100%, 0.05) inset;
        color: hsl(var(--hue), var(--sat), 90%);
    }

    .keyboard__key:active,
    .keyboard__key.active {
        box-shadow:
            0 0 0.2em hsla(0, 0%, 0%, 0.2),
            0 0 0 0.1em hsla(0, 0%, 0%, 0.4),
            0 -0.05em 0 hsla(0, 0%, 0%, 0.4) inset,
            -0.05em -0.15em 0.05em hsla(0, 0%, 100%, 0.05) inset;
    }
}