#profileUpper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: row;
    background-color: var(--bg-b);
    padding-bottom: 1rem;
    padding-top: 1rem;
}

#profileLower{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    /* align-self: center; */
    /* border-bottom-left-radius: 15vw; */
    /* border-bottom-right-radius: 15vw; */
    /* width: fit-content; */
    margin: 0vw auto 3vw auto;
    border-bottom: solid 0.2vw var(--bg-c);
    flex-direction: column;
    background-color: var(--bg-b);
    padding: 1vw 12vw 2vw 12vw;
    box-shadow: 0 2vw 3vw -1vw var(--shadow);
}

#profilePictureContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1rem;
}

.profileCountButton {
    padding: 1rem;
}

.profileCountLabel {
    font-weight: lighter;
}

.profileCountNumber {
    font-weight: bold;
    font-size: 200%;
}

.profileButtonContainer {
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    /* min-width: 5rem; */
    width: 25vw;
    max-width: 5rem;
}

#profileEventsContainer {

}

#profileBuddiesContainer {

}

#profileBuddiesContainer img {
    height: 3em;
    width: 3em;
}

#profileEventsContainer img {
    height: 3em;
    width: 3em;
}

#profilePicture {
    transition: all 0.3s, box-shadow 1s, height 1s, border-radius 0.7s;
    background-color: var(--bg2-a);
    /* max-height: 50vh; */
    max-width: 22rem;
    /* margin: 1em 0 0 0; */
    width: 100%;
    min-width: 8rem;
    border-radius: 25vh;
    border: solid 0.1rem var(--bg-c);
    box-shadow: 0 .5vw 1vw 0.2vw var(--shadow);
}

#profilePicture.clicked {
    background-color: var(--bg2-a);
    border-radius: 1vw;
    border: solid 0.1rem var(--bg-b);
    box-shadow: 0vw 0vw 10vw 2vw var(--shadow);
}

#profileLocationEdit{
    flex-direction: column;
    width: 100%;
}

#profileLocationEditInput {

}

#profileName {
    display: inline;
    font-size: 200%;
    font-weight: bold;
}

#profileNickname {
    display: inline;
    font-size: 150%;
}

#profileInfo {
    display: flex;
    flex-direction: column;
    align-content: center;
}

#profileInfoFieldFrame {

}

#profileLocation, #profileBirthday, #profileExperience{
    display: inline;
}

#profileExperience{
    margin-top: 2vw;
}

.profileInfoSection {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    /* gap: 1rem; */
    padding: 0.5rem;
    margin: auto;
}

.profileEditField {
    display: none;
}

#profileeditbtn {
    background-color: var(--bg2-a);
    position: absolute;
    right: 7vw;
    top: 4vw;
    height: 3em;
    width: 3em;
}

#profileEditPicture {
    display: none;
    justify-content: center;
    margin-top: 1rem;
}

.profilepicbutton {
    background-color: var(--bg2-a);
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 3rem; */
    /* width: 3rem; */
    margin: .1rem;
    padding: 0;
}

.profilepicbutton img {
    height: 3em;
}

#profileeditbtn.toggledon {
    border: 0.5vw solid var(--accent);
}

#profileeditbtn img {
    transition: all 0.2s;

    height: 3em;
    transform: scale(1.4, 1.4) rotateZ(45deg) translate(0vw, -1vw);
}

#profileeditbtn.toggledon img {
    transform: scale(1.4, 1.4) rotateZ(15deg) translate(0vw, -2vw);
}

#profilebuttons_upper {
    display: flex;
    transition: all 0.2s;
    flex-direction: column;
    justify-content: space-evenly;
    height: 14vh;
    border-bottom: solid 0.1vw var( --bg-c);
}

#profilebuttons_lower {
    display: flex;
    transition: all 0.2s;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 1.5rem auto 0vw auto;
    padding: 1rem;
    background-color: var(--bg-b);
    border-top: solid 0.1rem var(--bg-c);
    box-shadow: 0 -1.5rem 1rem -.5rem var(--shadow), 0 1.2rem 1rem -1.5rem var(--shadow);
}

#profileaddfriend, .profileremovefriend {
    margin: 1rem auto;
    padding: 1rem;
    font-weight: bold;
    background-color: var(--bg-b);
    border: 0.1rem solid var(--accent);
    box-shadow: 0 1rem 1rem 0.5rem var(--shadow);
}

#profilefriendstatus {
    margin: 0vw 0vw 2vw 0vw;
    font-size: 150%;
}

#profileExperienceEdit {
    background-color: var(--bg-a);
    width: auto;
}

#profileTeams {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1vw 8vw;
}

#profileTeams .listitem {
    margin: 0.5rem auto;
    width: 85%;
    max-width: 25rem;
}

.profileSectionTitle {
    border-bottom: solid 0.1vw var(--bg-c);
    box-shadow: 0 1.2vw 1vw -.5vw var(--shadow);
    padding: 1vw;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    width: 80vw;
    max-width: 40rem;
    font-weight: bold;
}

/* hide 'camera upload' button on desktop */
.desktopmode #profilePicCamUpload {
    display: none;
}

/* always hide the upload widget, which is only used on desktop. we can't use 'display: none' because it makes the input untriggerable */
#profilePicUploadFile {
    width: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}

#profileSocialSection {
    margin: 0 3em;
    display: flex;
    flex-direction: row;
    justify-content: center;

}

#profileSocialSection img{
    align-self: center;
    width: 2rem;
    margin-bottom: 1rem;
}

#profileSocialSectionEdit{
    display:none;
}

.profilesocial {
    display: flex;
    flex-direction: column;
    justify-content: start;
    /* width: 100%; */
    margin: 1rem 0.5rem;
    font-size: 0.9rem;
    word-break: break-all;
    margin-top: 2vw;
}

#profilePrivacyEdit{    
    margin: 1rem auto 1rem auto;
    max-width: 15rem;
}

#profilePrivacy {
    margin: 2vw 0vw 1vw 0vw;
}


#medals {
    display: flex;
    flex-direction: row;
}

#medals .medal {
    display: flex;
    flex-direction: column;
}