@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');

:root {
    --comment-primary: #f4d431;
    --comment-tab: #4daf9e;
    --comment-hue: 0deg;
    --comment-wall: linear-gradient(#f4d431, #a670f4);
    --comment-pic: url(https://em-content.zobj.net/source/apple/419/woman-tipping-hand-light-skin-tone_1f481-1f3fb-200d-2640-fe0f.png);
    --comment-pos: center;
    --comment-size: cover;

}

#zzzcode { position: relative; }
#zzzcode * { box-sizing: border-box; }

#zzzcode a[href="https://discord.com/users/625292873914515456/"] {
    height: 12px;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
}

#zzzcode a[href="https://discord.com/users/625292873914515456/"] ~ div:first-child { position: relative; }
  
#zzzcode::after {
    display: block;
    content: "z";
    font-family: 'Courier New', Courier, monospace;
    font-size: x-small;
    color: gray !important;
    width: 100%;
    text-align: center;
}
  
#zzzcode:hover::after { content: "zzzcode"; }

[theme="light"] {
    --comment-bg: #fff;
    --comment-txt: #000;
}

[theme="dark"] {
    --comment-bg: #181818;
    --comment-txt: #fff;
}

#comment {
    width: max-content;
    max-width: 100%;
    margin: auto;
    background: var(--comment-wall) var(--comment-pos)/var(--comment-size) no-repeat;
    padding: 4rem;
    border-radius: 6px;
    font-size: clamp(14px, 1vw, 17px);

    .comment-box {
        display: flex;
        flex-direction: column;
        width: 600px;
        max-width: 100%;
        margin: auto;
        border-radius: 2rem;

        .comment-tab {
            display: flex;
            width: 100%;
            background: var(--comment-tab);
            color: var(--comment-txt);
        }

        .comment-tab.top {
            justify-content: space-between;
            align-items: center;
            
            height: 3rem;
            border-radius: 2rem 2rem 0 0;

            padding-inline: 1.25rem 1.5rem;
            font-size: 1.5rem;

            &::after { content: '•••'; }
        }

        .comment-tab.bottom {
            border-radius: 0 0 2rem 2rem;
            column-gap: 0.75rem;
            padding: 0.75rem 1.25rem;

            i + br { display: none; }

            i {
                font-size: 1.5rem;
                margin-block-start: 0.7rem;
            }

            .comment-ps {
                flex: 1;
                background: var(--comment-bg);
                color: #ababab;
                border-radius: 1rem;
                padding: 0.5rem 0.75rem;
            }
        }

        .comment-content {
            flex: 1;
            background: var(--comment-bg);
            color: var(--comment-txt);
            padding: 2rem;

            .comment-info {
                display: flex;
                column-gap: max(1rem, 1vw);
                margin-block-end: 1.5rem;

                .comment-pic {
                    position: relative;

                    flex: 2;
                    max-width: 200px;
                    aspect-ratio: 1;

                    &::before {
                        content: '';

                        position: absolute;
                        bottom: 0;
                        
                        width: calc(100% - 12px);
                        aspect-ratio: 1;
                        border-radius: 50%;
                        border: 6px solid transparent;
                        background: linear-gradient(#fff 0 0) content-box, linear-gradient(#169578, #84fcbf) border-box;
                        filter: hue-rotate(var(--comment-hue));
                    }

                    &::after {
                        content: '';

                        position: absolute;
                        bottom: 6px;
                        left: 50%;
                        transform: translateX(-50%);
                        
                        width: calc(100% - 12px);
                        aspect-ratio: 3/4;
                        background: var(--comment-pic) var(--comment-pos)/var(--comment-size) no-repeat;
                        border-radius: 0 0 200px 200px;
                    }
                }

                .comment-name {
                    flex: 3;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    h1 {
                        border-radius: 200px;
                        text-transform: uppercase;
                        background: var(--comment-primary);
                        color: var(--comment-txt);
                        padding: 1rem 1.5rem;
                        text-align: center;
                        margin-block: 0;
                        font: 600 clamp(1.5rem, 2vw, 2rem)/1 'Public Sans', sans-serif;
                    }

                    &::after {
                        content: '';

                        position: relative;
                        top: -2px;
                        left: clamp(2.5rem, 3vw, 3rem);
                        
                        width: 2rem;
                        aspect-ratio: 50/42;
                        background: var(--comment-primary);
                        -webkit-mask: url(https://iili.io/3mqx64S.png) center/contain no-repeat;
                                mask: url(https://iili.io/3mqx64S.png) center/contain no-repeat;
                    }
                }
            }
        }
    }
}