@media (max-width: 800px) {
      /* New */
    html{
        scroll-behavior: smooth;
    }

    body{
        background-color: #111111;
        max-width: 100%;

    }


    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: sans-serif;
        scroll-behavior: smooth;
        background-color: #121212;
        color: white;
    }
    #home{
        margin-top: -5rem;
       
    }
    #navbar {

        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        /* background: linear-gradient(180deg, #0D0D0D50, #1A1A1A10); */
        background: linear-gradient(180deg, #0D0D0D99, #1a1a1a99);
        box-shadow: 0 10px 10px rgba(0,0,0, 0.3);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(7px);
        padding: 0.8rem 2rem;
        width: 90%; 
        max-width: 650px; 
        margin: 0 auto;
        border-radius: 90px;
        z-index: 1000;

    }

    #navbar ul {
        display: flex;
        justify-content: center;
        gap: clamp(1rem, 5vw, 3rem);
        list-style: none;
        white-space: nowrap; 
        align-items: center;
    }

    nav#navbar a {
        color: white;
        text-decoration: none;
    }

    section {
        min-height: 55rem;
        /* min-height: 100vh; */
        padding: 4rem 2rem;
        /* border-bottom: 1px solid #333; */
        
    }
    .navLink {
        color: white;
        text-decoration: none;
        /* font-weight: normal; */
        transition: all 0.3s ease;
        font-size: clamp(0.7rem, 1.8vw, 1rem);
        font-weight: lighter;
    }
    .navLink:hover{
        font-size:clamp(0.9rem, 2vw, 1.2rem);
    }

    .navLink.active {
        font-weight: light;
        font-size:clamp(0.9rem, 2vw, 1.2rem);
        background: linear-gradient(180deg, #00ffff, #0077ff);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #homeContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 1200px;
        margin: -45rem auto;
        gap: 8rem;
        

    }
    /* 
    #textDiv {
        width: 80%;

    } */

    #circleWrapper {
        display: flex;
        /* position: absolute; */
        justify-content: center;
        align-items: flex-end;
        order: -1;


        margin-top: -8rem;
        

    }

    #imagePop {

        width: 15rem;
        height: 20rem;
        background: url(../images/selfPhoto.png)  -35px -60px / 130% no-repeat;
        /* background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/59a6349b-7a40-4af2-bf9a-3a13ddf42093/dd3s0w0-1b22c80b-9501-482f-a23e-b9ba719b6708.png/v1/fill/w_1280,h_1338/domestic_cat_on_a_transparent_background_by_zoostock_dd3s0w0-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU5YTYzNDliLTdhNDAtNGFmMi1iZjlhLTNhMTNkZGY0MjA5M1wvZGQzczB3MC0xYjIyYzgwYi05NTAxLTQ4MmYtYTIzZS1iOWJhNzE5YjY3MDgucG5nIiwiaGVpZ2h0IjoiPD0xMzM4Iiwid2lkdGgiOiI8PTEyODAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uud2F0ZXJtYXJrIl0sIndtayI6eyJwYXRoIjoiXC93bVwvNTlhNjM0OWItN2E0MC00YWYyLWJmOWEtM2ExM2RkZjQyMDkzXC96b29zdG9jay00LnBuZyIsIm9wYWNpdHkiOjk1LCJwcm9wb3J0aW9ucyI6MC40NSwiZ3Jhdml0eSI6ImNlbnRlciJ9fQ.xf5Tekkc_QWX23g9bolzJUzTqtAAaakuzaFJRhEj9EA)  -60px 0px / 150% no-repeat; */
        border-radius: 0 0 25rem 25rem;
        z-index: 1;
    }

    #circleMask {
        position: absolute;
        width: 15rem;
        height: 15rem;
        border-radius: 20rem;
        background: rgba(255, 255, 255, 0.05); /* your glow */
        z-index: 0;
    }

    #movableSVG{
        min-height: 50rem;
        z-index: -10;
        /* overflow-x: auto; */

    }
    .stickySvg{

        position: sticky;
        top: 0;

        width: 100%;
        height: 30.92688rem;
        /* margin-top: -3rem; */
        /* width: 100%; */
       
        
    }
    .stickySvg svg{
        margin-top: -5rem;
        /* margin-left: 2rem; */
        /* background-color: #0077ff; */
         max-width: 100%;
        overflow-x: hidden;
        
    }
    #textDiv p{
        display: none;
    }  
    #homeContainer p{
        font-size: 1.5rem;
        text-align: center;
        color: #707070;
        font-weight: lighter;
        margin-top: 2rem;
        margin-bottom: -5.5rem;
        margin-left: 0.6rem;
        order: -2;
    }
    #textDiv{
        margin-top: -6rem;
    }
    #textDiv h2{
        display: none;
    }
    #homeContainer h2{
        font-size: 1.75rem;
        text-align: center;
        color: #959595;
        font-weight: lighter;
        margin-top: -2rem;
        /* margin-bottom: 1.5rem; */
        margin-left: 0.5rem;
        order: -2;
    }
    #textDiv h1{
        font-size: 3.5rem;
        text-align: center;
        font-weight: lighter;
        margin-bottom: 1rem;
        max-width: 25rem;
        order: -2;
    }
    #social a{
        display: flex;
        margin-left: 0.1rem;
        margin-right: 0.5rem;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 90rem;
        border-color: #575757; 
        border-style: solid;
        border-width: thin;
        background-color: #00000000;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        transform-origin: center center;
    }

    #social a:hover{
        transform: scale(1.1);
        margin-right: 0.7rem;
        margin-left: 0.3rem;
        margin-top: 0.05rem;
        margin-bottom: 0.05rem;
    }
    #social #insta:hover{
        margin-left: 0.1rem;
        
    } 

    #social{
        display: flex;
        margin-top: 1.5rem;
        align-items: center;
        justify-content: center;
        position: relative;  
        z-index: 10;        
    }

    #homeButton{
        display: flex;
        align-items: center;
        gap: 1.5rem;
        justify-content: center;
        z-index: 10;
    }

    #homeButton a{
        padding: 0.75rem 2rem;
        border-radius: 0.5rem;
        margin-top: 2rem;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: lighter;
        text-decoration: none;
        min-width: 10rem;
        text-align: center;
        z-index: 10;

    }

    #homeButton a:hover{

        border-radius: 0.6rem;
        transform: scale(1.05);
    }

    #messageMe{
        border: none;
        background: #18B6FF;
        color: #FFFFFF;
    }

    #downloadCV{
        background-color: #FFFFFF05;
        color: #959595;
        border: 1px solid #959595;
    }

}