* {
    font-family: monospace;
    color: #f5f2f2;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

html {
    background: #242323;
}

main {
    padding: 5px;
    display: flex;
    justify-content: center;
}

header {
    margin: 1rem;
}

footer {
    padding: 5px;
}

hr {
    margin: 1rem 0
}

.main-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 40rem;
    height: 100%;
}

.sub-container {
    padding: 5%;
    border-radius: 6px;
    background: radial-gradient(black, #512e2e);
    text-align: center;
}

.text-area {
    width: 100%;
    resize: vertical;
    height: 66vh;
    background: #242323;
    border: 2px solid gray;
    color: white;
    display: block;
    text-align: left;
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 1rem;

    transition: border 66ms linear;
}

.once-button {
    color: white;
    background :#242323;
    cursor: pointer;
    padding: 1rem;
    max-width: 100%;
    text-align: center;
    border: 2px solid gray;

    transition: border 66ms linear;
}

.once-button:hover {
    /*background: #512e2e;*/
    /*background: #2e1818;*/
    border: 2px solid white;
    transition: border 66ms linear;
    transition: background 33ms linear;
}

.once-button:active {
    background: white;
    color: black;
    transition: color 66ms linear;
}

.text-area:focus-visible, .text-area:focus {
    outline: none;
    border: 2px solid white;

    transition: border 66ms linear;
}

@media print {
    .hide_on_print {
        display: none !important;
    }
}