body{
    font-family: Catamaran;
    margin: 0;
    padding: 0;
    font-size: 14px;
    
    background-attachment: fixed;
    background-image: /*url(img/site-background-image.svg?v=c0585d868bdd),*/
    linear-gradient(to bottom, #fffed6 0, #bbba9e 270px, #2dbab4 900px);
    overflow-x: hidden;
}
a:not([id="footerlinks"]){
    text-decoration: none;
    color:black;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #171717;
    z-index: 10;
    position: fixed;
    top:0;
}

.rightHeader {
    flex: 0 0 30%;
    display: flex;
    justify-content: flex-end;
    margin-right: 50px;
}
.leftHeader{
    flex: 0 0 22%;
    margin-left: 10%;
}
.rightHeaderContent{
    display: flex;
}
.rightHeaderLinks{
    display: block;
    padding:13px;
    font-weight: 700;
}

.rightHeaderLinks:hover{
    background: #000000;
    
}
.middleHeader {
    flex: 0 0 30%;}

.headerImages {
    display: flex;
    gap: 10px;
}

.logo-svg{
    max-width: 3.5vh;
    padding: 10px;
}

.header-svg{
    max-width: 20vh;
}
.bunchOfSections{
    display: flex;
    min-height: 82vh;
    position: relative;
    margin-top: 100px;
}

.leftSection{
    flex:2;
    max-width: 300px;
    padding-right: 0;
    overflow-x: hidden;

}
.leftSection a{
    display: block;
    padding: 5px 5px;
    margin-left: 30px;
    font-size: 13px;
    border-radius: 5px 0 0 5px;
}
.leftSection #active{
    background: #E5EAE3;
    font-weight: 600;
}

.leftSection a:hover{
    background: #E5EAE3;

}
.leftSectionNavigationBar{
    position: fixed;
    width: 200px;
    margin-left: 100px;
}

.middleSection{
    border-radius: 5px 5px 0 0;
    flex: 3;
    max-width: 75%;
    background: white;
    margin-bottom: 45px;
    padding: 5px;
}
.middleSectionContent{
    width:95%;
    margin: auto;
}


#footerlinks a{
    color:antiquewhite;
    text-decoration: none;
    font-size: 12px;
}
.left i{
    color:white;
}
.left i:hover{
    color:cyan;
}
.leftSectionBtn img {
    cursor: pointer;
    display: none;
}

.closeBtn{
    padding: 0px 4px;
    background: rgb(255, 76, 76);
    font-family: "Font Awesome 6 Free";
    font-size: 25px;
    margin: 10px 0px;
    float: right;
}
.closeBtn:hover{
    cursor: pointer;
}

#number{font-family: Lato;}

h4{
    margin-top: 5px;
    margin-bottom: 5px;
    color:brown
}


.tag{
    font-weight: 700;
    font-size: 12px;
    padding: 3px 5px;
    background: #BEE1F3;
    border-radius: 5px;
    color: #313942;
    width:fit-content;
    white-space: nowrap;
}

.tag img{
    width:20px;
}

.leftLinks{
    display: flex;
}
.leftLinks span{
    margin: 0 5px;
}

.fa-solid,.fa-regular{
    width:14px;
}

.topContent{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 15px;
}


.topContent>:last-child:not(.editTopContent){
    margin-left: auto;
    min-width: 105px;
}
.topContent img{
    max-width:96px;
    flex:1;
    width: 100%;
}
.horizontalInfo {
    font-size: 13px;
    display: flex;
    gap:20px
}


.horizontalInfo>div{
    display: flex;
    gap: 5px;
    align-items: center;
}

.topContent>:last-child a{
    font-size: 13px;
    padding: 5px 10px;
    border: solid 1px #272727;
    border-radius: 5px;
    display: flex;
    gap: 5px;
}
.topContent>:last-child i{
    width:15px;
    margin-right:10px;
}

.profileNavigations{
    margin: 20px 20px;
    display: flex;
    gap: 10px;
}
.profileNavigations a{
    cursor: pointer;
    padding: 3px 20px;
    border-radius: 15px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.profileNavigations a:hover{
    background: #BEE1F3;
}
.profileNavigations a.active{
    background: #BEE1F3;
}

.profileSubjects{
    display: flex;
    gap:20px;
    font-size: 13px;
    margin-bottom: 20px;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    border-radius: 5px;
    padding: 10px;
    background: #f1f1f1;
}
.wrapper p{margin: 0;}

.profileAbout{
    border-radius: 5px;
    padding: 10px;
    background: #f1f1f1; 
    min-height: 150px;
}
.profileAbout p{
    text-align: center;
}
.profileInformation{
    flex:2;
}
.profileStats{
    flex:1;
}
.profileAbout a{
    color:blueviolet;
    font-weight: 600;
}
.badgeInfo img{
    width: 50px;
}
.badgeInfo{
    display: flex;
    gap:10px;
}
.badgeInfo div:not(.badgeList):not(.badgeTitle){
    border:solid 1px #d5d5d5;
    padding: 10px;
    border-radius: 5px;
}
.badgeInfo p{
    text-align: center;
}
.badgeList{
    display: flex;
    margin-bottom: 10px;
}
.date{
    margin-left: auto;
    font-weight: 500;
    font-size: 11px;
    margin-bottom: 3px;
    position: relative;
    top: 0.1px;
}
.badgeInfo a{
    margin: auto;
    display: block;
    background: #2dbab4;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
}
.gold,.silver,.bronze{
    flex:1;
}
.achievementName img{
    width: 12px;
}
.achievementName{
    display: flex;
    gap: 10px;
    background: #333333;
    color:white;
    padding: 2px 9px;
    font-size: 11px;
    border-radius: 5px;
}
.wrapper #number{
    font-weight: 700;
}
.badgeTitle{
    display: flex;
    gap:10px;
    margin: 10px 0 20px 0;
}
.badgeTitle span{
    margin-left: auto;
}
.badgeTitle img{
    width:40px;
}
.badgeTitle #number{
    font-size: 20px;
    font-weight: 700;
}
.tagsElement{
    padding: 10px;
    display: flex;
}
.tagUseInfo,.postLists,.voteLists{
    border: solid 1px #a19e9e;
    border-radius: 10px;
}


.tagUseInfo div:not(:first-child){
    border-top: solid 1px #a19e9e;
}
.tagValue{
    margin-left: auto;
}

.postLists div:not(:first-child){
    border-top: solid 1px #a19e9e;
}
.postInfo{
    padding: 10px;
    display: flex;
    gap:10px;
    align-items: center;
}
.postInfo #number{
    position: relative;
    text-align: center;
}
.green{
    border:solid 1px green;
    padding: 5px 10px;
    border-radius: 5px;
}

.red{
    border:solid 1px red;
    padding: 5px 10px;
    border-radius: 5px;
}
.hardness{
    background: antiquewhite;
    padding: 5px 10px;
    border-radius: 5px;
}
.postInfo :last-child:not(a){
    margin-left: auto;
    font-weight: 500;
    font-size: 11px;
}
.postInfo :nth-child(3){
    font-weight: 600;
}
.centerData{
    margin: auto;
    min-height: 200px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
}
.voteLists{
    padding: 10px;
    display: flex;
    gap:10px;
}
.voteLists div{
    flex: 1;
}
.activeBounty{
    background: #18864B;
    color:white;
    padding: 4px 8px;
    border-radius: 5px;
}


.activityAchievementName{
    max-width: fit-content;
    margin: auto;
    background: #333333e0;
    color: white;
    padding: 4px 12px;
    font-size: 11px;
    border-radius: 5px;   
    display: flex;
    gap:10px;
}
.activityAchievementName:hover{
    cursor: pointer;
    background: #333333;
}

.activityAchievementName img{
    width: 12px;
}

.profileRightLinks{
    position: sticky;
    top: 60px;
    align-self: flex-start;
}
.profileRightLinks a{
    display: block;
    padding: 3px 15px;
    font-weight: 600;
    margin: 5px 0;
    border-radius: 10px;
}
.profileRightLinks a:hover{
    background:darkseagreen;
}
.profileRightLinks a.active{
    background: darkseagreen;
}

.puzzlesTop{
    display: flex;
    gap:10px;
    flex-wrap: wrap;
}
.puzzlesTop>div{
    display: flex;
    margin-left: auto;
    align-items: center;
}

.postButtons{
    border: solid 1px darkgray;
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    font-size: 12px;
}

.postButtons span{
    padding: 2px 10px;
    border-radius: 5px;
}

.postButtons>span:hover{
    background: #00000030;
    cursor: pointer;
}
.profileLeft{
    flex:1;
}

.activeButton{
    background: #00000030;
    font-weight: 800;
}

h2 #number{
    font-size: 17px;
}

.titleBar{
    display: flex;
    margin-bottom: 20px;
}

.profileRightLinks::-webkit-scrollbar {
    width: 12px;
}

.profileRightLinks::-webkit-scrollbar-track {
    background: #e0f2e9; 
    border-radius: 10px;
}


.profileRightLinks::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #4caf50, #81c784);
    border-radius: 10px;
    border: 2px solid #e0f2e9;
}

.profileRightLinks::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #388e3c, #66bb6a);
}
 .banDiv{
    width: 95%;
    margin: auto;
    font-size: 13px;
    margin-top: 20px;
    background: #ff444482;
    padding: 8px 10px;
    border-radius: 10px;
}

.logOut{
    font-size: 12px;
    padding: 3px 10px;
    border: solid 1px #272727;
    border-radius: 5px;
    background: white;
    font-family: Catamaran;
    margin-top: 10px;
    margin-left: auto;
    display: flex;
    font-weight: 600;
    cursor: pointer;
}

.modal {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4);
  }

  .modal-content {
    margin: 15% auto;
    border: 1px solid #888;
    width: 300px;
    height: 400px;
    text-align: center;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    background: white;
  }


.innerModalButtons{
    display: flex;
    gap: 20px;
    max-width: fit-content;
    margin: auto;
}

.innerModalButtons>button{
    font-family: Catamaran;
    cursor: pointer;
}

.modal-content>div{
    margin: 30px;
    display: flex;
    flex-direction: column;
    margin-top: 30%;
}
  
  .modal-content h1{
    font-size: 35px;
    font-weight: 800;
  }
  
  .modal-content p{
    font-size: 20px;
    font-weight: 700;
    font-variant: petite-caps;
  }
 
  
  .close2{
    display: flex;
    margin-left: auto;
    width: fit-content;
    padding: 5px;
    cursor: pointer;
    border-radius: 0 10px 0 0;
  }

  .close2:hover{
    background: antiquewhite;
  }

.gold img, .silver img, .bronze img{
    width: 50px;
    margin: auto;
    display: block;
}