@media (min-width: 801px) and (max-width: 1200px) {
    html{
        scroll-behavior: smooth;
    }
    
    body{
        background-color: #111111;
    }

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

    body {
        font-family: sans-serif;
        scroll-behavior: smooth;
        background-color: #121212;
        color: white;
    }

     #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;
         transition: max-width 0.3s ease;

    }

    #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: 45rem;
        /* 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.8rem, 1.8vw, 1rem);
        font-weight: lighter;
    }
    .navLink:hover{
        font-size:clamp(1rem, 2vw, 1.2rem);
    }

    #navbar:has(.navLink:hover):not(:has(.navLink.active:hover)) {
    max-width: 660px;
    }
    .navLink.active {
        font-weight: light;
        font-size:clamp(1rem, 2vw, 1.2rem);
        background: linear-gradient(180deg, #00ffff, #0077ff);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #homeContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 1200px;
        margin-top: -30rem;
        /* margin-left: 100px;
        margin-right: 100px; */
        gap: 7%;
        /* background-color: blue; */
    }
    /* 
    #textDiv {
        width: 80%;

    } */

    #circleWrapper {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        /* background-color: blue; */

    }

    #imagePop {

    width: 15rem;
    height: 17rem;
    background: url(../images/selfPhoto.png)  -20px -100px / 120% 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{
        /* background-color: red; */
        min-height: 40rem;
        z-index: -1;

    }
    .stickySvg{

        position: sticky;
        top: 0;
        z-index: -1;

        width: 38.72rem;
        height: 30.92688rem;
        /* margin-top: -3rem; */
        /* background-color: red; */
        
    }
    .stickySvg svg{
        margin-top: -5rem;
        /* background-color: #0077ff; */
    }

    #textDiv p{
        font-size: 1.2rem;
        color: #707070;
        font-weight: lighter;
        margin-bottom: 0.5rem;
        margin-left: 0.6rem;
    }
    #textDiv h2{
        font-size: 1.5rem;
        color: #959595;
        font-weight: lighter;
        margin-bottom: 1.5rem;
        margin-left: 0.5rem;
    }
    #textDiv h1{
        font-size: 2.5rem;
        font-weight: lighter;
        margin-bottom: 1rem;
    }
    #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;
         z-index: 10;
    }

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

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

    #homeButton a:hover{
        padding: 0.95rem 2.7rem;
        width: 12.5rem;
        border-radius: 0.6rem;
        /* transform: scale(1.03); */
    }

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

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

    .phone{
        display: none;
    }

    /* #textDiv{
        background-color: red;
    } */


}