img.non-selectable {
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

html {
    overflow: auto !important;
    zoom: 0.9;
}

@media (hover: none) {
    html {
        zoom: 1;
    }
}

body {
    overflow: auto !important;
}

.body {
    max-width: 800px;
    margin: 0 auto; /* Center the content by using auto margins on the body */
}

.header {
    position: relative;
    width: 100%;
    height: 10rem;
    display: flex;
    justify-content: center; /* Center the text horizontally */
    align-items: center;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Adjust spacer width for smaller screens */
@media (max-width: 600px) {
    .header {
        height: 6rem; /* Reduce the spacer width for smaller screens */
    }
}

.header img {
    width: 90%;
    max-width: 520px;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

#scale-button {
    display: block;
    background: transparent;
    color: rgb(32, 52, 80);
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: min(4vw, 20px);  /* Change the font size */
    text-align: center;
    border: 1.5px solid rgb(32, 52, 80); /* Adjust the border color as needed */
    border-radius: 5px;
    width: 100%;
    height: 40px;
    transition: background 0.2s; /* Add transition effects */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#scale-button:hover {
    background: #f1e3d0;
}

#scale-button:active {
    background: #C7B299;
}

/* Adjust spacer width for smaller screens */
@media (max-width: 600px) {
    #scale-button {
        height: 35px; /* Reduce the spacer width for smaller screens */
    }
}

#port-button {
    display: block;
    background: transparent;
    color: rgb(32, 52, 80);
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: min(4vw, 20px);  /* Change the font size */
    text-align: center;
    border: 1.5px solid rgb(32, 52, 80); /* Adjust the border color as needed */
    border-radius: 5px;
    width: 100%;
    height: 40px;
    margin-bottom: min(1.5vw, 0.75rem);
    transition: background 0.2s; /* Add transition effects */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#port-button:hover {
    background: #f1e3d0;
}

#port-button:active {
    background: #C7B299;
}

/* Adjust spacer width for smaller screens */
@media (max-width: 600px) {
    #port-button {
        height: 35px; /* Reduce the spacer width for smaller screens */
    }
}

.background-blocker {
    display: none;
    position: absolute; /* Makes it cover the entire viewport */
    top: 0;
    width: 100vw; /* Full width */
    background-color : white;
    opacity: 85%;
    max-width: 840px;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    z-index: 2;
    overflow: hidden;
}

.background-blocker-preset {
    display: none;
    position: absolute; /* Makes it cover the entire viewport */
    top: 0;
    width: 100vw; /* Full width */
    background-color : white;
    opacity: 85%;
    max-width: 840px;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    z-index: 2;
    overflow: hidden;
}

.background-blocker-custom {
    display: none;
    position: absolute; /* Makes it cover the entire viewport */
    top: 0;
    width: 100vw; /* Full width */
    background-color : white;
    opacity: 85%;
    max-width: 840px;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    z-index: 2;
    overflow: hidden;
}

.scale-ui-container {
    display: none;
    position: absolute;
    left: 0;
    align-items: center;
    justify-content: center; /* Center the text horizontally */
    width: 100%;
    min-width: 0;
    min-height: 0;
    z-index: 3;
}
    .scale-ui {
        margin: 0;
        display: block;
        background: white;
        border: none;
        width: 100%;
        max-width: 840px;
        height: 100%;
        max-height: 800px;
    }

        .search {
            display: flex;
            flex-direction: row;
            align-items: center;
            box-sizing: border-box;
        }

        .search-bar {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: right;
            box-sizing: border-box;
            width: 100%;
        }

            #clear {
                width: 35px;
                height: 35px;
                display: flex;
                position: absolute;
                flex-shrink: 0; /* Prevent the button from shrinking */
                border-radius: 50%;
                border: 0;
                background: transparent;
                color: #a6a6a6;
                cursor: pointer;
                font-family: "Gruppo", sans-serif;
                font-size: 25px;
                transform: translateX(-20px);
                align-items: center;
                justify-content: center;
                transition: background 0.2s; /* Add transition effects */
                -webkit-tap-highlight-color: transparent;
            }

            /* Style the search box inside the navigation bar */
            #search-input {
                flex-grow: 1; /* Allow the input to grow and take available space */
                padding-left: 0.5rem;;
                border: 1px solid #c7baa7; /* Adjust the border color as needed */
                border-radius: 6px;
                height: 2.5rem;
                margin-right: 1rem;
                width: 100%;
                font-family: "Poppins", sans-serif;
                font-weight: 300;
                font-style: normal;
                font-size: 17px;
            }

            #search-input:focus {
                outline-color: #a6a6a6; /* Adjust the border color as needed */
            }

            #close {
                width: 35px;
                height: 35px;
                display: flex;
                flex-shrink: 0; /* Prevent the button from shrinking */
                border: 1px solid hsl(31, 30%, 48%); /* Adjust the border color as needed */
                border-radius: 50%;
                background-color: hsl(31, 30%, 48%);
                cursor: pointer;
                font-family: "Gruppo", sans-serif;
                font-size: 35px;
                color: white;
                align-items: center;
                justify-content: center;
                transition: background 0.2s; /* Add transition effects */
                -webkit-tap-highlight-color: transparent;
            }

                .cross {
                    padding-bottom: 5px;
                }

        .spacer-1 {
            height: 20px;
        }

        .scales-list {
            overflow-y: scroll;
            background: white;
            height: 100%;
            max-height: 800px;
            margin-right: 9px;
        }

        @media (hover: none) {
            .scales-list {
                max-height: 60vh;
            }    
        }

        /* For WebKit browsers (Chrome, Safari, etc.) */
        .scales-list::-webkit-scrollbar {
            width: 15px; /* Set the width of the scrollbar */;
        }

        .scales-list::-webkit-scrollbar-track {
            background: rgb(221, 221, 221); /* Set the background color of the scrollbar track */
            border-radius: 10px;
        }

        .scales-list::-webkit-scrollbar-thumb {
            background-color: hsl(31, 30%, 48%); /* Set the color of the scrollbar thumb */
            border-radius: 10px; /* Make the scrollbar thumb rounded */
            border: 3px solid rgb(221, 221, 221); /* Adds a border around the scrollbar thumb */
        }

        @-moz-document url-prefix() {
            .scales-list {
            /* Firefox scrollbar styling */
            scrollbar-width: auto;
            scrollbar-color: hsl(31, 30%, 48%) rgb(221, 221, 221);
            }
        }

            .scale-ui-button {
                display: flex;
                flex-direction: column;
                margin-right: 1rem;
                margin-bottom: 1rem;
                border: none;
                text-align: left;
                border-bottom: 1px solid #c7baa7;
                transition: background 0.2s; /* Add transition effects */
                cursor: pointer;
            }

            .scale-ui-button:hover {
                background: #efe8dd; /* Change color on hover */
            }

                .h1 {
                    margin: 0;
                    color: rgb(32, 52, 80);
                    font-family: "Poppins", sans-serif;
                    font-weight: 300;
                    font-style: normal;
                    font-size: min(4vw, 23px);  /* Change the font size */
                    -webkit-user-select: none;
                    user-select: none;
                }

                .h2 {
                    margin: 0;
                    margin-bottom: 1rem;
                    color: hsl(31, 30%, 48%);
                    font-family: "Poppins", sans-serif;
                    font-weight: 500;
                    font-style: normal;
                    font-size: min(3vw, 16px);  /* Change the font size */
                    -webkit-user-select: none;
                    user-select: none;
                }

                
    .intro-info {
        padding-top: min(4vw, 4vh);
        padding-bottom: min(1.5vh, 1rem);
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center the text horizontally */
        align-items: left;
    }
        .scale-title {
            color: rgb(34, 52, 70);
            font-family: "Poppins", sans-serif;
            font-weight: 300;
            font-style: normal;
            font-size: min(4vw, 25px);  /* Change the font size */
            text-align: left;
        }
        .scale-notes {
            color: hsl(31, 30%, 48%);
            font-family: "Poppins", sans-serif;
            font-weight: 500;
            font-style: normal;
            font-size: min(2.75vw, 16px);  /* Change the font size */
            text-align: left;
            margin-bottom: min(1vw, 0.5rem);
            height: 2.25rem;
        }

        @media (max-width: 600px) {
            .scale-notes {
                height: 1.25rem;
            }
        }

        .intro-text {
            display: none;
            align-items: center;
            font-family: "Poppins", sans-serif;
            font-style: normal;
            font-size: min(3vw, 18px);  /* Change the font size */
            font-weight: 300;
            text-align: justify;
            word-wrap: break-word; /* Wrap long words onto the next line */
            margin-top: 1rem;
        }


.buttons {
    position: relative;
    display: flex;
    margin-top: min(1vw, 0.75rem);
    margin-bottom: min(1vw, 0.75rem);
    justify-content: center; /* Center the text horizontally */
    align-items: center;
    z-index: 1;
}

    .play-text {
        color: rgb(34, 52, 70);
        align-items: center;
        font-family: "Poppins", sans-serif;
        font-style: normal;
        font-size: min(3.5vw, 20px);  /* Change the font size */
        font-weight: 300;
        text-align: justify;
        margin-right: 0.5rem;
        flex-shrink: 0;
    }

    /* Adjust spacer width for smaller screens */
    @media (max-width: 600px) {
        .play-text {
            margin-right: 0.35rem;
        }
    }


    #play-button {
        display: inline-block;
        width: 100%;
        max-width: min(5vw, 30px);
        max-height: 30px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        background-color: transparent;
        transition: background 0.2s; /* Add transition effects */
        overflow: hidden;
        aspect-ratio: 1/1;
        -webkit-tap-highlight-color: transparent;
    }

        #play-button .play-image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image covers the entire button */
            border-radius: 50%; /* Ensure the image is also circular */
            pointer-events: none; /* Allows hover only on the button, not the image */
        }

    #play-button:hover {
        background: #f1e3d0; /* Change gradient on hover */
    }

    #play-button:active {
        background: #C7B299;
    }

    #play-button-custom {
        display: inline-block;
        width: 100%;
        max-width: min(5vw, 30px);
        max-height: 30px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        background-color: transparent;
        transition: background 0.2s; /* Add transition effects */
        overflow: hidden;
        aspect-ratio: 1/1;
        -webkit-tap-highlight-color: transparent;
    }

        #play-button-custom .play-image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image covers the entire button */
            border-radius: 50%; /* Ensure the image is also circular */
            pointer-events: none; /* Allows hover only on the button, not the image */
        }

    #play-button-custom:hover {
        background: #f1e3d0; /* Change gradient on hover */
    }

    #play-button-custom:active {
        background: #C7B299;
    }

    #pause-button {
        display: none;
        width: 100%;
        max-width: min(5vw, 30px);
        max-height: 30px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        background-color: transparent;
        transition: background 0.2s; /* Add transition effects */
        overflow: hidden;
        aspect-ratio: 1/1;
        -webkit-tap-highlight-color: transparent;
    }

        #pause-button .pause-image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image covers the entire button */
            border-radius: 50%; /* Ensure the image is also circular */
            pointer-events: none; /* Allows hover only on the button, not the image */
        }

    #pause-button:hover {
        background: #f1e3d0; /* Change gradient on hover */
    }

    #pause-button:active {
        background: #C7B299;
    }

    #pause-button-custom {
        display: none;
        width: 100%;
        max-width: min(5vw, 30px);
        max-height: 30px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        background-color: transparent;
        transition: background 0.2s; /* Add transition effects */
        overflow: hidden;
        aspect-ratio: 1/1;
        -webkit-tap-highlight-color: transparent;
    }

        #pause-button-custom .pause-image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image covers the entire button */
            border-radius: 50%; /* Ensure the image is also circular */
            pointer-events: none; /* Allows hover only on the button, not the image */
        }

    #pause-button-custom:hover {
        background: #f1e3d0; /* Change gradient on hover */
    }

    #pause-button-custom:active {
        background: #C7B299;
    }

    .spacer-2 {
        max-width: 8rem;
        flex-grow: 1;
    }

    /* Adjust spacer width for smaller screens */
    @media (max-width: 600px) {
        .spacer-2 {
            max-width: 3rem;
            flex-grow: 1;
        }
    }
    

    .reset-text {
        color: rgb(34, 52, 70);
        align-items: center;
        font-family: "Poppins", sans-serif;
        font-style: normal;
        font-size: min(3.5vw, 20px);  /* Change the font size */
        font-weight: 300;
        text-align: justify;
        margin-right: 0.5rem;
        flex-shrink: 0;
    }

    /* Adjust spacer width for smaller screens */
    @media (max-width: 600px) {
        .reset-text {
            margin-right: 0.35rem;
            margin-left: 0.35rem; /* Reduce for smaller screens */
        }
    }

    #reset-button {
        display: inline-block;
        width: 100%;
        max-width: min(5vw, 30px);
        max-height: 30px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        background-color: transparent;
        transition: background 0.2s; /* Add transition effects */
        overflow: hidden;
        aspect-ratio: 1/1;
        -webkit-tap-highlight-color: transparent;
    }

        #reset-button .reset-image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image covers the entire button */
            border-radius: 50%; /* Ensure the image is also circular */
            pointer-events: none; /* Allows hover only on the button, not the image */
        }

    #reset-button:hover {
        background: #f1e3d0; /* Change gradient on hover */
        transform: scale(1);
    }

    #reset-button-custom {
        display: inline-block;
        width: 100%;
        max-width: min(5vw, 30px);
        max-height: 30px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        background-color: transparent;
        transition: background 0.2s; /* Add transition effects */
        overflow: hidden;
        aspect-ratio: 1/1;
        -webkit-tap-highlight-color: transparent;
    }

        #reset-button-custom .reset-image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image covers the entire button */
            border-radius: 50%; /* Ensure the image is also circular */
            pointer-events: none; /* Allows hover only on the button, not the image */
        }

    #reset-button-custom:hover {
        background: #f1e3d0; /* Change gradient on hover */
        transform: scale(1);
    }

    #transpose-down {
        display: inline-block;
        width: 100%;
        max-width: min(5vw, 30px);
        max-height: 30px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        background-color: transparent;
        transition: background 0.2s; /* Add transition effects */
        overflow: hidden;
        aspect-ratio: 1/1;
        -webkit-tap-highlight-color: transparent;
    }

        #transpose-down .down-image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image covers the entire button */
            border-radius: 50%; /* Ensure the image is also circular */
            pointer-events: none; /* Allows hover only on the button, not the image */
        }

    #transpose-down:hover {
        background: #f1e3d0; /* Change gradient on hover */
        transform: scale(1);
    }
    
    #transpose-down:active {
        background: #C7B299;
        transform: scale(1);
    }

    #transpose-down-custom {
        display: inline-block;
        width: 100%;
        max-width: min(5vw, 30px);
        max-height: 30px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        background-color: transparent;
        transition: background 0.2s; /* Add transition effects */
        overflow: hidden;
        aspect-ratio: 1/1;
        -webkit-tap-highlight-color: transparent;
    }

        #transpose-down-custom .down-image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image covers the entire button */
            border-radius: 50%; /* Ensure the image is also circular */
            pointer-events: none; /* Allows hover only on the button, not the image */
        }

    #transpose-down-custom:hover {
        background: #f1e3d0; /* Change gradient on hover */
        transform: scale(1);
    }
    
    #transpose-down-custom:active {
        background: #C7B299;
        transform: scale(1);
    }

    .transpose-text {
        color: rgb(34, 52, 70);
        align-items: center;
        font-family: "Poppins", sans-serif;
        font-style: normal;
        font-size: min(3.5vw, 20px);  /* Change the font size */
        font-weight: 300;
        text-align: justify;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }
    /* Adjust spacer width for smaller screens */
    @media (max-width: 600px) {
        .transpose-text {
            margin-right: 0.35rem;
            margin-left: 0.35rem; /* Reduce for smaller screens */
        }
    }

    #transpose-up {
        display: inline-block;
        width: 100%;
        max-width: min(5vw, 30px);
        max-height: 30px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        background-color: transparent;
        transition: background 0.2s; /* Add transition effects */
        overflow: hidden;
        aspect-ratio: 1/1;
        -webkit-tap-highlight-color: transparent;
    }

        #transpose-up .up-image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image covers the entire button */
            border-radius: 50%; /* Ensure the image is also circular */
            pointer-events: none; /* Allows hover only on the button, not the image */
        }

    #transpose-up:hover {
        background: #f1e3d0; /* Change gradient on hover */
        transform: scale(1);
    }
    
    #transpose-up:active {
        background: #C7B299;
        transform: scale(1);
    }

    #transpose-up-custom {
        display: inline-block;
        width: 100%;
        max-width: min(5vw, 30px);
        max-height: 30px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        background-color: transparent;
        transition: background 0.2s; /* Add transition effects */
        overflow: hidden;
        aspect-ratio: 1/1;
        -webkit-tap-highlight-color: transparent;
    }

        #transpose-up-custom .up-image {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the image covers the entire button */
            border-radius: 50%; /* Ensure the image is also circular */
            pointer-events: none; /* Allows hover only on the button, not the image */
        }

    #transpose-up-custom:hover {
        background: #f1e3d0; /* Change gradient on hover */
        transform: scale(1);
    }
    
    #transpose-up-custom:active {
        background: #C7B299;
        transform: scale(1);
    }

.virtual-handpan-container {
    position: relative;
    width: min(115%, 97vw);
    max-width: 800px;
    left: 50%;
    transform: translateX(-50%);
}

.handpan-container {
    display: none;
    transition: background 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
}

.handpan-container.active {
    background:  transparent;
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    overflow: visible;
    -webkit-user-select: none;
    user-select: none;
    /* margin-top: 10px;
    margin-bottom: 10px; */
}

.custom-parent {
    display: none;
}

.virtual-custom-handpan-container {
    position: relative;
    height: auto;
    width: min(115%, 97vw);
    max-width: 800px;
    left: 50%;
    transform: translateX(-50%);
}

.note-container {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto;
    left: 0;
    right: 0;
    bottom: 0;
}

.note {
    position: absolute;
    width: 100%;
    max-width: 800px;
    /* Depending on the size of the note */
}

.large-1, .large-2, .large-3, .large-4, .large-5, .large-6, .large-7, .large-8, .large-9 {
    bottom: 0px;
}

.medium-1, .medium-2, .medium-3, .medium-4, .medium-5, .medium-6, .medium-7, .medium-8, .medium-9 {
    bottom: 0px;
}

.small-1, .small-2, .small-3, .small-4, .small-5, .small-6, .small-7, .small-8, .small-9 {
    bottom: 0px;
}

.xsmall-1, .xsmall-2, .xsmall-3, .xsmall-4, .xsmall-5, .xsmall-6, .xsmall-7, .xsmall-8, .xsmall-9 {
    bottom: 0px;
}

.xsmallelliptical-1, .xsmallelliptical-2, .xsmallelliptical-3, .xsmallelliptical-4, .xsmallelliptical-5, .xsmallelliptical-6, .xsmallelliptical-7, .xsmallelliptical-8, .xsmallelliptical-9 {
    bottom: 0px;
}


.svg-paths-bottom {
    /* background-color: red;
    opacity: 20%; */
    position: absolute;
    width: 100%;
    height: auto;
    display: block;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: visible;
    -webkit-user-select: none;
    user-select: none;
}

.user-choice {
    position: relative;
    height: auto;
    display: none;
    flex-direction: column;
    width: min(115%, 97vw);
    max-width: 800px;
    left: 50%;
    transform: translateX(-50%);
}

.user-choice-text {
    align-items: center;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: min(3vw, 18px);  /* Change the font size */
    font-weight: 300;
    text-align: center;
    word-wrap: break-word; /* Wrap long words onto the next line */
    margin-top: min(1vw, 1rem);
}

.user-choice-img {
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    left: 0;
    right: 0;
    bottom: 0;
}

.position-buttons {
    position: relative;
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 800px;
    margin-top: min(1vw, 0.75rem);
    margin-bottom: min(1vw, 0.75rem);
    justify-content: center; /* Center the text horizontally */
    align-items: center;
}



.btn3 {
    padding: 2px;
    width: min(7vw, 40px);
    aspect-ratio: 1/1;
    color: hsl(31, 30%, 48%);
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: min(3.5vw, 20px);  /* Change the font size */
    background-color: transparent;
    border: 1.5px solid rgb(32, 52, 80);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.btn3:hover {
    background: #f1e3d0;
}

.position-polygon {
    fill: transparent; /* Make the polygon transparent */
    stroke: transparent; /* Initially hide the stroke */
    stroke-width: 1.5px;
    transition: stroke 0.2s, filter 0.2s; /* Add transition effects */
    cursor: pointer;
    z-index: 3;
}

.position-polygon:hover {
    stroke: rgb(255, 208, 0); /* Set the stroke color to orange on hover */
    filter: drop-shadow(0 0 5px magenta) drop-shadow(0 0 5px orange) drop-shadow(0 0 5px rgb(247, 171, 117))  drop-shadow(0 0 2px rgb(227, 119, 105)); /* Add a glow effect */
    overflow: visible;
}

.position-polygon.used {
    stroke: white;
    stroke-width: 3px;
    fill: white;
    pointer-events: none;
}

.handpan-background {
    width: 100%; /* Occupy full width of parent container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it's treated as a block element */
    pointer-events: none;
}


hr.solid-divider {
    border: 1px solid #c7baa7;
    width: 100%;
    margin-bottom: min(2vw, 15px);
}

.svg-paths {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: visible;
    -webkit-user-select: none;
    user-select: none;
}

.svg-note {
    /* Apply CSS styles here */
    fill: white; /* Change the text color to black */
    filter: drop-shadow(0 1.25px 1.25px black);
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 23px; /* Change the font size */
    -webkit-user-select: none;
    user-select: none;
    /* Add more styles as needed */
}

.svg-number {
    /* Apply CSS styles here */
    fill: white; /* Change the text color to black */
    filter: drop-shadow(0 1px 1px black);
    font-family: "Poppins", sans-serif;
    font-weight: 350;
    font-style: normal;
    font-size: 15px; /* Change the font size */
    -webkit-user-select: none;
    user-select: none;
    /* Add more styles as needed */
}

.svg-number-bottom {
    /* Apply CSS styles here */
    fill: black; /* Change the text color to black */
    filter: drop-shadow(0 1.25px 1.25px white);
    stroke: white;
    stroke-width: 1.75px;
    paint-order: stroke fill;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 15px; /* Change the font size */
    -webkit-user-select: none;
    user-select: none;
    /* Add more styles as needed */
}

@media (max-width: 600px) {
    .svg-number, .svg-number-bottom {
        font-size: 18px; /* Change the font size */
    }
}

@-moz-document url-prefix() {
    .svg-paths text {
        transform: translateY(0.4rem); /* Adjust only in Firefox */
    }
}

.handpan-polygon-tac {
    fill: transparent; /* Make the polygon transparent */
    stroke: transparent; /* Initially hide the stroke */
    stroke-width: 1.5px;
    transition: stroke 0.2s, filter 0.2s; /* Add transition effects */
    z-index: 2;
}

.handpan-polygon {
    fill: transparent; /* Make the polygon transparent */
    stroke: transparent; /* Initially hide the stroke */
    stroke-width: 1.5px;
    transition: stroke 0.2s, filter 0.2s; /* Add transition effects */
    z-index: 3;
}

.handpan-polygon:hover {
    stroke: rgb(255, 208, 0); /* Set the stroke color to orange on hover */
    -webkit-filter: drop-shadow(0 0 5px magenta); /* Fallback for Safari */
    filter: drop-shadow(0 0 5px magenta) drop-shadow(0 0 5px orange) drop-shadow(0 0 5px rgb(247, 171, 117)) drop-shadow(0 0 2px rgb(227, 119, 105));
    overflow: visible;
}

.polygon-active {
    stroke: rgb(255, 208, 0) !important;
    filter: drop-shadow(0 0 5px magenta) drop-shadow(0 0 5px orange) drop-shadow(0 0 5px rgb(247, 197, 117)) drop-shadow(0 0 2px rgb(227, 119, 105)) !important;
}

.pricing {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the text horizontally */
    align-items: left;
    margin-top: min(2.5vw, 1.5rem);
}

.custom-pricing {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the text horizontally */
    align-items: left;
    /* margin-top: min(2.5vw, 1.5rem); */
}

.price-text {
    display: block;
    align-items: center;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: min(3vw, 18px);  /* Change the font size */
    font-weight: 300;
    text-align: justify;
    word-wrap: break-word; /* Wrap long words onto the next line */
}

.disclaimer {
    display: block;
    align-items: center;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: min(2.5vw, 14px);  /* Change the font size */
    font-weight: 300;
    text-align: justify;
    margin-bottom: min(2vw, 15px);
    word-wrap: break-word; /* Wrap long words onto the next line */
}

.share {
    position: relative;
    display: flex;
    margin-top: min(1vw, 0.75rem);
    margin-bottom: min(1vw, 0.75rem);
    justify-content: center; /* Center the text horizontally */
    align-items: center;
}

    .share-text {
        color: rgb(34, 52, 70);
        align-items: center;
        font-family: "Poppins", sans-serif;
        font-style: normal;
        font-size: min(3.5vw, 20px);  /* Change the font size */
        font-weight: 300;
        text-align: justify;
        margin-right: min(1vw, 1vh);
        flex-shrink: 0;
    }

    #share-button {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        max-width: min(5vw, 30px);
        max-height: 30px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        background-color: transparent;
        transition: background 0.2s; /* Add transition effects */
        overflow: hidden;
        aspect-ratio: 1/1;
        -webkit-tap-highlight-color: transparent;
    }
    
    #share-button img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the image covers the entire button */
        border-radius: 50%; /* Ensure the image is also circular */
        pointer-events: none; /* Allows hover only on the button, not the image */
    }
    
    #share-button:hover {
        background: #f1e3d0; /* Change gradient on hover */
        transform: scale(1);
    }
    
    #share-button:active {
        background: #C7B299;
        transform: scale(1);
    }

    #share-button-custom {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        max-width: min(5vw, 30px);
        max-height: 30px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        background-color: transparent;
        transition: background 0.2s; /* Add transition effects */
        overflow: hidden;
        aspect-ratio: 1/1;
        -webkit-tap-highlight-color: transparent;
    }
    
    #share-button-custom img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the image covers the entire button */
        border-radius: 50%; /* Ensure the image is also circular */
        pointer-events: none; /* Allows hover only on the button, not the image */
    }
    
    #share-button-custom:hover {
        background: #f1e3d0; /* Change gradient on hover */
        transform: scale(1);
    }
    
    #share-button-custom:active {
        background: #C7B299;
        transform: scale(1);
    }
    

.back {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: min(1.5vw, 0.75rem);
    margin-bottom: min(0.6vw, 0.3rem);
    justify-content: left; /* Center the text horizontally */
    align-items: left;
    width: 100%;
}

.back-icon-text {
    position: relative;
    display: flex;
    padding-bottom: 5px;;
    justify-content: left; /* Center the text horizontally */
    align-items: center;
    width: 100%;
}

#back-button {
    display: inline-block;
    width: 100%;
    max-width: min(5vw, 30px);
    max-height: 30px;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: transparent;
    transition: background 0.2s; /* Add transition effects */
    overflow: hidden;
    aspect-ratio: 1/1;
    -webkit-tap-highlight-color: transparent;
}

#back-button img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire button */
    border-radius: 50%; /* Ensure the image is also circular */
    pointer-events: none; /* Allows hover only on the button, not the image */
}

#back-button:hover {
    background: #f1e3d0; /* Change gradient on hover */
    transform: scale(1);
}

#back-button:active {
    background: #C7B299;
    transform: scale(1);
}


.back-text {
    display: inline-block;
    color: rgb(34, 52, 70);
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: min(3.5vw, 20px);  /* Change the font size */
    font-weight: 300;
    margin-left: 0.5rem;
}

/* Adjust spacer width for smaller screens */
@media (max-width: 600px) {
    .back-text {
        margin-left: 0.35rem; /* Reduce for smaller screens */
    }
}

.choose-text {
    /* display: inline-block; */
    display: none;
    vertical-align: middle;
    color: rgb(34, 52, 70);
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: min(3.5vw, 20px);  /* Change the font size */
    font-weight: 300;
    margin-left: 0.5rem;
}

/* Adjust spacer width for smaller screens */
@media (max-width: 600px) {
    .choose-text {
        margin-left: 0.35rem; /* Reduce for smaller screens */
    }
}

.custom-dropdown {
    position: relative;
    display: none;
    justify-content: center; /* Center the text horizontally */
    align-items: center;
}


.dropdown {
    margin: 0;
    background: white;
    color: rgb(32, 52, 80);
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: min(4vw, 20px);  /* Change the font size */
    text-align: left;
    border: 1.5px solid rgb(32, 52, 80); /* Adjust the border color as needed */
    border-radius: 5px;
    width: 100%;
    height: 40px;
    transition: background 0.2s; /* Add transition effects */
    cursor: pointer;
    box-sizing: border-box;
    padding: 0 min(1.5vh, 2vw);
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Adjust spacer width for smaller screens */
@media (max-width: 600px) {
    .dropdown {
        height: 35px; /* Reduce the spacer width for smaller screens */
    }
}

.custom-arrow {
    position: absolute;
    right: 0;
    display: block;
    background: hsl(31, 30%, 48%);
    height: 100%;
    aspect-ratio: 1/1;
    pointer-events: none;
    box-sizing: border-box; 
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-right: 1.5px solid rgb(32, 52, 80);
    border-top: 1.5px solid rgb(32, 52, 80);
    border-bottom: 1.5px solid rgb(32, 52, 80);
}

.custom-arrow img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire button */
    border-radius: 50%; /* Ensure the image is also circular */
    pointer-events: none; /* Allows hover only on the button, not the image */
}

.hide {
    position: relative;
    display: flex;
    margin-top: min(1.5vw, 0.75rem);
    margin-bottom: min(1.5vw, 0.75rem);
    height: min(8vw, 40px);
    max-height: 40px;
    text-align: center;
    justify-content: center;
    padding-top: 5px;
}

#hide-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: rgb(32, 52, 80);
    text-align: center;
    border: 1.5px solid rgb(32, 52, 80); /* Adjust the border color as needed */
    border-radius: 5px;
    width: 100%;
    max-width: 800px;
    height: 100%;
    aspect-ratio: 1/1;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}

#hide-expand:hover {
    background: #f1e3d0;
}

#hide-expand:active {
    background: #C7B299;
}

#hide-expand img {
    width: auto;
    height: auto;
    max-width: 30px;
    max-height: 30px;
    object-fit: cover;
    transition: transform 0.3s ease; /* Smooth rotation */
    border-radius: 50%; /* Ensure the image is also circular */
    pointer-events: none; /* Allows hover only on the button, not the image */
}

.hide-expand-img.hidden {
    transform: rotate(180deg); /* Rotate on hover */
}

.note-toggle {
    position: relative;
    display: flex;
    margin-top: min(1.5vw, 0.75rem);
    margin-bottom: min(1.5vw, 0.75rem);
    height: 40px;
    text-align: center;
    justify-content: center;
    padding-top: 5px;
}

/* Adjust spacer width for smaller screens */
@media (max-width: 600px) {
    .note-toggle {
        height: 35px; /* Reduce the spacer width for smaller screens */
    }
}

.spacer-3 {
    max-width: 8rem;
    min-width: 1rem;
    flex-grow: 1;
}

.top-notes {
    background: white;
    color: rgb(32, 52, 80);
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: min(4vw, 20px);  /* Change the font size */
    text-align: center;
    border: 1.5px solid rgb(32, 52, 80); /* Adjust the border color as needed */
    border-radius: 5px;
    width: 100%;
    height: 100%;
    transition: background 0.2s;
}

.top-notes:hover {
    background: #f1e3d0;
}

/* .top-notes:focus {
    background: rgb(32, 52, 80);
    color: white;
} */

.bottom-notes {
    background: white;
    color: rgb(32, 52, 80);
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: min(4vw, 20px);  /* Change the font size */
    text-align: center;
    border: 1.5px solid rgb(32, 52, 80); /* Adjust the border color as needed */
    border-radius: 5px;
    width: 100%;
    height: 100%;
    transition: background 0.2s;
}

.bottom-notes:hover {
    background: #f1e3d0;
}

/* .bottom-notes:focus {
    background: rgb(32, 52, 80);
    color: white;
} */

.note-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); /* Responsive grid */
    gap: min(1.5vw, 10px);
    padding-bottom: min(1.5vh, 1rem);
    width: 100%;
    margin: 0 auto;
    padding-top: 5px;
}

/* Media query for mobile devices */
@media (max-width: 600px) {
    .note-buttons {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Increase min size */
        gap: 2vw;
    }
}

.btn2 {
    padding: 2px;
    color: hsl(31, 30%, 48%);
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: min(2.8vw, 16px);  /* Change the font size */
    background-color: transparent;
    border: 1.5px solid rgb(32, 52, 80);
    border-radius: 5px;
    cursor: pointer;
    transition: stroke 0.2s, filter 0.2s; /* Add transition effects */
    -webkit-tap-highlight-color: transparent;
}

.btn2:disabled {
    background: rgb(227, 227, 227);
    color: rgb(159, 159, 159);
}

.btn2.active1 {
    background: rgb(32, 52, 80);
    color: white;
}

.btn2.active1:disabled {
    background: rgb(54, 64, 78);
    color: rgb(159, 159, 159);
}

.btn2.active2 {
    background: hsl(31, 30%, 48%);
    color: white;
}

.btn2.active2:disabled {
    background: hsl(30, 14%, 54%);
    color: rgb(159, 159, 159);
}

/* .note-buttons button:focus {
    background: rgb(32, 52, 80);
    color: white;
} */


.top-notes.active {
    background: rgb(32, 52, 80);
    color: white;
}

.bottom-notes.active {
    background: hsl(31, 30%, 48%);
    color: white;
}

/* Adjust grid on smaller screens */
@media (max-width: 600px) {
    .note-buttons {
        grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); /* Adjust button size on mobile */
    }

    .note-buttons button {
        height: 1.75rem;
    }
}

.custom-info {
    padding-bottom: min(1.75vh, 1rem);
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the text horizontally */
    align-items: left;
}
    .custom-note-title {
        color: rgb(34, 52, 70);
        font-family: "Poppins", sans-serif;
        font-weight: 300;
        font-style: normal;
        font-size: min(4vw, 25px);  /* Change the font size */
        text-align: left;
    }
    .custom-notes {
        color: hsl(31, 30%, 48%);
        font-family: "Poppins", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: min(2.75vw, 16px);  /* Change the font size */
        text-align: left;
        height: 2.25rem;
    }

    @media (max-width: 600px) {
        .custom-notes {
            height: 1.25rem;
        }
    }

    .percussion {
        position: relative;
        display: flex;
        /* margin-top: min(0.5vw, 0.25rem); */
        margin-bottom: min(1.5vw, 0.75rem);
        justify-content: center; /* Center the text horizontally */
        align-items: center;
    }
        #slap-button {
            display: inline-block;
            width: 100%;
            max-width: min(8vw, 45px);
            max-height: 45px;
            min-width: 30px;
            min-height: 30px;
            padding: 0;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            background-color: transparent;
            transition: background 0.2s; /* Add transition effects */
            overflow: hidden;
            aspect-ratio: 1/1;
            -webkit-tap-highlight-color: transparent;
        }
    
            #slap-button .hand-image {
                width: 100%;
                height: 100%;
                object-fit: cover; /* Ensures the image covers the entire button */
                border-radius: 50%; /* Ensure the image is also circular */
                pointer-events: none; /* Allows hover only on the button, not the image */
            }
    
        #slap-button:hover {
            background: #f1e3d0; /* Change gradient on hover */
        }
    
        #slap-button:active {
            background: #C7B299;
        }
    
        .spacer-4 {
            max-width: 1rem;
            flex-grow: 1;
        }
    
        #knuckle-button {
            display: inline-block;
            width: 100%;
            max-width: min(8vw, 45px);
            max-height: 45px;
            min-width: 30px;
            min-height: 30px;
            padding: 0;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            background-color: transparent;
            transition: background 0.2s; /* Add transition effects */
            overflow: hidden;
            aspect-ratio: 1/1;
            -webkit-tap-highlight-color: transparent;
        }
    
            #knuckle-button .knuckle-image {
                width: 100%;
                height: 100%;
                object-fit: cover; /* Ensures the image covers the entire button */
                border-radius: 50%; /* Ensure the image is also circular */
                pointer-events: none; /* Allows hover only on the button, not the image */
            }
    
        #knuckle-button:hover {
            background: #f1e3d0; /* Change gradient on hover */
        }
    
        #knuckle-button:active {
            background: #C7B299;
        }

        
.instructions-section {
    position: relative;
    display: block;
    height: auto;
    width: 100%;
    max-width: 800px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2rem;
}

.instructions-title {
    display: block;
    align-items: center;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: min(4vw, 20px);  /* Change the font size */
    font-weight: 600;
    color: rgb(34, 52, 70);
    text-align: justify;
    word-wrap: break-word; /* Wrap long words onto the next line */
}

.instructions-subtitle {
    display: block;
    align-items: center;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: min(3vw, 16px);  /* Change the font size */
    font-weight: 500;
    text-decoration-line: underline;
    color: rgb(34, 52, 70);
    text-align: justify;
    word-wrap: break-word; /* Wrap long words onto the next line */
}

.instructions-section p {
    display: block;
    align-items: center;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: min(2.75vw, 14px);  /* Change the font size */
    font-weight: 300;
    color: rgb(34, 52, 70);
    text-align: justify;
    word-wrap: break-word; /* Wrap long words onto the next line */
}

.instructions-section ul {
    display: block;
    align-items: center;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: min(2.75vw, 14px);  /* Change the font size */
    font-weight: 300;
    color: rgb(34, 52, 70);
    line-height: 2;
    text-align: justify;
    word-wrap: break-word; /* Wrap long words onto the next line */
}

.instructions-section ol {
    display: block;
    align-items: center;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: min(2.75vw, 14px);  /* Change the font size */
    font-weight: 300;
    color: rgb(34, 52, 70);
    line-height: 2;
    text-align: justify;
    word-wrap: break-word; /* Wrap long words onto the next line */
}

.instructions-section li {
    margin-bottom: 10px; /* Adjust this value for the gap you want */
    line-height: 1.5; /* Line height only affects the text inside each <li> */
}
.instructions-section li:last-child {
    margin-bottom: 0; /* Remove the bottom margin for the last item */
}        

a[href^="mailto:"] {
    color: blue;
    text-decoration: underline;
  }

.share-container {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed in place */
    z-index: 1000; /* Sit on top of other content */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Center it */
    width: 80%; /* Adjust size as needed */
    max-width: 600px; /* Max width */
    background-color: white; /* White background */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    border-radius: 10px; /* Rounded corners */
    border: 4px solid #C7B299;
    padding: 20px; /* Add padding around content */
}

@media (hover: none) {
    .share-container {
        max-width: 85vw;
    }
}

.share-container-custom {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed in place */
    z-index: 1000; /* Sit on top of other content */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Center it */
    width: 80%; /* Adjust size as needed */
    max-width: 600px; /* Max width */
    background-color: white; /* White background */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    border-radius: 10px; /* Rounded corners */
    border: 4px solid #C7B299;
    padding: 20px; /* Add padding around content */
}

@media (hover: none) {
    .share-container-custom {
        max-width: 85vw;
    }
}

.share-box {
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: center;
    width: 100%;
    gap: 15px; /* Add space between elements */
}

.share-link-text {
    display: block;
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: min(3.5vw, 16px);  /* Change the font size */
    font-weight: 400;
    color: rgb(34, 52, 70);
    text-align: justify;
    word-wrap: break-word; /* Wrap long words onto the next line */
}

#share-link {
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: 16px;
    color: #333;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box; /* Include padding in width calculation */
    text-align: center; /* Center text in the input */
    cursor: default; /* Indicate it's not editable */
}

#share-link-custom {
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: 16px;
    color: #333;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box; /* Include padding in width calculation */
    text-align: center; /* Center text in the input */
    cursor: default; /* Indicate it's not editable */
}

/* .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    font-weight: bold;
    color: rgb(34, 52, 70);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
} */

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    color: rgb(34, 52, 70);
    font-size: 25px; /* Adjust font size */
    font-family: "Gruppo", sans-serif;
    font-weight: bold;
    border: none;
    display: flex; /* Flexbox for centering */
    flex-shrink: 0; /* Prevent the button from shrinking */
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
    line-height: 1; /* Prevents text from being pushed off-center */
    padding: 0; /* Removes any browser default padding */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.close-btn-custom {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    color: rgb(34, 52, 70);
    font-size: 25px; /* Adjust font size */
    font-family: "Gruppo", sans-serif;
    font-weight: bold;
    border: none;
    display: flex; /* Flexbox for centering */
    flex-shrink: 0; /* Prevent the button from shrinking */
    justify-content: center; /* Horizontally center content */
    align-items: center; /* Vertically center content */
    line-height: 1; /* Prevents text from being pushed off-center */
    padding: 0; /* Removes any browser default padding */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#copy-btn {
    display: block;
    background: transparent;
    color: rgb(32, 52, 80);
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: min(3vw, 16px);  /* Change the font size */
    text-align: center;
    border: 1.5px solid rgb(32, 52, 80); /* Adjust the border color as needed */
    border-radius: 5px;
    width: 100%;
    height: 40px;
    margin-bottom: min(1.5vw, 0.75rem);
    transition: background 0.2s; /* Add transition effects */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#copy-btn:hover {
    background: #f1e3d0;
}

#copy-btn:active {
    background: #C7B299;
}

/* Adjust spacer width for smaller screens */
@media (max-width: 600px) {
    #copy-btn {
        height: 35px; /* Reduce the spacer width for smaller screens */
    }
}

#copy-btn-custom {
    display: block;
    background: transparent;
    color: rgb(32, 52, 80);
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: min(3vw, 16px);  /* Change the font size */
    text-align: center;
    border: 1.5px solid rgb(32, 52, 80); /* Adjust the border color as needed */
    border-radius: 5px;
    width: 100%;
    height: 40px;
    margin-bottom: min(1.5vw, 0.75rem);
    transition: background 0.2s; /* Add transition effects */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#copy-btn-custom:hover {
    background: #f1e3d0;
}

#copy-btn-custom:active {
    background: #C7B299;
}

/* Adjust spacer width for smaller screens */
@media (max-width: 600px) {
    #copy-btn-custom {
        height: 35px; /* Reduce the spacer width for smaller screens */
    }
}

.handpan-position, .handpan-reverb {
    margin-top: min(1vw, 0.5rem);
    padding-bottom: min(1.75vh, 1rem);
    position: relative;
    display: flex;
    flex-direction: row;
    /* margin-top: min(0.6vw, 0.3rem); */
    /* margin-bottom: min(0.6vw, 0.3rem); */
    justify-content: left; /* Center the text horizontally */
    align-items: center;
    width: 100%;
}

.position-text, .reverb-text {
    display: inline-block;
    color: rgb(34, 52, 70);
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-size: min(3.25vw, 18px);  /* Change the font size */
    font-weight: 300;
    margin-left: 0.5rem;
}

.toggle-wrapper {
  font-size: clamp(14px, 3vw, 16px); /* This controls scaling */
  display: inline-block;
}

.position-toggle, .reverb-toggle, .reverb-toggle-custom {
    font-size: 1.1em; /* Root font for scaling */
    width: 3.75em;   /* 60px ÷ 16px = 3.75em */
    height: 1.875em; /* 30px ÷ 16px = 1.875em */
    background: #e0e0e0;
    border-radius: 3.75em;
    position: relative;
    display: inline-block;
    box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.1), inset 0px -2px 6px rgba(255,255,255,0.1);
    cursor: pointer;
    transition: 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.position-toggle:after {
    content: "1";
    position: absolute;
    align-content: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(255, 255, 255);
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.875em;
    width: 1.85em;
    height: 1.85em;
    top: 0.15em;
    left: 0.2em; 
    background: linear-gradient(180deg, #C7B299, #a38a6b);
    border-radius: 50%;
    /* box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2); */
    transition: 0.15s;
    pointer-events: none;
    line-height: 1;
    aspect-ratio: 1/1;
}

.reverb-toggle:after, .reverb-toggle-custom:after {
    content: "";
    position: absolute;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: rgb(255, 255, 255);
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.875em;
    width: 1.85em;
    height: 1.85em;
    top: 0.15em;
    left: 0.2em; 
    background: linear-gradient(180deg, #C7B299, #a38a6b);
    border-radius: 50%;
    /* box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2); */
    transition: 0.15s;
    pointer-events: none;
    line-height: 1;
    aspect-ratio: 1/1;
}

#position, #reverb, #reverb-custom {
    position: absolute;
    width: 0;
    height: 0;
    visibility: none;
}

#position:checked + .position-toggle, #reverb:checked + .reverb-toggle, #reverb-custom:checked + .reverb-toggle-custom {
    background: #C7B299;
}

#position:checked + .position-toggle:after {
    content: "2";
    align-content: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a38a6b;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.875em;
    left: 4.1em;
    transform: translateX(-100%);
    background: linear-gradient(180deg, #fbfbfb, #d9d9d9);
    aspect-ratio: 1/1;
}

#reverb:checked + .reverb-toggle:after, #reverb-custom:checked + .reverb-toggle-custom:after {
    content: "on";
    align-content: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a38a6b;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.875em;
    left: 4.1em;
    transform: translateX(-100%);
    background: linear-gradient(180deg, #fbfbfb, #d9d9d9);
    aspect-ratio: 1/1;
}

/* Adjust spacer width for smaller screens */
@media (max-width: 600px) {
    .position-text, .reverb-text {
        margin-left: 0.35rem; /* Reduce for smaller screens */
    }
}

@media (hover: none) {
    /* Remove hover effects on touch devices */
    #hide-expand:hover, #copy-btn:hover, #copy-btn-custom:hover, #slap-button:hover, #knuckle-button:hover, 
    #play-button:hover, #pause-button:hover, #reset-button:hover, #reset-button-custom:hover, #transpose-up:hover, 
    #transpose-down:hover, #play-button-custom:hover, #pause-button-custom:hover, #transpose-up-custom:hover, 
    #transpose-down-custom:hover, #share-button:hover, #share-button-custom:hover, #back-button:hover {
        /* Reset hover effects */
        background-color: initial; /* or your non-hover state */
        transition: none;
    }

    #hide-expand:active, #copy-btn:active, #copy-btn-custom:active, #slap-button:active, #knuckle-button:active, 
    #play-button:active, #pause-button:active, #reset-button:active, #reset-button-custom:active, #transpose-up:active, 
    #transpose-down:active, #play-button-custom:active, #pause-button-custom:active, #transpose-up-custom:active, 
    #transpose-down-custom:active, #share-button:active, #share-button-custom:active, #back-button:active {
        background-color: #C7B299; /* Change color when tapped */
        transition: background 0.1s ease-out; /* Smooth transition for the effect */
    }

    .dropdown {
        appearance: none;
    }
}