@scope (.mobile-only) {
    .home-logo {
        width: 150px;
        height: auto;
    }

    .mobile-grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
    }

    .navigation-link-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        color: white;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .navigation-link {
        font-size: 18px;
        color: white;
        text-decoration: none;
    }

    .navigation-link:hover {
        cursor: pointer;
        color: red;
    }

    .logo-container {
        width: 22%;
        background-color: white;
        background-position: center;
        /* top: 2%; */
        /* left: 40%; */
        z-index: 0;
        opacity: 0.80;
        border-radius: 50%;
        overflow: hidden;
    }

    .logo-container img {
        display: block;
        width: 100%;
        height: auto;
    }

    .shape {
        position: absolute;
        z-index: -1;
    }

    .l1 {
        width: 100%;
        height: 2px;
        background-color: rgb(213, 80, 80);
        top: 35%;
        right: 0%;
        opacity: 0.8;
        transform: rotate(-15deg);
    }

    .l2 {
        width: 100%;
        height: 2px;
        background-color: rgb(255, 255, 255);
        top: 55%;
        right: 0%;
        opacity: 0.8;
        transform: rotate(-32deg);
    }

    .background-rect1 {
        top: 5%;
        left: 5%;
        right: 5%;
        bottom: 0;

        width: auto;
        background-color: rgb(50, 50, 50);
        opacity: .33;
        z-index: -1;

        clip-path: polygon(
            0% 100%,
            100% 100%,
            90% 10%,
            20% 5%,
            1% 20%
        );
    }

    .music-container {
        width: 50%;
        margin: 0 auto;
        margin-bottom: 5%;
    }
    
    .projects-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .project-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* background-color: rgb(30, 30, 30); */
        background-color: rgb(50, 50, 50);
        padding: 10px;
        border-radius: 5px;
    }

    .project-container:hover {
        cursor: pointer;
        background-color: rgb(70, 70, 70);
    }

    .section-title {
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        color: white;
        margin-bottom: 20px;
    }

    .project-title {
        font-size: 15px;
        color: white;
        /* margin-bottom: 10px; */
        font-weight: bold;
    }

    .project-menu {
        font-weight: bold;
        color: white;
        display: flex;
        flex-direction: column;
    }

    .cover-art {
        width: 20%;
        height: auto;
        border-radius: 50%;
    }

    #popup-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.7);

        display: flex;
        justify-content: center;
        align-items: center;

        z-index: 1000;
    }

    #popup {
        display: flex;
        flex-direction: column;
        width: min(300px, 80vw);
        max-height: 80vh;

        background: rgb(45,45,45);
        color: white;

        border-radius: 8px;
        padding: 30px;

        overflow-y: auto;
    }

    #popup-producer {
        font-size: 13px;
        font-style: italic;
        text-align: center;
    }

    #popup-image {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .hidden {
        display: none !important;
    }

    #popup-close {
        float: right;
        font-size: 20px;
        cursor: pointer;
        display: none;
    }

    #popup-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
        margin-top: 10px;
        text-align: center;
    }

    #popup-links {
        display: flex;
        gap: 10px;
        flex-direction: column;
        margin-top: 10px;
        margin-bottom: 10px;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
    }

    .popup-content-container {
        margin-top: 20px;
        font-size: 12px;
    }

    .popup-link-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* background-color: rgb(30, 30, 30); */
        background-color: rgb(50, 50, 50);
        /* padding: 10px; */
        width: 100%;
        border-radius: 5px;
    }

    .popup-link-container:hover {
        background-color: rgb(70, 70, 70);
    }

    .media-link-icon {
        width: 50px;
        height: 50px;
    }

    .track-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 10px;
    }

    .track-header,
    .track-row {
        display: grid;
        grid-template-columns: 3fr 2fr 1fr 1fr;
        gap: 10px;
        align-items: center;
        font-size: 12px;
    }

    .track-header {
        font-weight: bold;
        color: white;
        border-bottom: 1px solid #666;
        padding-bottom: 8px;
    }

    .track-row {
        color: #ddd;
        padding: 8px 0;
        border-bottom: 1px solid #444;
    }

}