@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800&display=swap');


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

li, a{
    font-family: "Nunito Sans";
    font-weight: 400;
    font-size: 16px;
    color: #DFF6FF;
    text-decoration: none;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10%;
    background-color: #47B5FFB2;
    height: 30px;
    width: 100%;
    position: fixed;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

html{
    scroll-behavior: smooth;
}


.logo {
    cursor: pointer;
    width: 252px;
    height: 40px;
    margin-top: 10px;
}
.nav_links {
    list-style: none;
}

.nav_links li {
    display: inline-block;
    padding: 0px 20px;
}

.nav_links li a {
    transition: all 0.3s ease 0s;
    padding: 15px;
}

.nav_links li a:hover {
    color: #06283D;
}
.body{
    background-color: #06283D;
    
}

.mid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  height: 550px;
 
  width: auto;

  
}

.me{
   height: 300px;
    width: 300px;
    margin-right: 30px;
    margin-top: 20px; 
    
}

.first_text{
    display: flex;
    flex-direction: column;
    align-items: left;
    
}

.my_name{
    font-family: "Nunito Sans";
    color: #DFF6FF;
    font-size: 80px;
}

.bio{
    font-family: "Nunito Sans";
    color: #DFF6FF;
    font-size: 24px;
    gap: 1px;
    line-height: 36px;
    font-weight: 200;
}

.button{color: #06283D;
    background-color: #47B5FF;
    width: 204px;
    height: 55px;
    left: 485px;
    font-family: "Nunito Sans";
    
    font-weight: 500px;
    font-size: 24px;
    border-radius: 10px;
border: none;}
    .button:hover{ opacity: 50%;
        
    }

    .button2 { box-sizing: border-box;
        color: #47B5FF;
  
        height: 55px;
        width: 294px;
        left: 720px;
      /*  top: 518px;  */
        background-color: #06283D;
    border: 3px;
   
    border: solid;
    border-radius: 10px;
    font-style: normal;
    font-weight: 500px;
    font-size: 24px;
    gap: 10px;
    font-family: "Nunito Sans";
    }

    .button2:hover{background-color: #47B5FF; color: #06283D;}

    .buttondiv {
        margin-top: 50px;
        display: flex;
        gap: 30px;
        
    }

    .my-work{
        display: flex;
        align-content: center;
        justify-content: center;
        font-family: "Nunito Sans";
        color: #DFF6FF;
        width: auto;
        height: 50px;
      
        gap: 14px;
        
    }
   .recentwork{
    flex-direction: column;
    height: 3px;
    
    
   }

   .arrow{
    display: flex;
    align-content: center;
    justify-content: center;
   }


   .projects{
    display: flex;
    flex-direction: row;
    align-items: center;
justify-content: center;
gap: 30px;
height: 700px;
   }

   .orilum{
    width: 568px;
    height: 485px;
 
   }
.orilum :hover{
    transform: scale(1.5);
}
   .assigncare{
    width: 568px;
    height: 485px;
   }

   .ilc{
    width: 568px;
    height: 485px;
 
   }

   .cloudplexo{
    display: block;
    width: 568px;
    height: 485px;
    z-index:999;
 
   }


   .projects2{
    display: flex;
    flex-direction: row;
    align-items: center;
justify-content: center;
gap: 30px;
height: 380px;

   }

   .worked{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-direction: column;
    margin-top: 120px;
   }

   .wok{
    width: 926px;
    height: 130px;
   }

   .wf{
    color: #DFF6FF;
    font-family: "Nunito Sans";
    font-weight: 500;
    font-size: 28px;
   }

.learning{
    display: flex;
    flex-direction: column;
    justify-content: left;
    justify-items: left;
   margin-left: 200px; 
    margin-top: 90px;
   
}

   .currently_learning{
    font-size: 80px;
    font-family: "Nunito Sans";
    color: #DFF6FF;
    margin-bottom: 20px;
}

.lists{
    list-style-type: none;
   font-family: "Nunito Sans";
   margin-bottom: 20px;
}

/*.loving{
    font-size: 80px;
    font-family: Metropolis;src: url(Metropolis-Bold.otf);
    color: #E6F4F1;
    margin-bottom: 20px;
}

.love{
    display: flex;
    justify-content: end;
    flex-direction: column;
    text-align: right;
    padding-right: 200px;
}*/

.contactme{
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    justify-content: center;
    align-content: center;
    margin-left: 200px;

}

.hi{
    color: #06283D;
    font-family: "Nunito Sans";
    font-size: 80px;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #47B5FF;
    margin-top: 40px;

}

.about_me{
    font-size: 24px;
    font-family: "Nunito Sans";
    color: #DFF6FF;
    margin-top: 10px;
 padding-right: 60px;}


 .say_hello{
background-color: #47B5FF;
color: #06283D;
width: 204px;
height: 55px;
left: 302px;
border-radius: 10px;
border: none;

font-family: "Nunito Sans";
font-size: 24px;


 }
.say_hello:hover{opacity: 50%;}
.button_fin{
    padding-top: 20px;
    padding-bottom: 180px;
}

.footer{
    display: flex;
    font-family: "Nunito Sans";
    color: #DFF6FF;
    justify-content: center;
    justify-items: center;
    height: 50px;
}


@media only screen and (max-width: 700px)
{
    .me{
        display:none;
    }

.first_text{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    
   /* margin-left: -80px;
    margin-right: auto; */
    
   
   
}

.mid{
   display: flex;
    justify-content: center;
    align-content: center;
    align-items: left;
    justify-items: left;
   flex-direction: column;
  /* border: 2px red solid; */
   width: auto;
   
 
    
}

    .bio{
        font-size: 18px;
        width: 350px;
        /*margin-left: 2px; */
        text-align: center;
        margin-top: 20px;

        
       
    }
    .br{
        display: none;
    }

    .my_name{
        font-size: 40px;
       
    
    }

    .buttondiv{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
.button{

    font-size: 18px;
    font-size: 18px;
    width: 339px;
    height: 47.14px;
   

}
    .button2{
        
        font-size: 18px;
        width: 339px;
        height: 47.14px;
        margin-top: 5%;
        
    }

    .buttondiv{
        gap: 0;
        
    }

    .projects{
        flex-direction: column;
      
    }

    .orilum{
        width: 337.79px;
        height: 288.41px;

    }

    .assigncare{
        width: 337.79px;
        height: 288.41px;
    }

    .projects2{
        flex-direction: column;
        height: 600px;
    }

    .cloudplexo{
        width: 337.79px;
        height: 288.41px;
    }
    .ilc{
        width: 337.79px;
        height: 288.41px;
    }

    .wok{
        width: 345.5px;
        height: 48.5px;
    }

    .learning{
        margin-left: 50px;
        
    }
    .currently_learning{
        width: 208px;
        font-size: 40px;
        margin-left: 2px;
         
        
        
    }

    .hi{
        font-size: 40px;
        -webkit-text-stroke-width: 1px;
    }

    .contactme{
        margin-left: 50px;
       
    }

    .about_me{
        font-size: 18px;
    }

/*.nav_links{
    display: none;
}*/
.aboutmine{
    display:none
}

.working{
    display: none;
}
header{
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
}

.logo{
    margin-left: 30px;
        margin-top: 10px;
}

.resume{
    margin-right: 75px;
}

.arrow{
    display: none;
}
.my-work{
    font-size: 18px;
}



}