@import url('https://fonts.cdnfonts.com/css/exclusive');
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Brawler:wght@400;700&display=swap');

@font-face {
    font-family: "Sloop-ScriptOne";
    src: url('https://savant777.github.io/zoecode/font/Sloop-ScriptOne.otf');
}

:root {
    --blsm6-primary: #a50036;
    --blsm6-txt: #79716b;
    --blsm6-bd: #79716b80;
    --blsm6-bg: #eee;

    --blsm6-pic: gray;
    --blsm6-pos: center;
    --blsm6-size: cover;
}

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

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

#Blossom6 a[href="https://discord.com/users/625292873914515456/"] ~ div:first-child { position: relative; }
  
#Blossom6::after {
    display: block;
    content: "06 Blossom";
    font-family: 'Exclusive', serif;
    font-size: 13px;
    color: gray !important;
    width: 100%;
    text-align: center;
}
  
#Blossom6:hover::after { content: "made by zzzcode"; }

#Blossom6 {
    #b6-thread.b6-box {
        width: 1000px;
        max-width: 100%;
        margin: auto;
        padding-block-end: 3rem;
        
        background: var(--blsm6-bg);
        color: var(--blsm6-txt);
        
        font-size: 16px;
        font-family: 'Bai Jamjuree', sans-serif;
        
        display: flex;
        flex-direction: column;
        row-gap: 3rem;

        .b6-head {
            display: flex;
            column-gap: 1rem;
            justify-content: space-between;
            
            padding: 1.5rem;
            border-block-end: 1px solid var(--blsm6-bd);
            font-family: 'Brawler', serif;
        }

        .b6-pic-lg {
            width: 100%;
            aspect-ratio: 16/9;
            background: var(--blsm6-pic) var(--blsm6-pos)/var(--blsm6-size) no-repeat;
        }

        .b6-flex-1 {
            display: flex;
            column-gap: 1rem;
            align-items: center;

            .b6-title-set {
                padding-inline: 3rem;
                text-align: end;

                .b6-title {
                    font-family: 'Sloop-ScriptOne', cursive;
                    font-size: clamp(6rem, 9vw, 10rem);
                    line-height: 0.6;
                    color: var(--blsm6-primary);
                }

                .b6-sub {
                    font-family: 'Brawler', serif;
                    text-transform: uppercase;
                    padding-inline-end: 1rem;
                }
            }

            &::after {
                content: "";
                flex: 1;
                min-width: 4rem;
                height: 2px;
                background: var(--blsm6-primary);
            }
        }

        .b6-flex-2 {
            display: flex;
            column-gap: 1rem;
            align-items: center;

            .b6-content {
                flex: 2;
                padding-inline: 1.5rem;

                p { margin-block-start: 0; }
                p:last-child { margin-block-end: 0; }
            }

            .b6-no {
                flex: 1;
                padding-inline: 1.5rem;

                color: var(--blsm6-bg);
                font-family: 'Exclusive', serif;
                font-size: 10rem;
                text-align: center;
                line-height: 1;
                
                position: relative;
                z-index: 2;

                &::before {
                    content: attr(no);
                    position: absolute;
                    inset: 0;
                    z-index: -1;
                    -webkit-text-stroke: 4px var(--blsm6-primary);
                }
            }
        }
    }

    #b6-roleplay.b6-box {
        width: 600px;
        max-width: 100%;
        margin: auto;
        
        background: var(--blsm6-bg);
        color: var(--blsm6-txt);
        
        font-size: 16px;
        font-family: 'Bai Jamjuree', sans-serif;
        
        display: flex;
        flex-direction: column;
        row-gap: 3rem;

        .b6-head, .b6-foot {
            display: flex;
            column-gap: 1rem;
            justify-content: space-between;
            
            padding: 0.5rem 1.5rem;
            background: var(--blsm6-primary);
            color: var(--blsm6-bg);
        }

        .b6-head { font-family: 'Brawler', serif; }

        .b6-flex-pic {
            display: flex;
            column-gap: 1.5rem;
            padding-inline: 1.5rem;
            margin-block-end: 1.5rem;

            .b6-pic {
                flex: 1;
                aspect-ratio: 4/3;
                border-radius: 1rem;
                background: var(--blsm6-pic) var(--blsm6-pos)/var(--blsm6-size) no-repeat;
            }
        }

        .b6-flex-1 {
            display: flex;
            flex-direction: row-reverse;
            column-gap: 1rem;
            align-items: center;

            .b6-title-set {
                padding-inline: 2rem 4rem;
                text-align: end;

                .b6-title {
                    font-family: 'Sloop-ScriptOne', cursive;
                    font-size: 8.5rem;
                    line-height: 0.6;
                    color: var(--blsm6-primary);
                }

                .b6-sub {
                    font-family: 'Brawler', serif;
                    text-transform: uppercase;
                    padding-inline-end: 1rem;
                }
            }

            &::after {
                content: "";
                flex: 1;
                height: 2px;
                background: var(--blsm6-primary);
            }
        }

        .b6-content {
            padding-inline: 1.5rem;
        }

        .b6-flex-2 {
            display: flex;
            column-gap: 1rem;
            align-items: center;
        }
    }
}