/* ==================== BEGIN GENERAL STYLING ================ */
.profile-pic {
    width: 240px;
    height: 240px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0; /* Prevents the profile picture from shrinking */
    border: 5px solid;
}

/* Use this instead of .profile-pic, when you want to layer an expression on top of a base avatar image */
.avatar-wrapper {
    width: 300px;
    height: 300px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border: 5px solid;
    position: relative; /* add this! makes layering possible */
}

/* For use inside .avatar-wrapper */
.avatar-base {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    width: 300px;
    height: 300px;
}

/* For use inside .avatar-wrapper */
.avatar-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* makes clicks behave normally */
}

/* For use inside .avatar-wrapper - expression/emotion layer */
.expression {
    position: absolute;
    inset: 0;
    width: 300px;
    height: 300px;
    background-size: cover;
    background-position: center;
    pointer-events: none; /* makes clicks behave normally */
    z-index: 2;
}

.post-area {
    flex-grow: 1; /* Allows the post area to take up the remaining space */
    padding-bottom: 20px;
    margin: 0px 20px;
}

.user-style {
    border: 5px solid; /* Default border, customizable per user */
    border-left: 20px solid;
    border-bottom: 20px solid;
    margin-bottom: 40px; /* Adds space between each forum post */
    background-color: black;
}

.forum-post {
    align-items: flex-start; /* Align items to the top */
    gap: 20px; /* Space between the profile picture and the post area */
}
/* ==================== END GENERAL STYLING ================ */


/* ==================== BEGIN CHARACTER COLORS AND IMG ================ */
.potion {
    border-color: var(--medium_purple);
    --expression-base-path: '/rooms/potion/expressions/';
}
.potion p {
    color: var(--medium_purple);
}
.potion .profile-pic {
    background-image: url('/images/profiles/potion.jpg');
}

.potion .avatar-base {
    background-image: url('/rooms/potion/expressions/avatar-base.png');
}





.prox3 {
    border-color: var(--medium_purple);
}
.proxy p {
    color: var(--medium_purple);
}
.prox3 .profile-pic {
    background-image: url('/images/profiles/prox3.jpg');
}




.spike {
    border-color: var(--golden_bell);
}
.spike p {
    color: var(--golden_bell);
}
.spike .profile-pic {
    background-image: url('/images/profiles/spike.jpg');
}




.narrator {
    border-color: white;
    --expression-base-path: '/images/blank/';
}
.narrator p {
    color: white;
}

.narrator .profile-pic { /* This can be deleted once voyage log is updated with insert post */
    background-image: url(/images/profiles/narrator.jpg);
}

.narrator .avatar-base {
    background-image: url(/images/profiles/narrator.jpg);
}

.narrator .avatar-border {
    border-color: white;
}



.rocky {
    border-color: var(--screamin_green);
}
.rocky p {
    color: var(--screamin_green);
}
.rocky .profile-pic {
    background-image: url(/images/profiles/rocky.jpg);
}




.frog {
    border-color: var(--rock_spray);
    --expression-base-path: '/images/blank/';
}
.frog p {
    color: var(--rock_spray);
}
.frog .profile-pic { /* This can be deleted once voyage log is updated with insert post */
    background-image: url(/images/profiles/frog.jpg);
}

.frog .avatar-base {
    background-image: url(/images/profiles/frog.jpg);
}

.frog .avatar-border {
    border-color: var(--rock_spray);
}




.computer {
    border-color: var(--razzle_dazzle);
}
.computer p {
    color: var(--razzle_dazzle);
}
.computer .profile-pic {
    background-image: url(/images/profiles/computer.jpg);
}




.mta {
    border-color: var(--light_wisteria);
}
.mta p {
    color: var(--light_wisteria);
}
/* OLD STYLE (only applies if profile-pic is used) */
.mta .profile-pic {
    background-image: url(/images/profiles/mta/mta.jpg);
}

/* NEW STYLE (for layered avatars) */
.mta .avatar-base {
    background-image: url(/images/profiles/mta/mta-avatar-base.png);
}



.voice {
    border-color: yellow;
}
.voice p {
    color: yellow;
}
.voice .profile-pic {
    background-image: url(/images/profiles/yellow-sound.jpg);
}




.space-lion {
    border-color: var(--screamin_green);
}
.space-lion p {
    color: var(--screamin_green);
}

.space-lion .profile-pic {
    background-image: url(/images/profiles/space-lion.jpg);
}


.hae-in {
    border-color: var(--indigo);
    --expression-base-path: '/rooms/potion/expressions/';
}
.hae-in p {
    color: var(--indigo);
}
.hae-in .avatar-base {
    background-image: url('/images/profiles/hae-in-base.png');
}

.hae-in .avatar-border {
    border-color: var(--indigo);
}


.yeo-un {
    border-color: var(--copper);
    --expression-base-path: '/rooms/potion/expressions/';
}
.yeo-un p {
    color: var(--copper);
}
.yeo-un .avatar-base {
    background-image: url('/images/profiles/yeo-un-base.png');
}

.yeo-un .avatar-border {
    border-color: var(--copper);
}


.rc13 {
    border-color: var(--sea_green);
    --expression-base-path: '/rooms/rc13/expressions/';
}
.rc13 p {
    color: var(--sea_green);
}
.rc13 .avatar-base {
    background-image: url('/rooms/rc13/expressions/avatar-base.png');
}

.rc13 .avatar-border {
    border-color: var(--sea_green);
}