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

/* Variables */
:root {
    /* Fonts */
    --font-size: 35px;
    --font-family-1: "Comfortaa", sans-serif;
    --font-family-2: "Fredoka", sans-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 */
    --color-1: #ffffff;
    --color-2: #ffc5d3;
}

/* 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);
}

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

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

.emote.emote-left {
    margin-left: -5.5px;
}

.emote.emote-right {
    margin-right: -5.5px;
}

.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: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@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 left;
    animation: appear 700ms ease-in-out forwards;
}

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

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

message {
    padding: 30px 15px 15px;
}

message top {
    display: inline-flex;
    margin-bottom: 5px;
    gap: 5px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.4));
}

message top author {
    position: relative;
    color: var(--color-1);
    background-color: var(--color-2);
    font-family: var(--font-family-2);
    font-weight: bolder;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    padding: 3px 30px 5px;
    margin-inline: 7.5px;
    border-radius: 25px;
}

message content {
    position: relative;
    color: var(--color-1);
    margin-top: 5px;
    margin-left: 65px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

message content::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    left: -65px;
    width: 35px;
    aspect-ratio: 25 / 31;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.4));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 25 31'%3E%3Cpath fill='%23FFAFCC' d='M24.86 15.25c-.25-4.52-2.24-8.08-6.35-9.7l-.5.8c1.54 1.28 2.87 2.6 3.24 4.67.08.5-.29.87-.74.75-1.54-.29-3.03-.7-4.52-1.16a13 13 0 0 1 .95 4.4c0 .32-.29.65-.62.61a8.54 8.54 0 0 1-5.73-2.73 14.2 14.2 0 0 1-2.28 3.15c-.54.54-1.57 1.74-2.4 1.7-.83-.05-1.5-1.16-1.74-1.83a3.89 3.89 0 0 1 0-2.56c-.38.12-.7.24-1.04.41-1.12 3.81.54 8.04 3.4 10.9 3.11 3.1 9.7 7.45 14.27 5.34 4.64-2.24 4.35-10.48 4.06-14.75ZM9.6 20.47c-.79 0-.79-1.24 0-1.24s.79 1.24 0 1.24Zm3.86-4.68c.78 0 .78 1.24 0 1.24-.8 0-.8-1.24 0-1.24Zm.29 4.01c.78 0 .78 1.25 0 1.25-.83 0-.83-1.25 0-1.25Zm1.03 5.68c-.79 0-.79-1.24 0-1.24s.79 1.24 0 1.24Zm3.53-8.12c.78 0 .78 1.24 0 1.24-.79 0-.79-1.24 0-1.24Zm.45 9.53c-.78 0-.78-1.24 0-1.24.8 0 .8 1.24 0 1.24Zm1.37-13.96c.79 0 .79 1.24 0 1.24s-.79-1.24 0-1.24Zm.3 9.82c-.8 0-.8-1.25 0-1.25.78 0 .78 1.25 0 1.25Z'/%3E%3Cpath fill='%23FFAFCC' d='M5.37 12.63A5.44 5.44 0 0 0 5 16.15c.16.69.7.6 1.04.26.29-.26.5-.52.78-.77a14 14 0 0 0 2.74-4.03c.21-.48.83-.35 1.08 0a7.18 7.18 0 0 0 4.65 2.95 11.73 11.73 0 0 0-1.37-4.54c-.25-.47.17-1.16.7-.95a47.8 47.8 0 0 0 4.82 1.42c-.58-1.5-1.74-2.53-3.03-3.56-.2-.17-.25-.56-.08-.77.58-.9 1.12-1.85 1.66-2.79.04-.17.13-.34.17-.51.16-.56-.46-.99-.92-.73-2.53 1.46-5.72.77-7.47 3.64 0 0 0 .05-.04.09a28.8 28.8 0 0 0-1.7-3.65c-.87-1.54-1.79-.47-3.2-.34-.58.04-.79.64-.46 1.12 1 1.28 2.04 2.57 3.04 3.9a6.4 6.4 0 0 0-4.07 1.2C1.84 9.21.93 10.96.06 12.64c-.2.42.16 1.15.7.94l.67-.26c.95-.56 2-.94 3.07-1.29.54-.3 1.08.13.87.6Z'/%3E%3C/svg%3E");
}