/* core styles */

@font-face {
    font-family: vt323;
    src: url("/fonts/VT323-Regular.ttf") format("truetype");
}
@font-face {
    font-family: fira;
    src: url("/fonts/FiraCode-Regular.ttf") format("truetype");
}
body {
    background: #3E1C43;
    font-family: vt323;
    color: #F0F0F0;
}

div#popup {
    background: #f0f0f0;
    color: #3E1C43;
    width: 50%;
    margin: auto;
    margin-top: 10%;
    text-align: center;
    padding: 5px;
    border-style: double;
    border-width: 8px;
    border-color: #3E1C43;
}

/* intro styles */

#logo-container {
    display: flex;
    justify-content:space-around;
}

pre {
    font-family: fira;
    white-space: pre;
    padding: 5px;  
}

pre#soon {
    font-family: vt323;
    background: #F0F0F0;
    color: #3E1C43;
}
/* main styles */

p#out-text {
    background: #F0F0F0;
    color: #3E1C43;
}

input {
    background: #3E1C43;
    color: #f0f0f0;
    border: none;
    border-style: hidden;
    outline: none;
}

.hf {
    background: #F0F0F0;
    color: #3E1C43;
    font-weight: bold;
    height: 20px;
    width: 98%;
    margin: 0;
}

div#title {
    max-width: max-content;
    width: max-content;
    background: #3E1C43;
    color: #F0F0F0;
    height: 20px;
}

div#body-block {
    height: 98%;
}