* {
    font-family: 'Roboto Mono', monospace ,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, sans-serif;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-size: 12px;
    user-select: none;
    scroll-behavior: smooth;
    transition:all 0.3s ease-in-out;

}

::-webkit-scrollbar{
    width:10px;
    position:fixed;
}

::-webkit-scrollbar-thumb{
    background:#bebebe;
    border-radius:10px;
    transition:2s;
}

::-webkit-scrollbar-thumb:hover{
    background:#f2ae30;
}

@media screen and (min-width: 768px) {

html{
    font-size: 12px;
}

body{
    font-size:1rem;
    scroll-snap-type: y mandatory;
}
/*-------------------------------------------Nav Bar--------------------------------------------------------------------*/



.navbar {
    padding-top: 1vh;
    width:100vw;
    position:fixed;
    z-index:100;
    display:inline-block;
    justify-content:space-between;
    align-items: right;
    padding-right: 1vw;
}


.navbar-left{
    align-items:left;
    float:left;
    margin-left: 0.5vw;
    border-radius: 7.5px;
}

.navbar-left {display:grid; place-items: center;}

.navbar-left li a img{
    border-radius:7.5px;
}

.navbar-left:hover{
    background:rgba(0,0,0,0.2);
}


.navbar-right{
    float:right;
}


.nav-area .navbar-right li{
    padding:0%;
    display:inline-block;
    border:0px solid black;
    border-radius:12px;
    transition:0.075s ease-in-out;
}


.nav-area .navbar-right li:hover{
    border:1px solid black;
    padding: 0 5px;
    border-radius: 12px;
    filter:hue-rotate(180deg);
}

/*-------------------------------------------First Page-----------------------------------------------------------------*/
.first-page{
  height:100vh;
  scroll-snap-align: center;
}

a{
    text-decoration:none;
    font-weight:400;
    color:black;
}



.container1{

    height:30vh;
}



#name {
    width:100%;

}

#sketch{
    background:yellowgreen;
}

.name-box{
    display:flex;
    justify-content:center;
    align-items:center;
    top:50%;
    left:50%;
}



.name-box .image{
    width:69%;
}

#mobile-main-img.image{
    width:90%;
    min-width:370px;
    display:none;
}



/*----------------------------------------------Second Page------------------------------------------------------------------*/
.second-page {
    display:grid;
    place-items: center;
    height:100vh;
    width: 100%;
    background: rgba(0, 0, 0, 0.0);
    scroll-snap-align: center;
}

.left, .right, .middle{
    width:33vw;
    height:100vh;
    display:grid;
    place-items: center;
    transform-style: preserve-3d;
    position: relative;
    transition:all 0.5s ease;
}

.quality-aligner{
    width: 100%;
}

.qualities{
    display:flex;
    align-items:center;
    justify-content:space-evenly;
    width: 100%;
}

.skills, .projects, .certifications{
    background:rgb(255, 255, 255);
    width:256px;
    height:256px;
    border-radius: 50%;
    margin:1%;
    filter: drop-shadow(5px 0px 15px #c9c9c9);
    display: grid;
    overflow:hidden;
}

.skills img, .projects img, .certifications img {
    width: 50%;
    height:50%;
    align-items: center;
    place-items: center;
    justify-content: center;
    z-index: 0;
    transform: translate(50%,50%);

}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 1);
    opacity:.4;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .2s ease-in-out;
  }

  .left:hover .overlay, .middle:hover .overlay, .right:hover .overlay{
    height: 100%;
    backdrop-filter: blur(5px);
  }

  /* .skills:hover .badge, .projects:hover .badge, .certifications:hover .badge{
    filter:blur(3px);
    transform:translate(50%,50%);
    
  } */
  .left:hover .badge, .middle:hover .badge, .right:hover .badge{
    filter:blur(3px) grayscale(1);
    
  }

  .text {
    color: rgba(255, 255, 255, 1);
    font-weight:700;
    opacity:1;
    font-size: 2.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }

.skills p, .projects p, .certifications p{
    z-index:1;
    height:2.5rem;
    display:grid;
}

.skills p text, .projects p text, .certifications p text{
    font-size:2.5rem;
    text-align: center;
    visibility:hidden;
}
.skills:hover p text, .projects:hover p text, .certifications:hover p text{
    visibility:visible;
}

.skills:hover, .projects:hover, .certifications:hover{
    filter: drop-shadow(5px 0px 20px #a8a8a8);
}

.skills:hover{filter:drop-shadow(0px 0px 15px #deaaff);}
.projects:hover{filter:drop-shadow(0px 0px 15px #ffc6ff);}
.certifications:hover{filter:drop-shadow(0px 0px 15px #caf0f8);}


/*-----------------------------------------------Third Page---------------------------------------------------------------*/



.third-page{
    height:100vh;
    scroll-snap-align: start;
}

.header-text{
    font-size: 3rem;
    margin-top: 4%;
    margin-left:3%;
    position: absolute;

}

.assigner{
    position: absolute;
    display:flex;
    width: 98%;
    height:15vh;
    margin-top: 10%;    
}

.assigner-box{
    background:white;
    border-radius: 10px;
    position: absolute;
    display:flex;
    padding: 4% 1%;
    width: 50%;
    height:15vh;
    justify-content:center;
    align-items: center;
    transform: translateX(50%);
    border:3px solid black;
    transition:0.075s ease-in-out;
}

.assigner-box:hover{
    border:0px solid black;

}
.assigner-box:hover .assigner-image img{
    filter: hue-rotate(90deg)

}

.assigner-img{
    width: 100%;
    display:flex;
}

.assigner-image img{
    padding:5px;
    width: 100%;
    filter: hue-rotate(0deg) contrast(200%);
}
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/


.contents{
    display:grid;
}

.var1{
    background:white;
    width:30%;
    border-radius: 10px;
    height: 10vh;
    margin-top: max(425px, 50vh);
    margin-left: 15%;
    position:absolute;
    display: grid;
    place-items: center;
    border:3px solid black;
    transition:0.075s ease-in-out;
}

.var1:hover{
    border:0px solid black;
}

 .var1 .email{
    display:flex;
    justify-content:space-evenly ;
}
.var1 .email .email-box{
    width:65%;
    display: grid;
    place-items: center;
    filter:contrast(200%);
}
.var1 .email .email-icon{
    display:grid;
    place-items: center;
    border-radius: 10px;
    width:30%;
}

.email-icon img{
    width:50%;
    min-width: 55px;

}
 .var1 .email .email-box .email-img img{
    width:100%;
}
/*----------------------------------------------------------*/

.var2{
    background:white;
    width:15%;
    border-radius: 10px;
    height: 10vh;
    margin-top: max(425px, 50vh);
    margin-left: 70%;
    position:absolute;
    display: grid;
    place-items: center;
    border:3px solid black;
    transition:0.075s ease-in-out;
}

.var2:hover{
    border:0px solid black;
}

 .var2 .cv{
    display:flex;
    justify-content:space-evenly ;
}

.cv-box{
    width: 70%;
    display: grid;
    place-items: center;
    filter:contrast(200%);
}

.cv-icon{
    display:grid;
    place-items: center;
    border-radius: 10px;
    width:150px;
    filter: grayscale(100%);
    transition: 0.075s ease-in-out;
}
.var2:hover .cv-icon{
    filter: grayscale(0%);

}

.cv-img{
    display:grid;
    place-items: center;
}

.var2 .cv .cv-box .cv-img img{
    width:50%;
}
.cv-icon img{
    width: 50%;
}

/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/

.var3{
    background:white;
    width:15%;
    border-radius: 10px;
    height: 10vh;
    margin-top: max(525px,75vh);
    margin-left: 15%;
    position:absolute;
    display: grid;
    place-items: center;
    border:3px solid black;
    transition:0.075s ease-in-out;
    
}

.var3:hover{
    border:0px solid black;
}

.insta{
    display:flex;
    justify-content:space-evenly ;

}
.insta-box{
    width: 100%;
    display: grid;
    place-items: center;
    filter:contrast(200%);
}
 .insta-icon{
    display:grid;
    place-items: center;
    border-radius: 10px;
    filter: grayscale(100%);
    width:85px;
    transition: 0.075s ease-in-out;
}

.var3:hover .insta-icon{
    filter: grayscale(0%);

}

.insta-img{
    display:grid;
    place-items: center;
    width: 50%;
}
.var3 .insta .insta-box .insta-img img{width:150%;}
.insta-icon img{width:70%;}


/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/


.var4{
    background:white;
    width:15%;
    border-radius: 10px;
    height: 10vh;
    margin-top: max(525px,75vh);
    margin-left: 40%;
    position:absolute;
    display: grid;
    place-items: center;
    border:3px solid black;
    transition:0.075s ease-in-out;
}

.var4:hover{
    border:0px solid black;
}

.git{
    display:flex;
    justify-content:space-evenly ;
}
.git-box{
    width: 100%;
    display: grid;
    place-items: center;
    filter:contrast(200%);
}
.git-icon{
    display:grid;
    place-items: center;
    border-radius: 10px;
    filter: contrast(0%);
    transition: 0.075s ease-in-out;
}

.var4:hover .git-icon{
    filter: contrast(100%);
}

.git-img{
    display:grid;
    place-items: center;
    width: 50%;
}
.var4 .git .git-box .git-img img{width:150%;}
.git-icon img{width:73%;}


/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/
/*----------------------------------------------------------*/



.var5{
    background:white;
    width:25%;
    border-radius: 10px;
    height: 10vh;
    margin-top: max(525px,75vh);
    margin-left: 60%;
    position:absolute;
    display: grid;
    place-items: center;
    border:3px solid black;
    transition:0.075s ease-in-out;
}

.var5:hover{
    border:0px solid black;
}

.tweet-in{
    display:flex;
    justify-content:space-evenly ;
}
.tweet-in-box{
    width: 100%;
    display: grid;
    place-items: center;
    filter:contrast(200%);
}
.tweet-in-icon{
    display:grid;
    place-items: center;
    border-radius: 10px;
    filter: grayscale(100%);
    transition: 0.075s ease-in-out;
    width:86.89px;
}

.var5:hover .tweet-in-icon:hover{
    filter: grayscale(0%);
}

.tweet-in-img{
    display:grid;
    place-items: center;
    width: 60%;
}
.var5 .tweet-in .tweet-in-box .tweet-in-img img{
    width:100%;
}
.tweet-in-icon img{width:72.5%;}

}

/*-----------------------------------------------Media Queries---------------------------------------------------------------*/

@media screen and (min-width: 00px) and (max-width: 767px) {

    /*------------------------NAVBAR----------------------------*/
    .navbar-left{
        align-items:left;
        float:left;
        border-radius: 7.5px;
        display:grid; 
        place-items: center;
        padding-left:1vw;
        padding-top:1vh;
    }
    
    .navbar-left li a img{
        border-radius:7.5px;
        width:max(25px,7.5vw);
        height:max(25px,7.5vw);
        height:auto;
    }
    
    .navbar-left:hover{
        background:rgba(0,0,0,0.2);
    }
    
    .navbar-right{
        float:right;
        padding-top:1vh;
    }
    
    .nav-area .navbar-right li{
        padding:0%;
        display:inline-block;
        border:0px solid black;
        border-radius:12px;
        transition:0.075s ease-in-out;
    }
    
    
    .nav-area .navbar-right li:hover{
        border:1px solid black;
        padding: 0 5px;
        border-radius: 12px;
        filter:hue-rotate(180deg);
    }

    .navbar-right li img{
        height:max(25px,7.5vw);
    }
    /*---------------------FIRST PAGE-----------------------------------*/
    .first-page{
        height:100vh;
        width:100%;
        scroll-snap-align:start;
    }

    #sketch{
        height:35vh;
        width:100vw;
    }

    .name-box{
        display:grid;
        place-items:center;
    }

    #mobile-main-img.image{
        width:80vw;
    }

    /*----------------------------SECOND PAGE---------------------------*/

    #my_work.second-page{
        height:100vh;
        scroll-snap-align:start;
        display:grid;
        place-items:center;
    }

    .quality-aligner{
        display:grid;
        place-items:center;
    }
    .qualities{
        display:grid;
        place-items:center;
        gap:10vh;
    }

    .skills, .projects, .certifications{
        background:rgb(255, 255, 255);
        width:33vw;
        height:33vw;
        border-radius: 50%;
        margin:1%;
        filter: drop-shadow(5px 0px 15px #c9c9c9);
        display: grid;
    }
    .skills img, .projects img, .certifications img {
        width: 50%;
        height:50%;
        align-items: center;
        place-items: center;
        justify-content: center;
        z-index: 0;
        transform: translate(50%,50%);
        filter:blur(5px)
    }
    
    .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 1);
        opacity:.4;
        overflow: hidden;
        width: 100%;
        height: 100%;
        transition: .2s ease-in-out;
        border-radius: 50%;
      }

      .skills:hover .badge, .projects:hover .badge, .certifications:hover .badge{
        filter:blur(0px);
    
      }
    
      .text {
        color: rgba(255, 255, 255, 1);
        font-weight:700;
        opacity:1;
        font-size: 1.1rem;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        transition:.7s ease-in-out;
      }
    
      .skills:hover .text, .projects:hover .text, .certifications:hover .text{
          font-size:250rem;
      }

    .skills p, .projects p, .certifications p{
        z-index:1;
        height:1rem;
        display:grid;
    }
    
    .skills p text, .projects p text, .certifications p text{
        font-size:1rem;
        text-align: center;
        visibility:visible;
    }
    
    .skills:hover, .projects:hover, .certifications:hover{
        filter: drop-shadow(5px 0px 20px #a8a8a8);
    }
    
    .skills:hover{filter:drop-shadow(0px 0px 15px #deaaff);}
    .projects:hover{filter:drop-shadow(0px 0px 15px #ffc6ff);}
    .certifications:hover{filter:drop-shadow(0px 0px 15px #caf0f8);}

    /*------------------------THIRD PAGE-------------------------------*/

    #contact_me.third-page{
        height:100vh;
        width:100vw;
        display:grid;
        place-items:center;
    }

    

    .header{
        width:100vw;
        height:max(20px,10vw);
        display:grid;
        place-items:center;
    }

    .header-text{
        font-size: max(1vh,3rem);  
        padding-top:2vh;  
    }
    
    .let-name{
        display:grid;
        place-items:center;
    }

    .assigner{
        display:grid;
        place-content:center;
        width: 98vw;
        height:10vh;
    }
    
    .assigner-box{
        background:white;
        border-radius: 10px;
        display:grid;
        width: 80vw;
        min-width:150px;
        height:10vh;
        place-items:center;
        border:3px solid black;
        transition:0.075s ease-in-out;
    }
    
    .assigner-box:hover{
        border:0px solid black;
    
    }
    .assigner-box:hover .assigner-image img{
        filter: hue-rotate(90deg)
    
    }
    
    .assigner-img{
        width: 100vw;
        min-width:150px;

        display:grid;
        place-items:Center;
    }
    
    .assigner-image img{
        height:9vw;
        filter: hue-rotate(0deg);
    }

    /*-----------------------THIRD PAGE CONTENTS-----------------------*/

    .contents{
        display:grid;
        place-items:center;
    }
    .content-aligner-main{
        
        width:100vw;
        display:block
    }
    .content-aligner{
        display:grid;
        place-content:center;
        place-items:center;
        height:calc(100vh/7);
        width:100vw;
        
    }
    
    .var1{
        background:white;
        width:80vw;
        border-radius: 10px;
        height: 10vh;
        margin-left: auto;
        margin-right:auto;
        display: grid;
        place-items: center;
        border:3px solid black;
        transition:0.075s ease-in-out;
    }
    
    .var1:hover{
        border:0px solid black;
    }
    
     .var1 .email{
        display:flex;
        justify-content:space-evenly ;
    }
    .var1 .email .email-box{
        width:65%;
        display: grid;
        place-items: center;
    }
    .var1 .email .email-icon{
        display:grid;
        place-items: center;
        border-radius: 10px;
        width:30%;
    }

    .email-box{
        width: 70%;
        display: grid;
        place-items: center;
    }
    
    .email-icon{
        display:grid;
        place-items: center;
        border-radius: 10px;
    }

    .email-icon img{
        width:50%;
    }
     .var1 .email .email-box .email-img img{
        width:100%;
    }

    .email-img{
        display:grid;
        place-items: center;
    }

    
    /*----------------------------------------------------------*/
    
    .var2{
        background:white;
        width:80vw;
        border-radius: 10px;
        height: 10vh;
        margin-left: auto;
        margin-right:auto;
        display: grid;
        place-items: center;
        border:3px solid black;
        transition:0.075s ease-in-out;
    }
    
    .var2:hover{
        border:0px solid black;
    }
    
     .var2 .cv{
        display:flex;
        justify-content:space-evenly ;
    }
    
    .cv-box{
        width: 70%;
        display: grid;
        place-items: center;
    }
    
    .cv-icon{
        display:grid;
        place-items: center;
        border-radius: 10px;
        width:150px;
    }
    
    .cv-img{
        display:grid;
        place-items: center;
    }
    
    .var2 .cv .cv-box .cv-img img{
        width:50%;
    }
    .cv-icon img{
        width: 50%;
    }
    
    /*----------------------------------------------------------*/
    /*----------------------------------------------------------*/
    /*----------------------------------------------------------*/
    /*----------------------------------------------------------*/
    
    .var3{
        background:white;
        width:80vw;
        border-radius: 10px;
        height: 10vh;
        margin-left: auto;
        margin-right:auto;
        display: grid;
        place-items: center;
        border:3px solid black;
        transition:0.075s ease-in-out;
        
    }
    
    .var3:hover{
        border:0px solid black;
    }
    
    .insta{
        display:flex;
        justify-content:space-evenly ;
    
    }
    .insta-box{
        width: 100%;
        display: grid;
        place-items: center;
    
    }
     .insta-icon{
        display:grid;
        place-items: center;
        border-radius: 10px;
        /* filter: grayscale(100%); */
        width:90.5px;
        transition: 0.075s ease-in-out;
    }
    
    .insta-img{
        display:grid;
        place-items: center;
        width: 50%;
    }
    .var3 .insta .insta-box .insta-img img{width:100%;}
    .insta-icon img{width:70%;}
    
    
    /*----------------------------------------------------------*/
    /*----------------------------------------------------------*/
    /*----------------------------------------------------------*/
    /*----------------------------------------------------------*/
    
    
    .var4{
        background:white;
        width:80vw;
        border-radius: 10px;
        height: 10vh;
        margin-left: auto;
        margin-right:auto;
        display: grid;
        place-items: center;
        border:3px solid black;
        transition:0.075s ease-in-out;
    }
    
    .var4:hover{
        border:0px solid black;
    }
    
    .git{
        display:flex;
        justify-content:space-evenly ;
    }
    .git-box{
        width: 100%;
        display: grid;
        place-items: center;
    }
    .git-icon{
        display:grid;
        place-items: center;
        border-radius: 10px;
        filter: contrast(100%);
        transition: 0.075s ease-in-out;
        width:90.5px;

    }
    
    .git-img{
        display:grid;
        place-items: center;
        width: 50%;
    }
    .var4 .git .git-box .git-img img{width:100%;}
    .git-icon img{width:65.7%;}
    
    
    /*----------------------------------------------------------*/
    /*----------------------------------------------------------*/
    /*----------------------------------------------------------*/
    /*----------------------------------------------------------*/
    
    
    
    .var5{
        background:white;
        width:80vw;
        border-radius: 10px;
        height: 10vh;
        margin-left: auto;
        margin-right:auto;
        display: grid;
        place-items: center;
        border:3px solid black;
        transition:0.075s ease-in-out;
    }
    
    .var5:hover{
        border:0px solid black;
    }
    
    .tweet-in{
        display:flex;
        justify-content:space-evenly ;
    }
    .tweet-in-box{
        width: 100%;
        display: grid;
        place-items: center;
    }
    .tweet-in-icon{
        display:grid;
        place-items: center;
        border-radius: 10px;
        /* filter: grayscale(100%); */
        transition: 0.075s ease-in-out;
        width:75px;
    }
    
    .tweet-in-img{
        display:grid;
        place-items: center;
        width: 60%;
    }
    .var5 .tweet-in .tweet-in-box .tweet-in-img img{
        width:90%;
    }
    .tweet-in-icon img{width:82.5%;}    


    /*---------------------------END-----------------------------------*/
    
}




@media screen and (max-width: 767px) {

    #main-img{
        display: none !important;
    }
}
@media screen and (min-width: 768px) {
    #mobile-main-img.image{
        display:none !important;
    }

}