@font-face {
    font-family: "Monocraft";
    src: url("resources/Monocraft.woff") format("woff");
}
html {
    font-size: 3vh;
    scroll-behavior: unset;
    --terminal-font: 350 0.5rem "Monocraft";
}
body {
    scroll-behavior: unset;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0;
    height: 100vh;
}

#terminal {
    display: flex;
    flex-direction: column-reverse;
    flex-basis: content;
    flex-shrink: 0;
    
    height: 100vh;
    min-width: 100vw;
    max-width: 100vw;
    
    background-color: #222222;
    color: white;
    
    font: var(--terminal-font);
}
#terminal #log {
    margin: 0.3rem;
    margin-bottom: 0.1rem;
    flex-grow: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column-reverse;
    /* font-size: 1rem; */
}
#terminal #log > p {
    padding: 0.2em;
    color: white;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    background-color: #3338;
    line-height: 1em;
    line-break: auto;
}
#terminal #log > p:nth-child(even) {
    background-color: #4448;
}
#terminal #log > p.error {
    background-color: #a338;
}
#terminal #log > p.error:nth-child(even) {
    background-color: #e338;
}
#terminal #log > p.warn {
    background-color: rgba(170, 118, 51, 0.533);
}
#terminal #log > p.warn:nth-child(even) {
    background-color: rgba(238, 151, 51, 0.533);
}
#terminal #log > p.mus {
    background-color: lightblue;
    color: black;
}
#terminal #log > p.mus:nth-child(even) {
    background-color: lightskyblue;
    color: black;
}
#terminal #log > p.debug {
    background-color: green;
    color: black;
}
#terminal #log > p.debug:nth-child(even) {
    background-color: lime;
    color: black;
}
#terminal #break > p.break {
    background-color: #222;
}
#terminal #log:before {
    content: "";
    display: block;
    background-image: repeating-linear-gradient(
        25deg,
        transparent,
        transparent 1rem,
        #555 1rem,
        #555 2rem
    );
}
#terminal #log:after {
    content: "";
    display: block;
    background-image: repeating-linear-gradient(
        25deg,
        transparent,
        transparent 1rem,
        #555 1rem,
        #555 2rem
    );
}
#terminal #input {
    margin: 0.3rem;
    padding: 0.2em;
    margin-top: 0.1rem;
    height: 1em;
    flex-grow: 0;
    background-color: #6668;
    border: none;
    outline: none;
    caret-color: white;
    color: white;
    font: var(--terminal-font);
}

@media (max-aspect-ratio: 1/1) {
    html {
        font-size: 4vw;
    }
    body {
        flex-direction: column;
    }
    #terminal {
        width: 100vw;
        min-height: 100vh;
        max-height: 100vh;
        max-width: 100vw;
    }
    #terminal #input {
        height: 1.5em;
        font-size: 3em;
        padding: 0em;
        margin: 0.3rem;
    }
    #terminal #log {
        height: 1.5em;
        font-size: 3em;
        
    }
    #terminal #mus {
        height: 1.5em;
        font-size: 3em;
    }
    #terminal #break {
        height: 1.5em;
        font-size: 3em;
    }
}