.projectBtn{
    /* background-position: center; */
    background-color: maroon;
    font-family: 'Bacasime Antique', sans-serif;
    font-size: 12px;
    color: rgb(88, 9, 9);
    box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.861);
    border-color: rgba(255, 255, 255, 0.83);
    border-width: thick;
    border-radius: 20% / 60%;
    margin-bottom: 3%;
    height: fit-content;
    width: 100%;
    /* display: block; */
  }
/* change hover style */
.projectBtn:hover{
    box-shadow: inset 0.5em 0.5em 2em black, 0.5em 0.5em 2em black;
    color: white;
}

.projectContainer{
    position: relative; 
    max-width: fit-content; 
    max-height: 80%; 
    left: 25%;
}
.projectContainer img{
    position: relative;
    /* display: block; */
    /* width: 100%;
    height: 100%; */
}

.project-container {
    position: absolute;
    /* display: block; */
    top: 5vh; /*Position at the center vertically */
    left: 3vw; /* Position at the center horizontally */
    overflow-y: scroll;
    overflow-x: hidden;
    width: 40vw;
    height: 65vh;
    max-width: 75%;
    max-height: 85%; /*Set maximum height for the container */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer */
    direction: rtl;
}
@media (max-width: 600px) {
    .project-container {
        position: absolute;
        /* display: block; */
        top: 5vh; /*Position at the center vertically */
        left: 12vw; /* Position at the center horizontally */
        overflow-y: scroll;
        overflow-x: hidden;
        width: 95vw;
        height: 65vh;
        max-width: 75%;
        max-height: 85%; /*Set maximum height for the container */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer */
        direction: rtl;
    }
    .sort-mode-container{
        position: absolute;
        top: 5vh; /*Position at the center vertically */
        right: .05vw; /* Position at the center horizontally */
        overflow-y: scroll;
        overflow-x: hidden;
        /* width: 50%;
        height: 85%; Set maximum height for the container */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer */
    }
}

/* Show the custom scrollbar */
.project-container::-webkit-scrollbar {
    width: 16px; /* Set the width of the scrollbar */
}

/* Track */
.project-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* Set the background color of the scrollbar track */
}

/* Handle */
.project-container::-webkit-scrollbar-thumb {
    background: #888; /* Set the color of the scrollbar handle */
}

/* Handle on hover */
.project-container::-webkit-scrollbar-thumb:hover {
    background: #555; /* Set the color of the scrollbar handle on hover */
}

.sort-mode-container{
    position: absolute;
    top: 5vh; /*Position at the center vertically */
    right: 1vw; /* Position at the center horizontally */
    overflow-y: scroll;
    overflow-x: hidden;
    /* width: 50%;
    height: 85%; Set maximum height for the container */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer */
}

.sort-mode-container button{
    background-position: center;
    background-color: black;
    font-family: 'Bacasime Antique', sans-serif;
    font-size: 12px;
    color: white;
    /* box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.861); */
    border-color: rgba(255, 255, 255, 0.83);
    border-width: thick;
    border-radius: 60%;
    height: 60px;
    width: 60px;
    display: block;
    margin-bottom: 7%; 
}
.sort-mode-container button:hover{
    border-color: maroon;
    display: block;
}