* {
    margin: 0;
    padding: 0;
    font-weight: 400;
    box-sizing: border-box;
    font-family: "myFirstFont";
    background-color: #151414;
    cursor: none;

}

@font-face {
    font-family: myFirstFont;
    src: url(NeueMontreal-Medium.ttf);
}

html,
body {
    width: 100%;
    height: 100%;
}

#main {
    padding: 0vw 1.5vw;
    width: 100%;
    height: 100vh;
}

#hero {
    width: 100%;
}

#nav {
    position: relative;
    width: 100%;
    height: 4vw;
    font-size: 0.95vw;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #d9d9d9;
}

a {
    letter-spacing: 1px;
    text-decoration: none;
    color: #d9d9d9;
}

#nleft {
    align-items: center;
    display: flex;
}

#nmiddle {
    display: flex;
    gap: 17px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#nright {
    align-items: center;
    display: flex;
    gap: 15px;
}

#name {
    margin-top: 2vw;
    padding-bottom: 2vw;
    justify-content: center;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    width: 100%;

    font-size: 7vw;
}

#name h1 {
    line-height: 0.8;
    font-weight: 400;
}

#sharma {
    display: flex;
    justify-content: end;
    align-items: center;
}

.sharma {
    width: min-content;
    display: flex;
    justify-content: end;
    align-items: center;
}

#skill {
    font-size: 1rem;
    width: 100%;
    height: 4.3vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#skill h2 {
    font-size: 1rem;
    color: #d9d9d9;
}

#globe {
    width: 13%;
    height: min-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

#globe img {
    background-color: transparent;
    width: 100%;
    height: 100%;
}

#scrollCenter {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 65px;
}

#scroll {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10%;
}

#scroll img {
    background-color: transparent;
    width: 100%;
    height: 100%;
}

/* *********************** ABOUTME *************************** */
#aboutme {
    margin-top: 20vw;
    display: flex;
    align-items: start;
    justify-content: space-between;
    color: #d9d9d9;
    border-bottom: 2px solid #d9d9d9;
    padding-bottom: 3vw;
    margin-bottom: 3vw;
}

#aboutleft {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 65%;
}

#aboutleft h2 {
    border-right: 2px solid #d9d9d9;
    font-size: 5vw;
}

#aboutright {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    width: 31%;
}

#aboutright h2 {
    font-size: 2vw;
}

#aboutright i {
    padding-top: 18.5vw;
    font-size: 3vw;
}

#abouticons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

/* ********************* SKILLS ***************************** */
#skills {
    border-bottom: 2px solid #d9d9d9;
    padding: 50px;
    height: 30vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #d9d9d9;

}

#skillsleft {
    height: 100%;
    width: 25%;

    border-right: 2px solid #d9d9d9;
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding-top: 5px;

    padding-right: 25px;
}

#skillsleft h2 {
    font-size: 2vw;
}

#skillsleft i {
    font-size: 2vw;
}

#skillsright {
    height: 100%;
    width: 70%;
}

#skillrighttop {
    display: flex;
    height: 50%;
    border-bottom: 2px solid #d9d9d9;
}

#skillone {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    width: 50%;
    height: 100%;
}

#skillone h2 {

    font-size: 2.5vw;
}

#skillone p {

    width: 59%;
    padding-bottom: 60px;
    font-size: 1vw;
    width: 50%;
}

#skilltwomask {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    width: 50%;


    height: 100%;
}

#skilltwo {
    border-left: 2px solid #d9d9d9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 50px;

    height: 100%;
}

#skilltwo h2 {
    padding-left: 50px;
    font-size: 2.5vw;
}

#skilltwo p {
    padding-left: 50px;
    width: 59%;
    padding-bottom: 10px;
    font-size: 1vw;
    width: 50%;
}

#skillrightbottom {
    display: flex;

    height: 50%;
}

#skillthree {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    width: 50%;
    height: 100%;
}

#skillthree h2 {

    font-size: 2.5vw;
}

#skillthree p {

    width: 50%;
    padding-bottom: 50px;
    font-size: 1vw;
}

#skillfourmask {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    width: 50%;
    height: 100%;

}

#skillfour {

    border-left: 2px solid #d9d9d9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    margin-top: 50px;
    height: 100%;
}

#skillfour h2 {
    padding-left: 50px;
    font-size: 2.5vw;
}

#skillfour p {
    padding-left: 50px;
    width: 59%;

    font-size: 1vw;
    width: 50%;
}

/* ************************* Work Slider **************************** */
@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.work {
    margin-top: 5vw;
    margin-bottom: 5vw;
    display: flex;
    gap: 40px;
    color: #d9d9d9;
    overflow: hidden;
    background-color: #151414;
    white-space: nowrap;
    position: relative;
}

.work:before,
.work:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
}



/* .work:hover .work-slide {
    animation-play-state: paused;
} */

.work-slide {
    display: inline-block;
    display: flex;
    gap: 40px;
    justify-content: space-between;
    font-size: 5vw;
    /* border-top: 2px solid #d9d9d9;
    border-bottom: 2px solid #d9d9d9; */
    animation: 35s slide infinite linear;
}







/* ********************* PROJECT *************************** */

#project {
    margin-top: 8vw;
    margin-bottom: 8vw;
    width: 100%;
    object-fit: cover;
}

#project img {
    width: 100%;
}

#second {
    overflow: hidden;
    color: #fff;

    background-color: #151414;
    width: 100%;
    height: 100vh;
}

.elem {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 3.5vw 3vw;
    padding-right: 0;
    border-top: 2px solid #d9d9d9;
}

.elem h1 {
    text-transform: uppercase;
    font-size: 7.6vw;
    opacity: 0.7;
}

.elemlast {
    border-bottom: 2px solid #d9d9d9;
}

.elem img {
    opacity: 0;
    pointer-events: none;
    height: 140%;
    z-index: 1;
    position: absolute;
    transform: translate(-50%, -50%);
}

#about {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    color: #fff;
    height: 80vh;
    padding: 10vw 10vw;
    width: 100%;
}

#textabout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 36rem;
}

#textabout h5 {
    font-size: 2.5vw;
    opacity: 0.6;
    margin-bottom: 20px;
}

#textabout h1 {
    font-size: 5vw;
    margin-bottom: 30px;
}


#about img {
    border-radius: 500px;
    width: 320px;
}

#textabout a {
    padding: 12px 22px;
    border: 1px solid #fff;
    border-radius: 100px;
    color: #fff;
    font-size: 1vw;
    text-decoration: none;
}

#footer {
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 30px;
}

#footerleft {
    display: flex;
    gap: 20px;
}

#footerright {
    font-size: 1rem;
    display: flex;
    gap: 30px;
}

#footer h5 {
    font-size: 1rem;
}

#footer a {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
}

/* ********************* CURSOR ******************************* */

.inner-cursor {
    position: fixed;
    left: 10px;
    z-index: 2;
    width: 25px;
    height: 25px;
    transform: translate(-50%, -50%);
    background-color: #d9d9d9;
    mix-blend-mode: difference;
    border-radius: 50%;
    pointer-events: none;
    transition: width 0.5s, height 0.5s;
}

.hidouter {
    opacity: 0;
}

.grow {
    z-index: 2;
    width: 80px;
    height: 80px;
    transition: width 0.5s, height 0.5s;
}

.outer-cursor {
    z-index: 2;
    background-color: transparent;
    position: fixed;
    left: 10px;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    border: 1px solid #d9d9d9;
    mix-blend-mode: difference;
    border-radius: 50%;
    pointer-events: none;

}


/* ****************** Responsive ********************** */

@media (max-width:600px) {
.inner-cursor{
    height: 0;
    width: 0;
    opacity: 0;
}
.outer-cursor{
    height: 0;
    width: 0;
    opacity: 0;
}
*{
    cursor: default;
}

    #main {

        padding: 0vw 5vw;
       
    }
    #nav{overflow: hidden;
        height: 10vw;
        font-size: 3vw;
    }
    #nmiddle {
        display: flex;
        gap: 17px;
        position: absolute;
        top: 50%;
        left: 90%;
        transform: translate(-63%, -50%);
    }
    #nright {
       height: 0;
       width: 0;
       opacity: 0;
    }
    
    #globe {
        width: 0;
    }

    #gaurav {
        font-size: 11vw;
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 3vw;
        margin-top: 10vw;
    }

    #sharma {
        font-size: 10.5vw;
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 9vw;
    }

    #skill {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        margin-top: 10vw;
        gap: 5vw;
    }

    #scrollCenter {
        margin-top: 45vw;
    }

    #scroll {
        width: 30%;
    }

    #aboutme {
        flex-direction: column-reverse;
    }

    #aboutleft {
        width: 100%;
    }

    #aboutleft h2 {
        font-size: 7.5vw;
        border: none;
        margin-bottom: 10vw;
    }

    #aboutright {
        flex-direction: row;
        width: 100%;
    }

    #aboutright h2 {
        line-height: 20vw;
        font-size: 10vw;
        border-bottom: 2px solid #d9d9d9;
        margin-bottom: 5vw;
    }

    #abouticons {
        width: 0;
        height: 0;
    }

    #aboutright i {
        width: 0;
        height: 0;
        font-size: 0;
    }

    #skills {
        flex-direction: column;
        height: 100vh;
        font-size: 1vw;
        padding: 0;
        height: max-content;

    }

    #skillsleft {
        width: 100%;
        border: none;
    }

    #skillsleft h2 {
        line-height: 20vw;
        font-size: 10vw;
        border-bottom: 2px solid #d9d9d9;
        margin-bottom: 10vw;
    }

    #skillsleft i {
        font-size: 0;
    }

    #skillsright {
        display: flex;
        flex-direction: column;
        width: 100%;

    }

    #skillrighttop {
        flex-direction: column;
        border: none;
    }

    #skillone {
        width: 100%;
    }

    #skillone h2 {
        font-size: 10vw;
        margin-bottom: 1.5vw;
    }

    #skillone p {
        width: 100%;
        padding-bottom: 60px;
        font-size: 5vw;
    }

    #skilltwo {
        border: none;
        margin-bottom: 1.5vw;
    }

    #skilltwomask {
        width: 100%;
    }

    #skilltwo h2 {
        padding-left: 0;
        font-size: 10vw;
    }

    #skilltwo p {
        padding-left: 0;
        width: 100%;
        padding-bottom: 60px;
        font-size: 5vw;
    }

    #skillrightbottom {
        flex-direction: column;
    }

    #skillthree {
        margin-top: 0;

        width: 100%;
    }

    #skillthree h2 {
        margin-bottom: 1.5vw;
        padding-left: 0;
        font-size: 10vw;
    }

    #skillthree p {

        padding-left: 0;
        width: 100%;
        padding-bottom: 60px;
        font-size: 5vw;
    }

    #skillfourmask {
        width: 100%;
    }

    #skillfour {
        margin-top: 0;
        width: 100%;
        border: none;
    }

    #skillfour h2 {
        margin-bottom: 1.5vw;
        padding-left: 0;
        font-size: 10vw;
    }

    #skillfour p {
        padding-left: 0;
        width: 100%;
        padding-bottom: 60px;
        font-size: 5vw;
    }

    .work-slide {
        font-size: 10vw;
        gap: 20px;
    }
    #second {
        height: 30vh;
    }
    #about {
        height: 40vh;
    }
    #textabout h5 {
        font-size:7.5vw;
        margin-bottom: 5px;
    }
    
    #textabout h1 {
        font-size: 15vw;
        margin-bottom: 3vw;
    }
    #textabout a {

        font-size: 5vw;
    }
    #footer h5 {
        font-size: 3vw;
    }
    #footer a {
        font-size: 3vw;
    }
}