* {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    :root {
        font-family: monospace;
    }
    body {
        min-height: 100vh;
        /* height: 100%; */
        width: 100vw;

        background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),url("icon.jpeg");
        position: relative;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;

        /* background-color: aliceblue; */
    }
    .scroll-snap-container {
        /* if not fixed will have space at left...why */
        position:absolute;
        top:0px;
        left:0px;
        
        
        height: 100vh;
        /* width: 100vw; */
    }
    html {
        scroll-behavior: smooth;
    }

    nav img {
        width: 40px;
        height: 40px;
        border-radius: 50%;

        border: 2px solid black;
    }
    .nav-bar .nav-link {
        /* background-color: rgba(244, 165, 96, 0.715); */
        position:fixed;
        width: 100vw;
        top:0px;
        left:0px;
        background-color: transparent;
        
        padding: 3vh;
        
        flex: 1;
        text-align: left;
        display: flex;
        flex-direction: row;
        justify-content: left;
        z-index: 3;
        align-items: center;

        transition: 1s;
        /* fill: white;
        stroke: black;
        stroke-width: 22px;
        paint-order: fill stroke; */

        scroll-snap-align: start;
    }
    .nav-bar.turn .nav-link {
        background: linear-gradient(black ,rgb(202, 168, 147) 40%,white);
        border-bottom: 5px solid black;
        padding: 1vh;
        
    }
    .nav-link ul li{
        list-style: none;
        display: inline-block;
        align-items: left;
    }
    .nav-link ul li a{
        text-decoration: none;
        color: white;
        font-weight: bold;
        padding: 8px 12px;
        font-size: 20px;       
        text-shadow: black 0.1em 0.1em 0.2em;
    }
    .nav-link ul li a:hover {
        /* text-decoration: underline; */
        text-decoration-color: black;
        text-decoration-line: underline;
        transition: 1s;

    }
    .video {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 10;
        width: 100%;
        height: 100%;

        display: flex;
        justify-content: center;
        align-items: center;
        /* not work */
        /* backdrop-filter: blur(20px); */
        background-color: rgba(175, 255, 254, 0.314);
        visibility: hidden;
    }
    .video.active {
        visibility: visible;
    }
    .video video {
        max-height: 80vh;
        outline: none;
    }
    .video i {
        position: absolute;
        top: 8vh;
        right: 20%;
        font-size: 8vw;
        
        color: white;
        
    }

    /* next is to add spinning icons of programming languages or frameworks */
    .intro, .work {
        position: relative;
        height: 100vh;
        width: 100%;
        
        scroll-snap-align: start;
        /* background-color: aliceblue; */
        
    }
    .intro-box {
        position: absolute;
        top: 40%;
        left:50%;
        transform: translate(-50%,-50%); 
        /* why transform and translate */
        text-align: center;
        /* background-color:rgb(245, 241, 161); */
        border: 1px solid white; 
        color: white;

        
    }
    .intro-box h1 {
        font-size: 5vh;
        margin-top: 1vh;
    }
    .intro-box p {
        font-size: 2.6vh;
        margin: 10px 20px 40px;
    }
    
    .about-me {
        position: relative;
        height: 100vh;
        width: 100vw;
        
        display: flex;
        align-items: center;
        
        scroll-snap-align: center;

        opacity: 0;
        transition: 0.5s;
    }
    
    .about-me div div {
        color: white;
        
        border: 1vh solid white;
        border-radius: 2vh;
        /* width: 30%; */
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 10px 0;
        
    }
    .about-me div div h1 {
        margin-bottom: 2vh;
    }
    .about-me .row {
        height: max-content;
        display: flex;
        
    }
    .about-me i {
        font-size: 5vh;
        margin-top: 2vh;
    }
    .about-me h1 {
        font-size: 4vh;
        
    }
    .about-me p {
        font-size: 2.2vh;
        margin: 0 2vh 2vh;
    }

    .about-me .education, .about-me .hobbies, .about-me .strength {
        transform: translateY(calc(30vh*var(--i)));
        transition: 1.5s;
    }

    .about-me.show {
        opacity: 1;
        
    }
    .about-me.show .education, .about-me.show .strength, .about-me.show .hobbies {
        transform: translateX(0);
    }

    span {
        cursor: wait;
    }

    .work {
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        /* background-color: white; */
    }
    .work h1 {
        font-size: 4vh;
        z-index: 10;
    }
    .work ul {
        z-index: 10;
    }
    .work li {
        font-size: 2.2vh;
        list-style-type: none;
    }

    /* adding work section */
      
    .container{
        width: 100vh;
        height: 100vh;
        max-width: 500px;
        max-height: 500px;
        position: absolute;
        /* background-color: black; */
        border-radius: 50%;
        animation: spin 20s linear infinite;
        transition: 1s;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .container.active{
        opacity: 0.8;
    }

    .container.active > .field {
        height: calc(var(--d)*100px)
    }
      
    .container .field {
        width: auto;
        height: 20px;
        position: absolute;
        border-radius: 5px;
        /* animation-name: moving;
        animation-duration: calc(var(--d)*3);
        animation-iteration-count: infinite;
        animation-timing-function:ease-in; */
        /* animation:  moving calc(var(--d)*3) ease-in 2s infinite */
        animation: spin 20s linear infinite reverse;
        transition: height 1s;
    }
    
    .container .field:hover {
        height: calc(var(--d)*150px)
    }
    
    /* #container:hover, #container:hover > .field{
        animation-duration: 5s;
        
    } */
    
    @keyframes moving {
        0% {transform: translate(-10px,-10px);}
        12.5% {transform: translate(-13px,0px);}
        25% {transform: translate(-10px,10px);}
        /* 37.5% {transform: translate(0px,0px);} */
        50% {transform: translate(10px,-10px);}
        62.5% {transform: translate(13px,0px);}
        75% {transform: translate(10px,10px);}
        /* 87.5% {transform: translate(0px,0px);} */
        100% {transform: translate(-10px,-10px);}
    }
    
    @keyframes spin {
        100% {transform: rotate(1turn);}
    }



    .projects {
        position: relative;
        height: 100vh;
        color: white;
        width: 100vw;
        display: flex;
        align-items: center;

        scroll-snap-align: center;


    }
    

    .project-items {
        
        width: 100%;
        /* overflow: scroll; */  
    }
    .project-items h1 {
        margin-bottom: 2vh;
    }
    
    .project-items div div {
        opacity: 0;
        transform: translateY(calc(50%*var(--i)));
        transition: 1s;
    }
    .project-items.show div div {
        opacity: 1;
        transform: translateY(0%);
    }

    .project-grid {
        display: grid;
        grid-template-columns: repeat(3, 29vw);
        grid-row-gap: 2vh;
        grid-column-gap: 3vh ;
        margin-left: 1vw;
        
    }
    .project-height {
        height:max-content;
    }
    
    .projects i {
        font-size: 5vh;
        color: white;
        margin-top: 1vw;
        margin-left: 1vw;
    }
    
    .project-items div div div {
        width: auto;
        background-color: rgba(84, 84, 84, 0.7);
        text-decoration: none;
    }
    
    .project-items div div div a {
        text-decoration: none;
        color:rgb(255, 255, 133);
    }
    .project-items div div div a:hover {
        color:rgb(251, 251, 221);
    }

    .projects div div div p {
        color: white;
        font-size: 2vh;
        margin-left: 1vw;
        margin-top: 1vh;
        margin-bottom: 1vh;
    }
    .contact {
        width: 100%;
        position: relative;
        height: 40vh;
        display: flex;
        justify-content: center;       
        text-align: center;
        scroll-snap-align: start;    
    }
    .contact-box {
        border: 2px solid white;
        border-radius: 20px; 
        width: 70%;
        height: fit-content;
    }
    .contact h1 {
        color: white;        
    }
    .row {
        display: flex;
        align-items: row;
        justify-content: center;
        
    }
    .contact div div{
        margin: 0 1vw 0;
        font-size: 5vh;
        
    }
    .contact div i {
        color: white;

    }
    .ig {
        display: flex;
    }
    .ig p {
        color: white;
        font-size: 2.2vh;
        margin-left: 1vw;
    }

    .recommend {
        width: 100%;
        height: 40vh;
        position: relative;
        display: flex;
        justify-content: center;
    }
    .recommend-box {
        width: 80vw;
        max-height:fit-content;
        background-color: rgba(240, 248, 255, 0.415);
        text-align: center;
        transform: translate(2vw,2vh);
        box-shadow: -2vw -2vh rgba(255, 255, 255, 0.826);
    }
    .recommend .recommend-box h1{
        font-size: 5vh;
        font-weight: bold;
        padding-bottom: 1vh;
    }
    .recommend .recommend-box .inputBox {
        text-align: left;

    }
    .recommend .recommend-box .inputBox h1{
        font-size: 2vh;
        
        margin-left: 2vw;
    }
    .recommend .recommend-box .inputBox input,
    .recommend .recommend-box .inputBox textarea {
        margin-left: 2vw;
        width: 95%;
        margin-bottom: 1vh;
    }
    .recommend .recommend-box .inputBox textarea {
        min-height: 5vh;
        resize: none;
    }

    footer {
        color: white;
        position: relative;
        height:fit-content;
        
        font-size: 1.4vh;
        padding-bottom: 1vh;
        display: flex;
        justify-content: end;
        
    }
    footer p {
        margin-right: 1vw;
    }
    

    
    #jumping-ball {
        z-index: 100;
        display:block;
        height:5vh;
        width:5vh;
        border-radius: 50%;
        position: fixed;
        right: 5%;
        top: 5%;
        border: 1px solid black;
        background: linear-gradient(135deg, white 3%,rgb(123, 243, 96) 50%);
        animation-name: bouncing;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        /* animation-fill-mode: forwards; */
        /* modify more smooth */
        animation-timing-function: cubic-bezier(0.5,-0.5,0.51,1); 
    }
    

    .projects div div div:hover, .contact div i:hover {
        /* transition: 1s; */
        animation-name: ijump;
        animation-duration: 1s;
        animation-timing-function: ease;
    }
    .contact div i:hover {
        color: rgb(255, 255, 133);
    }

    @keyframes bouncing {
        0% {
            top: 5%;
        }
        50% {
            top: 17.5%;
            height: 3vh;
            
        }
        100% {
            top: 5%;
        }
    }
    nav .fa {
        display: none;
    }

    @keyframes ijump {
        0% {
            transform: translateY(0);
        }
        20% {
            transform: translateY(-1vh);
        }
        100% {
            transform: translateY(0);
        }
    }

    
    

    @media (max-width: 1100px) {
        
        .scroll-snap-container {
            position: fixed;
            scroll-snap-type: y mandatory; 
            overflow-y: scroll;
        }
        .nav-bar .nav-link, .nav-bar.turn .nav-link {
            position: fixed;
            left: -55vw;
            top: 0px;
            height: 100vh;
            width: 50vw;
            display: block;
            border-right: 2px solid black;
            transition: 1s;
            padding: 1vh;
            background: linear-gradient(black ,rgb(202, 168, 147) 40%,white);
            /* margin: 0; */
        }
        .nav-link ul {
            position: absolute;
            top: 16vh;
        }
        .nav-link ul li {
            padding: 20px;
            display: flex;
            flex-direction: column;
        }
        .nav-link ul li a{
            font-size: 3vh;
            
        }
   
        nav .fa {
            display: block;
            font-size: 5vh;
            color: white;            
        }
        nav i {
            position: fixed;
            z-index: 2;
        }
        
        nav img {
            width: 7vh;
            height: 7vh;
            position: relative;
            left: 20px;
        }
        .video i {
            right: 0;
        }

        .intro-box {
            top: 40vh;
            margin: 0 -10% 0 0;
        }
        .intro-box h1 {
            font-size: 4vh;
        }
        .intro-box p {
            font-size: 1.8vh;
            margin: 10px 20px 40px;
        }

        .about-me {
            width: 100%;
            justify-content: center;
        }
        .about-me .row {            
            flex-direction: column;
        }
        .about-me div div{
            width: 80vw;
            margin: 0 0 2vh;
        }
        .about-me div h1 {
            font-size: 2.2vh;
        }
        .about-me div p {
            font-size: 1.5vh;
        }
        .about-me .education, .about-me .hobbies {
            transform: translateX(10vw);
            transition: 1.8s;
        }
        .about-me .strength {
            transform: translateX(-10vw);
            transition: 1.8s;
        }

        .work h1 {
            text-align: center;
        }
        .work ul {
            margin-left: 3vw;
            margin-right: 3vw;
        }
        
        .projects div div {
            display:flex;
            flex-direction: column;
        }
        .projects h1 {
            font-size: 2.6vh;
        }
        .projects div div div p {
            font-size: 2vh;
            margin-right: 1vh;
        }
        
        .contact h1 {
            font-size: 2vh;
        }
        .row {
            margin: 0 3vw 0;
        }
        .ig p {
            font-size: 1.6vh;
        }
        
    }