@font-face {
    font-family: 'VT323';
    src: url(src/VT323.woff);
}

html {
    height: 200%;
}

html::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('src/scanline.png') repeat;
    mix-blend-mode: darken;
    height: calc(var(--vh, 1vh) * 100); /* Use the custom property for the height */
    pointer-events: none;
    opacity: 0.7;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
    display: none;
}

body {
    background-color: #0c0f0b;
    color: #b9f38e;
    font-family: 'VT323', monospace;
    font-size: 1em;
    margin: 0;
    padding: 0;
}

@media (min-width: 800px) {
    body {
        font-size: 1.3em; /* Desktop */
    }
}

@media (min-width: 1200px) {
    body {
        font-size: 1.7em; /* Desktop */
    }
}

#art {
    font-family: 'VT323', monospace;
}

#terminal {
    padding: 20px;
}

#output {
    margin-bottom: 0px;
}

#inputLine {
    display: flex; /* Position the prompt and the input field on the same line */
}

.prompt {
    color: #b9f38e;
    margin-right: .3em;
}

#prompt {
    color: #b9f38e;
    margin-right: .3em;
}

#output div {
}

#input {
    font-family: 'VT323', monospace;
    font-size: 1em;
    background-color: #0c0f0b;
    color: #b9f38e;
    caret-color: #b9f38e;
    caret-shape: block;
    border: none;
    outline: none;
    border: 0;
    outline: 0;
    margin: 0;
    padding: 0:
    width: 100%;
    -webkit-appearance: none;
    -webkit-margin-before: 0;
    -webkit-margin-end: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;

    -webkit-padding-before: 0;
    -webkit-padding-end: 0;
    -webkit-padding-after: 0;
    -webkit-padding-start: 0;
}