Mẹ Ơi? - Tổ Chức SCP

Mẹ Ơi?

:root {
    --posX: calc(50% - 358px - 12rem);
    --fnTransition: 0.3s;
    --fnLinger: 0.15s;
    --fnInteract: calc(var(--fnTransition) + var(--fnLinger));
}
 
/*--- Footnote Auto-counter --*/
#main-content {
    counter-reset: megacount;
}
 
/*--- Footnote Superscript Number --*/
.fnnum {
    display: inline-block;
    width: max-content;
    text-indent: -0.475ex;
    vertical-align: super;
    line-height: 80%;
    word-break: initial;
    text-decoration: none;
    font-weight: bold;
    font-style: initial;
    color: transparent;
    position: relative;
    font-size: 80%;
    padding: .15em .05em;
    margin-right: -0.25em;
    counter-increment: megacount;
    -webkit-user-select: none;
    user-select: none;
}
.fnnum::after {
    content: "" counter(megacount);
    color: var(--fnColor, #E6283C);
}
.fnnum:hover {
    text-decoration: none;
    cursor: pointer;
    background-color: var(--fnColor, #E6283C);
}
.fnnum:hover::after { color: white; }
 
/*--- Footnote Content Wrapper --*/
.fncon {
    position: absolute;
    right: calc(var(--posX) + 80px);
    line-height: 1.25;
    padding: 0.8125rem;
    width: 12.5rem;
    box-sizing: border-box;
    background: white;
    border: .125rem solid black;
    font-size: .9125rem;
    font-weight: initial;
    font-style: normal;
    text-align: initial;
    visibility: hidden;
    opacity: 0;
    z-index: 9;
    transition:
        opacity 0.15s linear var(--fnLinger),
        right var(--fnTransition) cubic-bezier(.08,.72,.5,.94) var(--fnLinger),
        visibility 0.01s linear var(--fnInteract);
}
.fnnum:hover + .fncon, .fncon:hover {
    opacity: 1;
    z-index: 10;
    right: var(--posX);
    visibility: visible;
    transition:
        opacity 0.15s linear,
        right var(--fnTransition) cubic-bezier(.08,.72,.5,.94);
}
 
.fncon::before {
    position: absolute;
    top: 0; left: 0;
    transform: translateX(-52%) translateY(-55%) scale(1.15);
    background-color: var(--fnColor, #E6283C);
    color: white;
    content: counter(megacount);
    font-size: initial;
    font-weight: bold;
    font-style: initial;
    padding: 0.18rem 0.32em 0.08rem;
}
 
/*--- Mobile Query --*/
@media only screen and (max-width: 1279px) {
    .fncon {
        position: fixed;
        bottom: 1.5rem;
        left: calc(15% - 50px);
        width: 70%;
        transition:
            opacity 0.15s linear var(--fnLinger),
            left var(--fnTransition) cubic-bezier(.08,.72,.5,.94) var(--fnLinger),
            visibility 0.01s linear var(--fnInteract);
    }
    .fnnum:hover + .fncon, .fncon:hover {
        left: 15%;
        transition:
            opacity 0.15s linear,
            left var(--fnTransition) cubic-bezier(.08,.72,.5,.94);
    }
}

Mẹ! Mẹ ơi! Con bị kẹt mất rồi!
Thân thể con ép chặt vào vách lỗ.
Con xin mẹ! Mẹ ơi! Con đang cố!
Những vách tường, con đau quá mẹ ơi!
…
Mẹ ơi mẹ? Con đói, con đang đói.
Khi nào thì con sẽ được ăn đây?
Mẹ ơi sao con phải kẹt nơi đây?
Thân thể đau, bụng hoài gào kêu đói.
…
Mẹ ơi, những tháng ngày mắc kẹt,
Con càng ngày càng nhanh đói mẹ ơi.
Xin cho con ăn, con đói lắm rồi,
Không cần phải hát ca mừng sinh nhật.
…
Mẹ ơi! Mẹ ơi! Con đang ngã xuống!
Trần nhà! Con! Hãy đỡ lấy mẹ ơi!
Ôi cơn đau. Mẹ ơi? Mẹ đâu rồi?
Con đau đớn, con cần mẹ, mẹ hỡi?
…
Mẹ ơi con lang thang khắp muôn nơi…
Sao mẹ không tìm con, không trả lời?
Con đói rồi, bánh kia không no đủ,
Chỉ còn những sợi chỉ dưới răng con.
….