/* ---------- General ---------- */

:root {
                --header-image: url('https://bunquest.neocities.org/images/header%20art.png');
                --body-bg-image: url('https://sadhost.neocities.org/images/tiles/rainbowstr.gif');
                --art-header-image: url('https://bunquest.neocities.org/images/art%20header.png');
                --container-image: url('https://64.media.tumblr.com/73966b6acfd978cc2ae90639bd803d73/tumblr_inline_mydbkloJQm1qak244.gif');

                /* colors */
                --content: #CE94FF;
            }
            
           @font-face {
                font-family: Cheeky Rabbit;
                src: url('https://bunquest.neocities.org/fonts/Cheeky_Rabbit.ttf');
            }

            @font-face {
                font-family: Stanberry;
                src: url('https://bunquest.neocities.org/fonts/Stanberry.ttf');
            }

            @font-face {
                font-family: Pink Chicken;
                src: url('https://bunquest.neocities.org/fonts/PinkChicken-Regular.ttf');
            }
            
            @font-face {
                font-family: Strawberry Muffin;
                src: url('https://bunquest.neocities.org/fonts/Strawberry%20Muffins%20Demo.ttf');
            }

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{

    font-family: 'Strawberry Muffin', sans-serif;
                margin: auto;
                /* you can delete the line below if you'd prefer to not use an image */
                background-size: 200px;
                background-image: var(--body-bg-image), linear-gradient(0deg, #EE983F, #A150CF);

    min-height:100vh;
    color: #CE94FF;

}

/* ---------- Layout ---------- */

.page{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:20px;

    padding:20px;

    align-items:start;

}

/* ---------- Sidebar ---------- */

.sidebar{

    width:24%;
    min-width:220px;

    background-color:#402E7B;
    border: 7px solid #9EF084;

    padding:25px;

    border-radius:20px;


    box-shadow:
        0 0 0 4px #a58cff,
        0 10px 25px rgba(0,0,0,.25);

    position:sticky;
    top:20px;

}

.sidebar h1{

    margin:15px 0;

}

.sidebar p{

    margin-top:15px;

    line-height:1.6;

}

.sidebar-column{

    width:100%;

    position:sticky;

    top:20px;

}



.icon{

    display:block;

    width:140px;

    max-width:100%;

    margin:auto;

    border-radius:50%;

    border:6px solid #9EF084;

}

.socials{

    width:24%;
    min-width:220px;

    display:flex;

    justify-content:space-between;

    gap:15px;

    margin-top:18px;

}

.bubble{

    flex:1;

    aspect-ratio:1;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:2rem;

    background:#402E7B;

    color:#5d2f83;

    border-radius:50%;

    border:6px solid #9EF084;

    box-shadow:
        0 0 0 4px #a58cff,
        0 6px 15px rgba(0,0,0,.2);

    transition:
        transform .2s,
        background .2s;

}

.bubble:hover{

    transform:translateY(-4px) scale(1.08);


}

/* ---------- Gallery ---------- */

.gallery{

   column-count:3;
    column-gap:20px;

}

/* ---------- Individual Cards ---------- */

.art-card{

    background-color:#402E7B;
    
    border: 7px solid #9EF084;

    border-radius:18px;

    overflow:hidden;

    color:#CE94FF;

     box-shadow:
        0 0 0 4px #9f8cff,
        0 8px 18px rgba(0,0,0,.2);

    transition:
        transform .2s,
        box-shadow .2s;
    
    break-inside:avoid;

    margin-bottom:20px;
}



.art-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 12px 24px rgba(0,0,0,.3);

}

.art-card img{

    width:100%;

    display:block;

    height:auto;

}

.art-card h2{

    padding:14px 16px 0;

}

.art-card p{

    padding:8px 16px 16px;

    line-height:1.5;

}

/* ---------- Responsive ---------- */

@media (max-width:1100px){

    .gallery{

        column-count:2;

    }

}

@media (max-width:700px){

    .page{

        display:block;

    }

    .sidebar-column{

        width:100%;
        position:sticky;
        top:0;
        z-index:100;

    }

    .sidebar{

        border-radius:0 0 18px 18px;

    }

    .socials{

        margin:12px auto 18px;

        width:220px;

    }

    .gallery{

        column-count:1;

    }

}