#profile-page {

    display: grid;
    grid-template-columns: 30% auto;
    gap: 10px;

    .right-side-pp {
        display: grid;
        grid-template-rows: auto 1fr;
        /* gap: 10px; */
    }

    #username {
        font-family: "coolest";
        container-type: inline-size;
    }

    #username h2 {
        margin-top: 5px;
        margin-bottom: 10px;
    }

    #bio-outer {
        display: grid;
        grid-template-rows: 80% auto;
        justify-items: left;
    }

    #bio-shell {
        width: 100%;
        display: grid;
        grid-template-rows: 20% 1fr;
    }

    .ql-editor {
        height: 150px;
        overflow-y: auto;
    }

    #update-bio, #update-pp {
        background: none;
        border: none;
        text-decoration: underline;
        color: blue;
    }

    #update-bio:hover, #update-pp:hover {
        cursor: pointer;
    }

    #submit-bio {
        margin: 1rem;
    }

}



#profile-pic {
    width: 100%;
    aspect-ratio: 1/1;
    image-rendering: pixelated; 
    image-rendering: crisp-edges;
    background-image: url("/assets/images/naked_pirayha.png");
}