body {
    margin: 0;
    height: 100%;
}

@scope (.desktop-only) {

    .desktop-grid {
        display: grid;
        position: relative; 
        grid-template-rows: 1fr 4fr;
        width: 100%;
        margin: 0;
        min-height: 100vh;
        overflow: hidden;
        /* background:
            radial-gradient(circle at 15% 20%, rgba(120, 120, 120, 0.50), transparent 40%),
            radial-gradient(circle at 70% 45%, rgba(122, 125, 125, 0.53), transparent 45%),
            radial-gradient(circle at 50% 85%, rgba(255, 0, 25, 0.73), transparent 50%),
            linear-gradient(#0a0a0a, #020202); */
    }

    .logo-container {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .disco-logo {
        width: 750px;
        height: auto;
        margin-bottom: 5px;
    }

    .discography-container {
        grid-column: 1;
        grid-row: 2;
        display: flex;
        justify-content: center;
    }

    .menu-container{
        display: grid;
        /* grid-template-rows: 1fr 4fr 4fr; */
        grid-template-rows: auto auto auto;
        background-color: rgb(50, 50, 50);
        width: 800px;;
        padding: 25px;
        z-index: 2;
    }

    .navigation-link-container {
        position: sticky;
        grid-row: 1;
        display: flex;
        justify-content: right;
        gap: 10px;
        width: 100%;
    }

    .navigation-link {
        font-size: 20px;
        color: white;
        text-decoration: none;
        /* height: fit-content; */
    }

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

    .singles-container {
        grid-row: 2;
    }

    .project-list {
        display: flex;
        gap: 20px;
        height: 100%;
        width: 100%;
    }

    .eps-container {
        grid-row: 3;
    }

    .category-container {
        margin-bottom: 20px;
    }

    .category-container-title {
        font-weight: bold;
        color: white;
        margin-bottom: 20px;
        font-size: 20px;
    }

    .project-title {
        font-size: 16px;
        color: white;
        margin-bottom: 5px;
    }

    .project-date {
        font-size: 14px;
        color: white;
        opacity: 0.6;
    }
    
    .project-item:hover {
        cursor: pointer;
        opacity: 0.75;
    }

    .cover-art {
        width: 200px;
        height: 200px;
        object-fit: cover;
    }

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

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

        z-index: 1000;
    }

    #modal {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: min(800px, 80vw);
        max-height: 80vh;

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

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

        overflow-y: auto;
    }

    #modal-image {
        width: 95%;
        height: auto;
        object-fit: cover;
    }

    .hidden {
        display: none !important;
    }

    #modal-close {
        float: right;
        font-size: 28px;
        cursor: pointer;
    }

    #modal-title {
        font-size: 24px;
        font-weight: bold;
        /* margin-bottom: 10px; */
    }

    #modal-links {
        display: flex;
        /* gap: 10px; */
        /* margin-bottom: 10px; */
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
    }

    .modal-content-container {
        margin-top: 20px;
        font-size: 12px;
    }
    
    #modal-credits-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
        font-size: 12px;
   } 

    .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;
    }

    .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%
        );
    }

}