/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

/* Variables */
:root {
    /* Fonts */
    --font-size: 35px;
    --font-family-1: "Comfortaa", serif;

    /* Emotes */
    --emote-size: calc(var(--font-size) * 2);
    --emote-size-xl: calc(var(--font-size) * 3);
    --emote-size-xxl: calc(var(--font-size) * 8);

    /* Badges */
    --badge-size: 25px;

    /* Colors */
    --text-color: #FFFFFF;
    --event-color: #302321;
    --message-background: linear-gradient(to right, #F09C50, #B84939);
    --event-background: linear-gradient(to right, #FFE3C9, #FFC794);
}

/* Main styling */
* {
    box-sizing: border-box;
}

body {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to top,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 75%,
            rgba(0, 0, 0, 0) 100%);
}

content {
    display: block;
}

.font-1 {
    opacity: 0;
    font-family: var(--font-family-1);
}

.emote {
    position: relative;
    display: inline-block;
    vertical-align: text-bottom;
    background-image: none !important;
}

.emote.emote-left {
    margin-left: 0;
}

.emote.emote-right {
    margin-right: 0;
}

.emote img {
    height: var(--emote-size);
}

.emote img.zero-width {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

[large-emotes="true"] .emote img {
    height: var(--emote-size-xl);
}

[gigaemote="true"] .emote img {
    height: var(--emote-size-xxl);
}

@keyframes appear {
    from {
        transform: translateY(200%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes disappear {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0);
    }
}

@keyframes deleted {
    to {
        transform: translateX(-200%);
        padding: 0;
        margin: 0;
        max-height: 0;
    }
}

#chatbox {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 5px 5px 0 5px;
    font-size: var(--font-size);
    font-family: var(--font-family-1);
}

#chatbox message,
#chatbox event {
    max-height: var(--max-height);
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    word-break: break-word;
    transform-origin: bottom;
    animation: appear 500ms ease-out forwards;
}

#chatbox[disappear="true"] message,
#chatbox[disappear="true"] event {
    animation:
        appear 500ms ease-in-out forwards,
        disappear 500ms linear 30s forwards;
}

#chatbox message[deleted="true"],
#chatbox event[deleted="true"] {
    animation: deleted 500ms ease-in-out forwards;
}

message {
    color: var(--text-color);
    max-width: fit-content;
    padding: 45px 30px 10px;
}

message top {
    position: relative;
    text-align: center;
    margin-bottom: -87px;
    font-size: calc(var(--font-size) * 2 / 3);
    z-index: 100;
}

message top::before {
    position: absolute;
    content: '';
    top: -10px;
    left: 50%;
    transform: translate(-50%, -100%);
    height: 30px;
    z-index: -1;
    aspect-ratio: 307 / 67;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='307' height='67' fill='none'%3E%3Cpath fill='%23CD6841' d='M261.395 1.593C249.563 10.972 216.202 49.105 201 67h106c-1.233-20.98-30.814-77.131-45.605-65.407Z'/%3E%3Cpath fill='%23DA7B47' d='M45.605 1.593C57.437 10.972 90.799 49.105 106 67H0C1.233 46.02 30.814-10.131 45.605 1.593Z'/%3E%3C/svg%3E");
}

message top author {
    position: relative;
    display: block;
    width: 100%;
    padding-inline: 45px;
}

message top author::before {
    position: absolute;
    left: 5px;
    top: 0;
    width: 30px;
    content: '';
    aspect-ratio: 45 / 56;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='56' fill='none'%3E%3Cpath fill='%23FFD6B1' d='M10.874 43.119c2.017.592 1.866 2.963 2.72 4.889.854 1.926 2.61 3.094 1.655 4.975-1.229 2.423-4.277.229-6.885-.497-2.732-.761-6.85-.27-6.536-3.099.238-2.138 2.306-2.217 4.072-3.44 1.767-1.225 2.916-3.433 4.974-2.828ZM18.627 46.652c-.534 1.159-1.567 1.82-2.307 1.479-.74-.342-.908-1.56-.375-2.718.534-1.159 1.567-1.82 2.308-1.479.74.342.908 1.56.374 2.718ZM2.298 42.277c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.166.118-1.27-.446-2.36-1.259-2.435-.812-.074-1.566.896-1.683 2.167ZM15.579 41.639c-.534 1.158-1.567 1.82-2.308 1.478-.74-.342-.908-1.559-.374-2.717.534-1.16 1.567-1.821 2.307-1.48.74.343.908 1.56.375 2.719ZM7.445 39.46c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.167.117-1.27-.446-2.36-1.259-2.434-.812-.074-1.566.896-1.683 2.166ZM34.874 26.119c2.017.592 1.866 2.963 2.72 4.889.855 1.926 2.61 3.094 1.655 4.975-1.229 2.423-4.277.229-6.885-.497-2.732-.761-6.85-.27-6.536-3.099.238-2.138 2.306-2.217 4.072-3.44 1.767-1.225 2.916-3.432 4.974-2.828ZM42.627 29.652c-.534 1.159-1.567 1.82-2.307 1.479-.74-.342-.908-1.56-.374-2.718.533-1.159 1.566-1.82 2.307-1.479.74.342.908 1.56.374 2.718ZM26.298 25.277c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.166.118-1.27-.446-2.36-1.259-2.435-.812-.074-1.566.896-1.683 2.167ZM39.579 24.639c-.534 1.159-1.567 1.82-2.308 1.478-.74-.342-.908-1.559-.374-2.717.534-1.16 1.567-1.821 2.307-1.48.74.343.908 1.56.375 2.719ZM31.445 22.46c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.167.117-1.27-.446-2.36-1.259-2.434-.812-.074-1.566.896-1.683 2.166ZM16.874 9.119c2.017.592 1.866 2.963 2.72 4.889.854 1.926 2.61 3.094 1.655 4.975-1.229 2.423-4.277.229-6.885-.497-2.732-.761-6.85-.27-6.536-3.099.238-2.138 2.306-2.217 4.072-3.44 1.767-1.225 2.916-3.433 4.974-2.828ZM24.627 12.652c-.534 1.159-1.567 1.82-2.307 1.479-.74-.342-.908-1.56-.375-2.718.534-1.159 1.567-1.82 2.308-1.479.74.342.908 1.56.374 2.718ZM8.298 8.277c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.166.117-1.27-.446-2.36-1.259-2.435-.812-.074-1.566.896-1.683 2.167ZM21.579 7.639c-.534 1.159-1.567 1.82-2.308 1.478-.74-.342-.908-1.559-.374-2.717.534-1.16 1.567-1.821 2.307-1.48.74.343.908 1.56.375 2.719ZM13.445 5.46c-.117 1.27.447 2.36 1.26 2.434.812.074 1.565-.896 1.682-2.167.117-1.27-.446-2.36-1.259-2.434-.812-.074-1.566.896-1.683 2.166Z'/%3E%3C/svg%3E");
}

message top author::after {
    position: absolute;
    content: '';
    top: -10px;
    right: 12px;
    width: 30px;
    aspect-ratio: 32 / 37;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='37' fill='none'%3E%3Cpath stroke='%23EF9543' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.996 1.014c1.268 6.131 5.615 17.236 12.856 12.605C36.094 8.99 23.3 3.286 15.996 1.014Zm0 0c-1.4 6.045-5.93 17.03-12.856 12.605C-5.518 8.09 14.815.632 15.996 1.014Zm0 0L10.486 36m5.51-34.986L21.637 36'/%3E%3C/svg%3E");
}

message bottom {
    position: relative;
    background-image: var(--message-background);
    padding: 50px 70px 20px;
    margin-block: 50px 40px;
    border-radius: 20px;
}

message bottom::before {
    position: absolute;
    content: '';
    left: 5px;
    bottom: -40px;
    width: 35px;
    aspect-ratio: 46 / 54;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='54' fill='none'%3E%3Cpath stroke='%23B84939' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M22.994 2.02c1.776 8.759 7.861 24.623 18 18.008 10.137-6.615-7.776-14.762-18-18.008Zm0 0c-1.959 8.636-8.3 24.329-17.998 18.008C-7.126 12.126 21.342 1.475 22.994 2.02Zm0 0L15.281 52m7.713-49.98L30.892 52'/%3E%3C/svg%3E");
}

message bottom::after {
    position: absolute;
    content: '';
    right: 20px;
    bottom: -5px;
    width: 60px;
    aspect-ratio: 81 / 33;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='82' height='38' fill='none'%3E%3Cpath fill='url(%23a)' d='M81.263 9.055s-18.81 2.2-26.616 5.818c-9.268 4.296-22.273 18.99-22.273 18.99s17.068 1.8 30.587-2.096C76.481 27.87 81.263 9.055 81.263 9.055Z'/%3E%3Cpath fill='url(%23b)' d='M3.764 0s17.764 6 24.579 11.11c8.092 6.067 17.663 22.973 17.663 22.973s-21.33 2.18-31.979-6.823C3.378 18.255 3.764 0 3.764 0Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='58.023' x2='55.614' y1='7.106' y2='35.818' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='26.672' x2='23.097' y1='2.894' y2='31.195' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

message.subscriber bottom::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 81 44'%3E%3Crect width='81' height='33' y='11' fill='%23FFD6B1' rx='10'/%3E%3Cpath fill='url(%23a)' d='M59 4.2346s-8.7958 1.02867-12.4458 2.72044c-4.3343 2.00892-10.4154 8.87986-10.4154 8.87986s7.9812.8416 14.3031-.9801C56.7638 13.0331 59 4.2346 59 4.2346Z'/%3E%3Cpath fill='url(%23b)' d='M22.7603.00012207S31.0668 2.80596 34.2535 5.19528c3.7842 2.83723 8.2596 10.74232 8.2596 10.74232s-9.974 1.0199-14.9537-3.1906C22.5797 8.53655 22.7603.00012207 22.7603.00012207Z'/%3E%3Cpath fill='%23AE3B37' d='M27.0027 35.08c-.9334 0-1.8-.14-2.6-.42-.7867-.2933-1.4-.66-1.84-1.1-.2-.2133-.2867-.4533-.26-.72.04-.28.1733-.5067.4-.68.2666-.2133.5266-.3.78-.26.2666.0267.4933.14.68.34.2266.2533.5866.4933 1.08.72.5066.2133 1.0666.32 1.68.32.7733 0 1.36-.1267 1.76-.38.4133-.2533.6266-.58.64-.98.0133-.4-.18-.7467-.58-1.04-.3867-.2933-1.1-.5333-2.14-.72-1.3467-.2667-2.3267-.6667-2.94-1.2-.6-.5333-.9-1.1867-.9-1.96 0-.68.2-1.24.6-1.68.4-.4533.9133-.7867 1.54-1 .6266-.2267 1.28-.34 1.96-.34.88 0 1.66.14 2.34.42.68.28 1.22.6667 1.62 1.16.1866.2133.2733.44.26.68-.0134.2267-.1267.42-.34.58-.2134.1467-.4667.1933-.76.14-.2934-.0533-.54-.1733-.74-.36-.3334-.32-.6934-.54-1.08-.66-.3867-.12-.8334-.18-1.34-.18-.5867 0-1.0867.1-1.5.3-.4.2-.6.4933-.6.88 0 .24.06.46.18.66.1333.1867.3866.36.76.52.3733.1467.92.2933 1.64.44 1 .2 1.7866.4533 2.36.76.5866.3067 1.0066.6667 1.26 1.08.2533.4.38.8667.38 1.4 0 .6133-.1667 1.1667-.5 1.66-.32.4933-.8.8867-1.44 1.18-.6267.2933-1.4134.44-2.36.44Zm11.4793.02c-.92 0-1.7466-.1933-2.48-.58-.72-.4-1.2933-.98-1.72-1.74-.4133-.76-.62-1.6933-.62-2.8v-4.92c0-.2933.0934-.5333.28-.72.2-.2.4467-.3.74-.3.2934 0 .5334.1.72.3.2.1867.3.4267.3.72v4.92c0 .7467.14 1.3667.42 1.86.28.48.66.84 1.14 1.08.48.2267 1.02.34 1.62.34.5734 0 1.08-.1133 1.52-.34.4534-.2267.8134-.5333 1.08-.92.2667-.3867.4-.82.4-1.3h1.26c0 .8267-.2066 1.5733-.62 2.24-.4.6667-.9533 1.1933-1.66 1.58-.6933.3867-1.4866.58-2.38.58Zm4.42-.1c-.2933 0-.54-.0933-.74-.28-.1866-.2-.28-.4467-.28-.74v-8.92c0-.3067.0934-.5533.28-.74.2-.1867.4467-.28.74-.28.3067 0 .5534.0933.74.28.1867.1867.28.4333.28.74v8.92c0 .2933-.0933.54-.28.74-.1866.1867-.4333.28-.74.28Zm10.1128.08c-1.04 0-1.9733-.24-2.8-.72-.8266-.4933-1.48-1.16-1.96-2-.48-.84-.7266-1.7867-.74-2.84V20.4c0-.3067.0934-.5533.28-.74.2-.1867.4467-.28.74-.28.3067 0 .5534.0933.74.28.1867.1867.28.4333.28.74v5.4c.4667-.56 1.0267-1 1.68-1.32.6667-.3333 1.3934-.5 2.18-.5.9734 0 1.8467.2467 2.62.74.7734.48 1.38 1.14 1.82 1.98.4534.8267.68 1.7667.68 2.82s-.2466 2-.74 2.84c-.48.84-1.1333 1.5067-1.96 2-.8266.48-1.7666.72-2.82.72Zm0-1.8c.68 0 1.2867-.16 1.82-.48.5334-.3333.9534-.7867 1.26-1.36.32-.5733.48-1.2133.48-1.92 0-.72-.16-1.36-.48-1.92-.3066-.56-.7266-1-1.26-1.32-.5333-.3333-1.14-.5-1.82-.5-.6666 0-1.2733.1667-1.82.5-.5333.32-.9533.76-1.26 1.32-.3066.56-.46 1.2-.46 1.92 0 .7067.1534 1.3467.46 1.92.3067.5733.7267 1.0267 1.26 1.36.5467.32 1.1534.48 1.82.48Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='48.1324' x2='47.0062' y1='3.32306' y2='16.7492' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='33.4724' x2='31.8007' y1='1.35325' y2='14.5873' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

message.vip bottom::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 81 44'%3E%3Crect width='81' height='33' y='11' fill='%23FFD6B1' rx='10'/%3E%3Cpath fill='url(%23a)' d='M59 4.2346s-8.7958 1.02867-12.4458 2.72044c-4.3343 2.00892-10.4154 8.87986-10.4154 8.87986s7.9812.8416 14.3031-.9801C56.7638 13.0331 59 4.2346 59 4.2346Z'/%3E%3Cpath fill='url(%23b)' d='M22.7603.00012207S31.0668 2.80596 34.2535 5.19528c3.7842 2.83723 8.2596 10.74232 8.2596 10.74232s-9.974 1.0199-14.9537-3.1906C22.5797 8.53655 22.7603.00012207 22.7603.00012207Z'/%3E%3Cpath fill='%23AE3B37' d='M41.1174 25.8546c2.2815 1.0422 1.6998 3.8149 2.3813 6.2341.6814 2.4191 2.555 4.0961 1.1086 6.1551-1.8624 2.6513-5.0878-.4566-8.044-1.7571-3.0963-1.362-8.0417-1.483-7.1898-4.7681.6443-2.4843 3.099-2.2256 5.3921-3.3706 2.2932-1.145 4.025-3.5564 6.3518-2.4934Zm8.5537 5.4884c-.8271 1.2774-2.1592 1.8835-2.9754 1.3538-.8162-.5298-.8074-1.9948.0197-3.2722.8271-1.2774 2.1592-1.8836 2.9754-1.3538.8162.5297.8074 1.9947-.0197 3.2722Zm-18.5347-7.9391c-.354 1.48.1263 2.8625 1.0729 3.0878.9466.2253 2.001-.7918 2.355-2.2719.3541-1.48-.1263-2.8625-1.0728-3.0878-.9466-.2253-2.001.7918-2.3551 2.2719Zm15.787 1.5025c-.8271 1.2774-2.1592 1.8835-2.9754 1.3538-.8162-.5298-.8074-1.9948.0197-3.2722.8271-1.2774 2.1592-1.8836 2.9754-1.3538.8162.5297.8074 1.9947-.0197 3.2722Zm-9.232-3.9544c-.354 1.48.1263 2.8625 1.0729 3.0878.9466.2253 2.001-.7918 2.355-2.2719.3541-1.48-.1263-2.8625-1.0729-3.0878-.9465-.2253-2.0009.7918-2.355 2.2719Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='48.1324' x2='47.0062' y1='3.32306' y2='16.7492' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='33.4724' x2='31.8007' y1='1.35325' y2='14.5873' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

message.moderator bottom::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 81 44'%3E%3Crect width='81' height='33' y='11' fill='%23FFD6B1' rx='10'/%3E%3Cpath fill='url(%23a)' d='M59 4.2346s-8.7958 1.02867-12.4458 2.72044c-4.3343 2.00892-10.4154 8.87986-10.4154 8.87986s7.9812.8416 14.3031-.9801C56.7638 13.0331 59 4.2346 59 4.2346Z'/%3E%3Cpath fill='url(%23b)' d='M22.7603.00012207S31.0668 2.80596 34.2535 5.19528c3.7842 2.83723 8.2596 10.74232 8.2596 10.74232s-9.974 1.0199-14.9537-3.1906C22.5797 8.53655 22.7603.00012207 22.7603.00012207Z'/%3E%3Cpath fill='%23AE3B37' d='M34.12 35 33 33.9286l1.96-3.0613L33 29.1071l1.04-1.2627 2.16 1.8367L41.64 20H47v4.6301l-8.32 7.1556 2.28 1.9515L39.6 35l-2.28-2.0663L34.12 35Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='48.1324' x2='47.0062' y1='3.32306' y2='16.7492' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='33.4724' x2='31.8007' y1='1.35325' y2='14.5873' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

message.broadcaster bottom::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 81 44'%3E%3Crect width='81' height='33' y='11' fill='%23FFD6B1' rx='10'/%3E%3Cpath fill='url(%23a)' d='M59 4.23459s-8.7958 1.02867-12.4458 2.72045c-4.3343 2.00892-10.4154 8.87986-10.4154 8.87986s7.9812.8415 14.3031-.9801C56.7638 13.0331 59 4.23459 59 4.23459Z'/%3E%3Cpath fill='url(%23b)' d='M22.7603.00012207S31.0668 2.80596 34.2535 5.19528c3.7842 2.83723 8.2596 10.74232 8.2596 10.74232s-9.974 1.0199-14.9537-3.1906C22.5797 8.53655 22.7603.00012207 22.7603.00012207Z'/%3E%3Crect width='81' height='33' y='11' fill='%23FFD6B1' rx='10'/%3E%3Cpath fill='url(%23c)' d='M59 4.23459s-8.7958 1.02867-12.4458 2.72045c-4.3343 2.00892-10.4154 8.87986-10.4154 8.87986s7.9812.8415 14.3031-.9801C56.7638 13.0331 59 4.23459 59 4.23459Z'/%3E%3Cpath fill='url(%23d)' d='M22.7603.00012207S31.0668 2.80596 34.2535 5.19528c3.7842 2.83723 8.2596 10.74232 8.2596 10.74232s-9.974 1.0199-14.9537-3.1906C22.5797 8.53655 22.7603.00012207 22.7603.00012207Z'/%3E%3Cpath fill='%23AE3B37' d='M39.5611 29.8546h-1.4675v-4.3687h1.4675v4.3687Zm4.1581 0h-1.4675v-4.3687h1.4675v4.3687Z'/%3E%3Cpath fill='%23AE3B37' fill-rule='evenodd' d='m48 31.389-4.6473 4.368h-3.4246L37.6045 38H35.403v-2.243H31V24.0694L32.2232 21H48v10.389Zm-14.1872 1.7708h3.4246v2.243l2.3237-2.243h4.2808l2.5679-2.4794v-8.2639h-12.597v10.7433Z' clip-rule='evenodd'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='48.1324' x2='47.0062' y1='3.32305' y2='16.7492' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='33.4724' x2='31.8007' y1='1.35325' y2='14.5873' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='48.1324' x2='47.0062' y1='3.32305' y2='16.7492' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='33.4724' x2='31.8007' y1='1.35325' y2='14.5873' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

event {
    padding: 50px 15px 45px;
    font-weight: bold;
}

event content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--event-color);
    background-image: var(--event-background);
    width: fit-content;
    padding: 25px 75px 35px;
    border-radius: 25px;
    gap: 7.5px;
}

event content::before {
    position: absolute;
    content: '';
    top: 4px;
    left: 50%;
    height: 50px;
    transform: translate(-50%, -100%);
    aspect-ratio: 307 / 72;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='307' height='72' fill='none'%3E%3Cpath fill='%23FECDA0' d='M261.395 1.593C249.563 10.972 216.202 49.105 201 67h106c-1.233-20.98-30.814-77.131-45.605-65.407Z'/%3E%3Cpath fill='%23FFDCBC' d='M45.605 1.593C57.437 10.972 90.799 49.105 106 67H0C1.233 46.02 30.814-10.131 45.605 1.593Z'/%3E%3Cpath fill='url(%23a)' d='M184 49.02s-14.582 1.706-20.634 4.51c-7.186 3.331-17.267 14.723-17.267 14.723s13.232 1.395 23.713-1.625C180.293 63.608 184 49.02 184 49.02Z'/%3E%3Cpath fill='url(%23b)' d='M123.918 42s13.772 4.652 19.055 8.613c6.274 4.704 13.694 17.81 13.694 17.81s-16.536 1.69-24.792-5.29S123.918 42 123.918 42Z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='165.983' x2='164.116' y1='47.51' y2='69.769' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='141.678' x2='138.906' y1='44.243' y2='66.184' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C3D480'/%3E%3Cstop offset='1' stop-color='%236C840A'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

event content::after {
    position: absolute;
    content: '';
    right: -50px;
    bottom: -40px;
    width: 115px;
    aspect-ratio: 151 / 137;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='151' height='137' fill='none'%3E%3Cpath stroke='%23FEC794' stroke-linecap='round' stroke-width='16' d='M80.5 8c27 2.833 76.4 21.5 58 73.5-23 65-106.5 11-130 47'/%3E%3C/svg%3E");
}

event content author,
event content desc
{
    position: relative;
    width: 100%;
    font-size: calc(var(--font-size) * 2 / 3);
    text-align: center;
}

event content author::before {
    position: absolute;
    content: '';
    left: -90px;
    top: 0;
    width: 35px;
    aspect-ratio: 51 / 50;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='50' fill='none'%3E%3Cpath fill='%23302321' d='M23.908 17.25c5.801-1.771 9.195 4.18 14.308 7.467 5.113 3.286 11.194 3.318 11.877 9.364.88 7.786-9.942 7.333-17.379 9.72-7.789 2.499-16.935 10.21-20.661 2.898-2.818-5.53 2.04-8.999 4.356-14.749 2.315-5.75 1.583-12.892 7.5-14.7ZM48.194 13.469c.551 3.639-.889 6.872-3.216 7.222-2.327.35-4.66-2.316-5.211-5.955-.552-3.639.888-6.872 3.215-7.222 2.327-.35 4.66 2.316 5.212 5.955ZM1.91 28.82c1.733 3.247 4.82 4.98 6.894 3.87 2.075-1.11 2.353-4.643.62-7.89-1.732-3.247-4.819-4.98-6.894-3.87-2.075 1.111-2.352 4.643-.62 7.89ZM32.898 6.224c.551 3.638-.888 6.872-3.215 7.222-2.327.35-4.66-2.316-5.212-5.955-.551-3.64.888-6.873 3.215-7.222 2.327-.35 4.66 2.316 5.212 5.955ZM9.845 13.87c1.732 3.247 4.819 4.98 6.893 3.87 2.075-1.111 2.353-4.643.62-7.89-1.732-3.247-4.819-4.98-6.894-3.87-2.075 1.11-2.352 4.643-.62 7.89Z'/%3E%3C/svg%3E");
}

event content meow {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    padding: 15px 20px;
    border-radius: 10px;
    font-size: calc(var(--font-size) / 2);
    color: var(--text-color);
    background-image: var(--message-background);
}