/* ==================== 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: 240px;
    height: 240px;
    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: 100%;
    height: 100%;
}

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

.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 {
    display: flex; /* Use flexbox to align children horizontally */
    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);
}
.potion p {
    color: var(--medium_purple);
}
.potion .profile-pic {
    background-image: url('/images/profiles/potion.jpg');
}

.potion .avatar-base {
    background-image: url('/images/profiles/potion-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;
}
.narrator p {
    color: white;
}
.narrator .profile-pic {
    background-image: url(/images/profiles/narrator.jpg);
}




.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);
}
.frog p {
    color: var(--rock_spray);
}
.frog .profile-pic {
    background-image: url(/images/profiles/frog.jpg);
}




.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);
}