/* 
COPYRIGHT AVALANCHE PLEASE DONT REUSE!
SKID = BAD!!
*/
.main{
    display:flex;
}
.user{
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
    width:100%;
    padding-left:10px;
    padding-right:10px;
    margin-top:10px;
}
.basicaccount-info{
    display: flex !important;
    overflow:hidden;
}
.avatar{
    width:130px;
    height:130px;
    border:0;
    border-radius:5px;
}
.avatar-section{
    margin-right:10px;
}
.account-name{
    font-weight:400;
    font-size:1.9rem;
    margin-top:10px;
    margin-bottom:16px;
}
.account-name-raw{
    font-weight:400;
    font-size:1rem;
    margin-top:1px;
    color:gray;
}
.account-info-descriptioninput{
    padding: .25rem .5rem;
    font-size: .875rem;
    background-color:transparent;
    color:white;
    border:1px solid gray;
    border-radius:5px;
    transition:all 0.3s ease-in-out;
}
.counters{
    display:flex !important;
    gap:8px;
}
.counter{
    /*display:grid;*/
    justify-content:center;
    justify-items:center;
    text-align:center;
    align-items:center;
    align-items:center;
}
.counter-title{
    font-size: 15px;
    color: rgb(199, 199, 199) !important;
    margin-bottom:5px;        
}
.counter-number{
    color:white !important;
    text-decoration:none !important;
    font-size: 1.4rem;
    cursor:pointer;
}
.selectors{
    background-color: rgb(40, 40, 40);
    overflow: hidden;
    width:100%;
    height:42px;
    border:0;
    border-radius:5px 5px 0px 0px;
    margin-top:10px;
    display:flex;
    align-items:center;
}
.selector{
    display:flex;
    width:50%;
    justify-content:center;
    justify-items:center;
    /* just to be sure ok? */
    align-items:center;
    align-content:center;
    text-align:center;
    color:white !important;
    cursor:pointer;
    text-decoration:none !important;
    height:100%;
   
}
.selector:hover{
    border-bottom:5px solid gray;
}
.selector-active{
    border-bottom:5px solid white !important;
}
.selector p{
    margin:0;
    font-weight:700;
}
.desctitle{
    display:flex;
    align-items:center;
    justify-items:center;
    gap:8px;
}
.edit-button{
    background-color:transparent;
    border:1px solid #bcbec8;
    height:38px;
    display:flex;
    justify-content:center;
    align-items:center;
    width:38px;
    border-radius:5px;
    cursor:pointer;
    color:#bcbec8;
    transition:all 0.2s ease-in-out;
}
.edit-button:hover{
    background-color:#bcbec8;
    color:white;
}
.editsvg{
    height:28px;
    width:28px;
}
.description-view{
    width:100%;
    text-align:start;
    /*white-space: pre-wrap;
    word-wrap: break-word;*/
    color: #9ca3af;
    border-bottom:1px solid #444;
    margin-bottom:10px;
}
.avatar-and-items-view{
    display:flex;
    width:100%;
    flex-wrap:wrap;
    gap:12px;
}
.avatar-view-full{
    border:1px solid;
    border-color:rgb(60,60,60) !important;
    border-radius:5px;
    width:392px !important;
    height:390px !important;
     /*width:50%;*/
    overflow:hidden;
    display:flex;
    justify-content:center;
    justify-items:center;
    align-items:center;
    align-content:center;
}
.avatar-full-png{
    height:374px !important;
    cursor:help;
    width:374px !important;
    transition:all 0.1s ease-in-out;
}
.avatar-full-png:hover{
    transform:scale(1.04);
}
.currently-wearing-section{
    /*width: 48%;*/
    width:392px !important;
    height:390px !important;
    border:1px solid;
    border-color:rgb(60,60,60) !important;
    border-radius:5px;
    padding:0;
    
}
.currently-wearing-title{
    font-size: 1.25rem;
    padding:0;
    margin:0;
    text-align:center;
    margin-top:15px !important;
    padding-bottom:15px !important;
}
.currentlywearingitems-container{
    width:100%;
    display:flex;
    /*padding-left:5px;
    padding-right:5px;
    */
    gap:8px;
    flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    align-items:center;
    justify-content:center;
}
.item{
    /*width:93px;
    height:93px;*/
    height:86px;
    width:86px;
    background-color:rgb(30,30,30);
    border-radius:5px;
    display:flex;
    justify-content:center;
    justify-items:center;
    align-items:center;
    align-content:center;
    cursor:pointer;
    transition:all 0.2s ease-in-out;
    
}
.item:hover{
    transform:scale(1.1) rotate(-5deg);
}
.item-image{
    width:85px;
    height:85px;
}
.section-title{
    font-size: 1.25rem;
    font-weight:500;
    width:100%;
    display:flex;
    align-items:center;
}
.friends-section{
    width:100%;
    height:100px;
    background-color: rgb(30,30,30) !important;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    border-radius:5px;
    display:flex;
    align-items:center;
    /*padding-left:10px;
    padding-right:10px;*/
}
.friend{
    text-align:center;
    height:90px;
    transition: all 0.3s ease-in-out;
    cursor:pointer;
    font-size:0.87rem;
    margin-left:10px;
}
.friend:hover{
    transform:scale(1.1)
}
.friend p{
   margin:0;
}
.friend img{
   border-radius:5px;
   height:70px;
   width:70px;
}
.see-all{
    text-decoration:none !important;
    margin-left:auto !important;
}
.about{
    width:100%;
    height:100px;
    background-color: rgb(30,30,30) !important;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    border-radius:5px;
    display:flex;
    align-items:center;
    margin-top:20px;
}
.about-element{
    width:50%;
    /*display:flex;*/
    justify-content:center;
    text-align:center;
    /*align-items:center;*/
    justify-items:center;
    align-content:center;
}
.about-element h2{
    color: rgb(199, 199, 199) !important;
    font-weight:bolder;
    margin-top:5px;
    margin-bottom:8px;
}
.about-element h3{
    font-size: 1.5rem;
    margin:0;
    color:white;
    font-weight:400;
}