.column {
    background-color: rgb(30, 0, 52);
    margin: 0.5rem;
}

#vregex-interface {
    display: flex;
    flex-direction: column;
    margin: 1rem;
    border: 1px solid greenyellow;
    width: fit-content;
    align-items: center;
    background-color: rgb(22, 0, 39);
    
    input {
        display: block;
        width: 30vw;
        background-color: rgb(53, 53, 53);
        color: whitesmoke;
        margin: 0.25rem 1rem;
        padding: 0.2rem;
        font-family: 'Courier New', Courier, monospace;
        text-align: center;
        font-weight: bold;
    }

    hr {
        width: 30vw;
        margin: 0.5rem 0;
    }
}

#vregex-demo:hover {
    color: greenyellow;
    cursor: default;
}

#demo-desc {
    max-height: 25vh;
    overflow: auto;
    border: 1px solid greenyellow;
    margin: 1rem;
    background-color: rgb(22, 0, 39);

    scrollbar-width: thin;
    scrollbar-color: greenyellow rgb(22, 0, 39);

    pre {
        display: inline;
    }

    code {
        color: gold;
    }
}

#vregex-error {
    visibility: hidden;
    font-family: 'Courier New', Courier, monospace;
    font-size: small;
    color: red;
}

#vregex-graph {
    padding: 1.5rem;
}