@import url(/components.css);

.avatarvarientcontainer{
    /* display: flex
    flex-wrap: wrap; */
    /* border: 0px solid var(--secondary-color); */
    /* gap: 25px; */
    /* height: 200px; */
    width: 100%;
    /* justify-content: center;
    align-items: center; */
    /* margin: 25px 0; */
    /* padding: 5px; */
    /* background-color: var(--secondary-color); */


}

.avatarvarienttitle{
    color: var(--primary-color);
    margin: 1rem;
}

.documentcontentheader{
    color: var(--primary-color); 
    margin: 1rem;
}

.avatarvarientpara{
    margin: 1rem;
    width: 90%;
}
.avatarvarientheader{
    color: var(--primary-color); 
    margin-left:1rem;
}



.avatar{
    height: 20vh;
    width:25vw;
    border-radius: 50%;
    /* border: 0.5px solid black; */
    margin: 1rem;
    background-color: var(--dnd-color);
    box-shadow: 0 4px 4px 0;

}

.sm{
    height: 65px;
    width:65px;

}

.md{
    height: 85px;
    width:85px;

}

.lg{
    height: 100px;
    width:100px;

}

.avatar-square{
    height: 20vh;
    width:25vw;
    /* border: 0.5px solid black; */
    background-color: var(--dnd-color);
    box-shadow: 0 4px 4px 0;

    margin:1rem;
}

.sq-sm{
    height: 65px;
    width:65px;

}

.sq-md{
    height: 85px;
    width:85px;

}

.sq-lg{
    height: 100px;
    width:100px;

}

#component-avatar{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    gap:1rem;
    margin: auto;
    justify-content:flex-start;
    
}