/* carousel */
    @import url('https://fonts.googleapis.com/css2?family=Bad+Script&display=swap');

    .bad-script-regular {
        font-family: "Bad Script", cursive;
        font-weight: 400;
        font-style: normal;
    }


    @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

    .montserrat {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Montserrat", sans-serif;
    }

    h1 {
        font-size: xx-large;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Bad Script", sans-serif;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 0 35px;
        background: #FFF;
    }

    .wrapper {
        max-width: 1100px;
        width: 100%;
        position: relative;
    }

    .wrapper i {
        height: 50px;
        width: 50px;
        background: #FFF;
        text-align: center;
        line-height: 50px;
        border-radius: 50%;
        cursor: pointer;
        position: absolute;
        top: 50%;
        font-size: 1.25rem;
        transform: translateY(-50%);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
    }

    .wrapper i:first-child {
        left: -22px;
    }

    .wrapper i:last-child {
        right: -22px;
    }

    .wrapper .carousel {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% / 3) - 12px);
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: 0;
    }

    .carousel::-webkit-scrollbar {
        display: none;
    }

    .carousel :where(.card, .img) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel.dragging {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }

    .carousel.dragging .card {
        cursor: grab;
        user-select: none;
    }

    .carousel .card {
        scroll-snap-align: start;
        height: 342px;
        list-style: none;
        background: #00000010;
        border-radius: 15px;
        display: flex;
        cursor: pointer;
        padding-bottom: 15px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .card .img img {
        width: 140px;
        height: 140px;
        object-fit: cover;
        border-radius: 10%;
    }

    .card span {
        color: #7e7e7e;
    }

    @media screen and (max-width: 900px) {
        .wrapper .carousel {
            grid-auto-columns: calc((100% / 2) - 9px);
        }
    }

    @media screen and (max-width: 600px) {
        .wrapper .carousel {
            grid-auto-columns: 100%;
        }
    }

    /* end of carousel */

    /* header */
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        align-items: center;
        padding: 0 20px;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    header a {
        display: flex;
        flex-direction: column;
        /* Stack items vertically */
        align-items: center;
        color: #94b4e5;
        /* Set the icon color */
        text-decoration: none;
        /* Remove underline from links */
        margin: 0 10px;
        /* Space between the icons */
    }

    header i {
        font-size: 24px;
        /* Adjust the size of the icons */
        margin-bottom: 10px;
        /* Space between the icon and text */
    }

    header span {
        font-size: 16px;
        /* Adjust text size as needed */
        font-family: "Montserrat", arial;
        font-weight: bold;
    }

    .logo {
        height: 40px;
    }

    /* end of header */

    /* profiles */
    .profile-image {
        width: 100%;
        max-width: 300px;
        height: auto;
        display: block;
        margin: 20px auto;
        border-radius: 10px;
    }

    .container {
        max-width: 800px;
        margin: 50px auto 0 auto;
        padding: 20px;
        background: #00000010;
        border-radius: 15px;
    }

    .profile-info {
        margin-bottom: 20px;
    }

    .profile-info dt {
        font-weight: bold;
    }

    .profile-info dd {
        margin: 0 0 10px 0;
    }

    .card-link {
        text-decoration: none;
        color: inherit;
    }

    .card-link .card {
        cursor: pointer;
    }

    /* discography */

    /* Responsive Styles */
    @media (max-width: 768px) {
        .album {
            padding: 1rem;
        }
    }

    @media (max-width: 480px) {
        .album h1 {
            font-size: 1.2rem;
        }

        .album h2 {
            font-size: 1rem;
        }
    }

    p,
    li {
        font-family: "Montserrat", arial;
        text-align: center;
    }

    p {
        font-style: italic;
    }

    h2 {
        font-family: "Bad Script", sans-serif;
        color: #94b4e5;
    }

    h2,
    h4 {
        text-align: center;
    }

    a {
        font-weight: bold;
        /* text-decoration: dashed; */
        color: #94b4e5;
    }

    li {
        color: #c5b4e1;
    }

    .container ol {
        list-style-type: none;
        /* Removes default numbers or bullets */
        padding-left: 0;
        /* Removes default padding */
        text-align: center;
        /* Centers the list items horizontally */
    }