.page-title {
    font-weight: 800;
    font-size: 2rem;
    margin-left: 1rem;
}

.display {
    display: flex;
}

.display .lzw-dictionary .display-area {
    height: 250px;
    width: 150px;
    overflow: auto;
}

.display .lzw-output .display-area {
    height: 250px;
    width: 150px;
    overflow: auto; 
}

.display .lzw-dictionary .display-area .dict-entry.last-item {
    color: red;
}

.display .lzw-output .display-area .output-code.last-item {
    color: red;
}

.panel {
    display: flex;
}

.panel .user-interaction {
    margin-top: 1rem;
}

.display-s-c {
    width: 300px;
}

.display-s-c .card-title {
    font-size: 0.8rem !important;
}

.display-s-c .card {
    padding: 5px !important;
}

.display-s-c .card .display-area {
    height: 1rem;
}

.btn-group {
    margin-bottom: 1rem;
}

.card .card-title {
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.card {
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    overflow: hidden;
    margin: 1rem 1rem;
    padding: 1rem;
}

@keyframes appear {
    0% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    50% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.card .card-item {
    margin: 0.2rem 0.5rem;
}

.card .last-item {
    animation: appear 1.4s forwards;
}

.display-code .highlight {
    color: red;
    animation: appear 1.4s forwards;
}