html, body {
    margin: 0;
    height: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background-color: #fffded;
}

.bg-new {
    background: linear-gradient(
            to bottom,
            #fffded,
            #fffded 50%,
            #f1efe0 50%,
            #f1efe0
    );
    background-size: 100% 5px;
}

body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: left;
    align-items: flex-end;
}

.printer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    overflow: hidden;
}

.lines {
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    animation: scrollUp 60s steps(56, end) infinite;
}

.line {
    height: 1.1em;
    opacity: 1;
}

@keyframes scrollUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(-100%);
    }
}

@media screen and (max-width: 600px) {
    .line {
        height: 1.1em;
        opacity: 1;

        display: inline;
        font-size: 0.5em;
    }
}