body {
    margin: 0;
    font-family: "monospace";
}

@font-face {
    font-family: "Pixel";
    src: url("alagard.ttf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@keyframes hop {
    0%   { transform: translateY(15px); }
    20%  { transform: translateY(16px); }
    50%  { transform: translateY(12px); }
    75% { transform: translateY(18px); }
    100% { transform: translateY(15px); }
}

@keyframes shake {
    0%   { transform: translate(0px, 0px); }
    25%  { transform: translate(1px, 0px); }
    50%  { transform: translate(-1px, 0px); }
    75%  { transform: translate(1px, 0px); }
}

@keyframes bounceY {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-1000px); }
    100%  { transform: translateY(0px); }
}

#andregbb {
    width: 180px;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    transform: translateY(15px);
}

.textbox {
    display: flex;
    flex: 1;
    align-items: flex-start;

    padding: 8px 12px;
    font-size: 18px;
    line-height: 1.4;

}

.textbox p {
    display: inline-block;
    font-family: "Pixel", monospace;
    margin: 0;
    line-height: 1.4;
    color: #8BAC0F;
}

.charyap {
    position: absolute;
    background-color: #4F7C29;

    top: 16px;
    left: 16px;
    padding: 12px;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;

    width: 820px;
    height: 200px;
}

.charbox {
    position: relative;
    width: 200px;
    height: 100%;
}

.charboxBorder {
    position: absolute;
    pointer-events: none;

    z-index: 2;
    border: 4px solid #8BAC0F;
    inset: 0;
}

.charMask {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

.hopping {
    animation: hop 1s infinite ease-in-out alternate;
}

.shake {
    display: inline-block;
    animation: shake 0.12s infinite;
}

.lastLetter {
    display: inline-block;
    animation: bounceY 0.8s infinite alternate ease-in-out;
}