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


@scope (.desktop-only) {
    
    .home-logo {
        width: 8%;
        height: auto;
        margin-bottom: 5px;
    }
    
    .home-navigation-container {
        /* position: absolute; */
        /* top: 100%; */
        /* left: 10%; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        font-size: 24px;
    }

    .home-navigation-link {
      width: fit-content;
    }

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

    .professional-title {
        font-size: 12px;
        color: white;
        margin-bottom: 5px;
        opacity: 0.8;
    }

    /* .media-links {
        position: absolute;
        top: 30%;
        left: 10%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
    } */

    .page-content {
        position: absolute;
        top: 20%;
        left: 15%;
        display: flex;
        flex-direction: column;
        gap: 130px;
    }

    .background-art-container {
        position: fixed;
        inset: 0;
        z-index: -1;
        overflow: hidden;
        perspective: 800px;

        display: flex;
        justify-content: flex-end;
        align-items: center;
        pointer-events: none;
    }

    .shape {
        position: absolute;
    }

    .background-rect {
        top: 10%;
        left: 10%;
        width: 80%;
        height: 80%;
        background-color: rgb(50, 50, 50);
        /* background-color: rgb(150, 150, 150); */
        /* background-color: rgb(255, 0, 0); */
        animation: float 10s linear infinite;
        transform: rotate(-4deg);
        z-index: 1;
        opacity: 0.5;
    }

    .pic-grid {
        display: grid;
        left: 55%;
        top: 15%;
        grid-template-columns: 50% 50%;
        grid-template-rows: 33% 33% 34%;
        z-index: 1;
        gap: 2px;
        width: 30%;
        height: 66%;
    }

    .grid-box {
        background-color: yellow;
    }

    .grid-art {
        width: 500px;
        height: 500px;
        top: 18%;
        left: 48%;
        z-index: 2;

        background-image:
            repeating-linear-gradient(
                to right,
                rgba(255,255,255,.12) 0px,
                rgba(255,255,255,.12) 1px,
                transparent 1px,
                transparent 25px
            ),
            repeating-linear-gradient(
                to bottom,
                rgba(255,255,255,.12) 0px,
                rgba(255,255,255,.12) 1px,
                transparent 1px,
                transparent 25px
            );
            /* repeating-linear-gradient(
                to top,
                rgba(255,255,255,.12) 0px,
                rgba(255,255,255,.12) 1px,
                transparent 1px,
                transparent 25px
            ),
            repeating-linear-gradient(
                to left,
                rgba(255,255,255,.12) 0px,
                rgba(255,255,255,.12) 1px,
                transparent 1px,
                transparent 25px
            ); */

        mask-image:
            radial-gradient(
                circle at 10% 1%,
                transparent 0%,
                black 25%,
                black 55%,
                transparent 100%
            );
    }

    .upper-circle {
        width: 200px;
        height: 200px;
        background-color: rgb(62, 62, 62);
        top: 25%;
        left: 70%;
        z-index: 3;
        opacity: 0.8;
        border-radius: 50%;
    }

    .under-circle {
        width: 400px;
        height: 400px;
        background-color: rgb(62, 62, 62);
        /* background: url('../../../images/gr_pfp_no_bg.png'); */
        background-color: white;
        background-size: cover;
        background-position: center;
        top: 25%;
        left: 52%;
        z-index: 1;
        opacity: 0.4;
        border-radius: 50%;
    }

    .lower-rect {
        width: 175px;
        height: 125px;
        background-color: rgb(62, 62, 62);
        top: 55%;
        left: 50%;
        z-index: 3;
        opacity: 0.8;
    }

    .l1 {
        width: 600px;
        height: 1px;
        background-color: rgb(213, 80, 80);
        top: 30%;
        left: 40%;
        z-index: 3;
        opacity: 0.8;
        transform: rotate(-25deg);
    }

    .l2 {
        width: 700px;
        height: 1px;
        background-color: rgb(213, 80, 80);
        top: 42%;
        left: 40%;
        z-index: 3;
        opacity: 0.8;
        transform: rotate(35deg);
    }

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

}