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

.profileLeft{
    flex:1
}

.activeButton{
    background: #00000030;
    font-weight: 800;
}
.tagLists{
    display: flex;
    gap: 10px;
    /*min-width: 320px;*/
    flex-wrap: wrap;
}
.tagFooter{
    display: flex;
    flex-wrap: wrap;
    gap:20px;
}
.date{
    margin-left: auto;
}
.puzzles{
    padding: 10px;
}
.puzzleContainer{
    border-radius: 5px 5px;
    border: solid 1px #00000060;
}

.puzzleContainer .puzzles:not(:first-of-type){
    border-top: solid 1px #00000050;
}
.puzzleDate{
    font-size: 12px;
    margin-left: auto;
    margin-right: 10px;
}
.puzzles a:not(.tagFooter a){
    display: block;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 20px;
}
.dataTitle{
    margin: 10px 0 0 0;
    display: flex;
    gap: 20px;
    font-size: 12px;
    flex-wrap: wrap;
    align-items: baseline;
}
.smallScore{
    border: solid 1px green;
    background: #00ff0040;
    padding: 2px 6px;
    border-radius: 4px;
}
.minusScore{
    border: solid 1px red;
    background: #ff000040;
    padding: 2px 6px;
    border-radius: 4px;
}
.largeScore{
    border: solid 1px #0ef3a0;
    background: #0ef3a058;
    padding: 2px 6px;
    border-radius: 4px;   
}

.lessHard{
    border: solid 1px orangered;
    background: #ff450080;
    padding: 2px 6px;
    border-radius: 4px;   
}

.muchHard{
    border: solid 1px #f54141;
    background: #f54141d0;
    padding: 2px 6px;
    border-radius: 4px;   
}
.neutral{
    border: solid 1px white;
    background: #ffffff;
    padding: 2px 6px;
    border-radius: 4px;   
}

.spinner {
    margin: auto;
    border: 3px solid lightblue;
    border-top: solid 3px darkslategrey;
    border-radius: 50% !important;
    width: 25px!important;
    height: 25px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
h2 #number{
    font-size: 17px;
}

.navButtons{
    margin-top: 20px;
    margin-bottom: 15px;
    margin-left: auto;
    display: flex;
    gap: 5px;
    float: right;
}
.navButtons button{
    border: solid 1px gray;
    border-radius: 3px;
    font-size: 10px;
    display: block;
    max-width: fit-content;
    font-family: Lato;
    padding: 4px 8px;
}

.navButtons button:hover{
    cursor: pointer;
}

.navButtons button.active{
    background: salmon;
    border: solid 1px salmon;
    color:white
}
.titleBar{
    display: flex;
}

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