@media (hover:hover){

    .skinbox:hover {
        border-color: #ffffff; /* Change border color on hover */
        width: 59px;
        height: 49px;
        margin: 3px;
    }

    .expression-box:hover {
        border-color: #ffffff; /* Change border color on hover */
        background-color: rgb(87, 128, 154);
        width: 59px;
        height: 59px;
        margin: 3px;
    }

    .roleskin-box:hover {
        border-color: #ffffff; /* Change border color on hover */
        background-color: rgb(87, 128, 154);
        width: 59px;
        height: 59px;
        margin: 3px;
    }

    .gesture-box:hover {
        border-color: #ffffff; /* Change border color on hover */
        background-color: rgb(87, 128, 154);
        width: 59px;
        height: 59px;
        margin: 3px;
    }

    .clothesbutton:hover {
        background-color: rgb(190, 232, 241);
    }
    
    .playerbutton:hover {
        background-color: rgb(240, 0, 60);
    }
    
    .dyesbutton:hover {
        background-color: rgb(170, 0, 240);
    }

}

.clothesbutton {
    height: calc(34% - 2px);
    width: calc(100%);
    background-color: rgb(48, 91, 117);
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center;
    margin-bottom: 1px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
}
.clothesbutton img {
    width: 48px;
    height: 48px;
    pointer-events: none;
}
.clothesbuttonclicked {
    background-color: rgb(190, 232, 241);
}

.playerbutton {
    height: calc(33%);
    width: calc(100%);
    background-color: rgb(137, 30, 43);
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center;
    margin-bottom: 1px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
}
.playerbutton img {
    width: 48px;
    height: 48px;
    pointer-events: none;
}
.playerbuttonclicked {
    background-color: rgb(240, 0, 60);
}

.dyesbutton {
    height: calc(33%);
    width: calc(100%);
    background-color: rgb(128, 0, 200);
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
}
.dyesbutton img {
    width: 40px;
    height: 40px;
    pointer-events: none;
}
.dyesbuttonclicked {
    background-color: rgb(170, 0, 240);
}

.inventory-player {
    height: calc(100%);
    width: calc(100% - 100px);
    flex:1;
    flex-direction: column;
    background-color: rgb(48, 91, 117);
    border: 5px solid rgb(240, 0, 60); /* Add a white border */
    border-top-right-radius: 10px; /* Optional: Add border radius for rounded corners */
    border-bottom-right-radius: 10px;
    box-shadow: #000 2px 2px,#000 2px 2px inset;
    overflow-y: scroll;
}

.inventory-player::-webkit-scrollbar {
    width: 12px; /* Set the width of the scrollbar */
}

.inventory-player::-webkit-scrollbar-track {
    background: #33333300; /* Set the color of the scrollbar track */
}

.inventory-player::-webkit-scrollbar-thumb {
    background: rgb(98, 179, 197); /* Set the color of the scrollbar thumb */
    border-radius: 10px; /* Set the border radius of the thumb */
}

.inventory-player::-webkit-scrollbar-thumb:hover {
    background: rgb(190, 232, 241); /* Set the color of the scrollbar thumb on hover */
}

.inventory-dyes {
    height: calc(100%);
    width: calc(100% - 100px);
    flex:1;
    flex-direction: column;
    background-color: rgb(48, 91, 117);
    border: 5px solid rgb(170, 0, 240); /* Add a white border */
    border-top-right-radius: 10px; /* Optional: Add border radius for rounded corners */
    border-bottom-right-radius: 10px;
    box-shadow: #000 2px 2px,#000 2px 2px inset;
    overflow-y: scroll;
}

.inventory-dyes::-webkit-scrollbar {
    width: 12px; /* Set the width of the scrollbar */
}

.inventory-dyes::-webkit-scrollbar-track {
    background: #33333300; /* Set the color of the scrollbar track */
}

.inventory-dyes::-webkit-scrollbar-thumb {
    background: rgb(98, 179, 197); /* Set the color of the scrollbar thumb */
    border-radius: 10px; /* Set the border radius of the thumb */
}

.inventory-dyes::-webkit-scrollbar-thumb:hover {
    background: rgb(190, 232, 241); /* Set the color of the scrollbar thumb on hover */
}

.title {
    font-family: CenturyGothicBold;
    font-size: 24px;
    color:white;
    padding-top: 5px;
    margin-left:5px;
}

.skin-colors {
    display: flex;
    width: calc(100% - 10px);
    height: calc(auto + 4px);
    margin-left:5px;
    margin-right:5px;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: flex-start; /* Align items starting from the left */
}

.skinbox {
    height: 45px;
    width: 55px;
    margin: 5px;
    border-radius: 10px;
    box-shadow: #000 2px 2px, #000 2px 2px inset;
    cursor: pointer;
}

#customskin {
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.selected{
    border: 4px solid yellow !important;
    opacity: 1 !important; /* Initially invisible */
    transition: transform 0.5s ease-in, opacity 0.2s !important;
}

.facial-expressions {
    display: flex;
    width: calc(100% - 10px);
    height: calc(auto + 4px);
    margin-left:5px;
    margin-right:5px;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: flex-start; /* Align items starting from the left */
}

.expression-box {
    width: 55px;
    height: 55px;
    margin: 5px;
    background-color: rgb(62, 118, 152); /* Example background color */
    border: 5px solid rgb(190, 232, 241); /* Example border */
    border-radius: 10px;
    box-shadow: #000 2px 2px,#000 2px 2px inset;
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    cursor: pointer;
}

.expression-image {
    width: 32px;
    height: 32px;
    pointer-events: none;
}

.hand-gestures {
    display: flex;
    width: calc(100% - 10px);
    height: calc(auto + 4px);
    margin-left:5px;
    margin-right:5px;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: flex-start; /* Align items starting from the left */
}

.gesture-box {
    width: 55px;
    height: 55px;
    margin: 5px;
    background-color: rgb(62, 118, 152); /* Example background color */
    border: 5px solid rgb(190, 232, 241); /* Example border */
    border-radius: 10px;
    box-shadow: #000 2px 2px,#000 2px 2px inset;
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    cursor: pointer;
}

.gesture-image {
    width: 32px;
    height: 32px;
    pointer-events: none;
}

.role-skins {
    display: flex;
    width: calc(100% - 10px);
    height: calc(auto + 4px);
    margin-left:5px;
    margin-right:5px;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: flex-start; /* Align items starting from the left */
}

.roleskin-box {
    width: 55px;
    height: 55px;
    margin: 5px;
    background-color: rgb(62, 118, 152); /* Example background color */
    border: 5px solid rgb(190, 232, 241); /* Example border */
    border-radius: 10px;
    box-shadow: #000 2px 2px,#000 2px 2px inset;
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    cursor: pointer;
}

.roleskin-image {
    width: 50px;
    height: 50px;
    pointer-events: none;
}

.hair-dyes {
    display: flex;
    width: calc(100% - 10px);
    height: calc(auto + 4px);
    margin-left:5px;
    margin-right:5px;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: flex-start; /* Align items starting from the left */
}

.eye-drops {
    display: flex;
    width: calc(100% - 10px);
    height: calc(auto + 4px);
    margin-left:5px;
    margin-right:5px;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: flex-start; /* Align items starting from the left */
}

.contact-lenses {
    display: flex;
    width: calc(100% - 10px);
    height: calc(auto + 4px);
    margin-left:5px;
    margin-right:5px;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: flex-start; /* Align items starting from the left */
}