@import url('https://unpkg.com/xterminal/dist/xterminal.css');

.error {
    color: rgb(248, 88, 88);
}

.spinner:after {
    animation: changeContent 0.8s linear infinite;
    content: "⠋";
}

@keyframes changeContent {
    10% { content: "⠙"; }
    20% { content: "⠹"; }
    30% { content: "⠸"; }
    40% { content: "⠼"; }
    50% { content: "⠴"; }
    60% { content: "⠦"; }
    70% { content: "⠧"; }
    80% { content: "⠇"; }
    90% { content: "⠏"; }
}

.term-container {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    background-color: #161618;
    border: 1px solid #161618;
    border-radius: 6px;
    color: #efefef;
    flex-direction: column;
    overflow: hidden;
}

.term-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .25rem .75rem;
}

.term-container, .term-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

header {
    display: block;
    unicode-bidi: isolate;
}

.term-header .term-dots>:first-child {
    background-color: #ff5b52;
}

.term-header .term-dots>:nth-child(2) {
    background-color: #53c32b;
}

.term-header .term-dots>:last-child {
    background-color: #e6c029;
}

.term-header .term-dots>* {
    border-radius: 50%;
    display: inline-block;
    height: min(.65rem, 2.25vw);
    margin-right: min(.25rem, 1vw);
    width: min(.65rem, 2.25vw);
}

.terminal {
    background-color: #1e1e23;
    color: white;
    line-height: 1.5;
    padding: 10px;
    resize: none;
    border: none;
}