@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Poppins&family=Roboto&display=swap');



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


}
html {
    scroll-behavior: smooth;
  }


:root{
--mon: 'Montserrat', sans-serif;
--pop: 'Poppins', sans-serif;
--rob: 'Roboto', sans-serif;

}

#main-body{
   background-image:linear-gradient(to left,#084197bb,rgba(34, 31, 31, 0.47)), url("code.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
   height:100vh;
}

body{
    background-color: #f5ebeb;
}

.logo{
    width:45px;
    height:45px;
}
.logo img{
    width:100%;
    height:100%;
    object-fit: cover;
    border-radius: 50%;
    transform: scale(1.4);
}
#main-header{
   
    padding: 18px;
}


#navbar{
    
display: flex;
justify-content: space-between;
align-items: center;
width:80%;
margin:auto;

}
.navbar-list{
    display: flex;
   
}

.navbar_items{
   
    list-style: none;
}

.navbar_items_link{
    text-decoration: none;
    color: #ffffff;
    padding: 0px 14px;
}
.logo h1{
    font-size: 2rem;
    letter-spacing: 2px;
    color: rgb(23, 202, 190);
}

#body-container{
   
    height:80vh;
    

   
}
.body-text{
   height:100%;
   display: flex;
   flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--pop);
    text-align: center;
    color: #fff;

}
.body-text h2{
    font-family: var(--rob);
    letter-spacing: 2px;
    font-size: 2.9rem;
}
.body-text h1{
    font-size:4rem;
    letter-spacing: 2px;
    font-weight: 800;
}


/* --------------About Me Section ------ */
.about-me-heading{
    margin-top:2rem;
}
.about-me-heading h1{
    text-align: center;
    font-size: 3rem;
    color: cadetblue;
    letter-spacing: 2px;

}

.about-me-container{
    width:80%;
    margin:5rem auto;
    display: flex;
    

}
.about-image{
    width:50%;

}
.about-image img{
    width:100%;
    filter: drop-shadow(0px 2px 2px #000000);
    height: 450px;
}
.about-text{
    width:50%;
    margin-top:8rem;
    margin-left:2rem;
}
.about-text p{
    font-size: 16px;
    font-family: var(--pop);
}
.button-about{
    margin-top:1.2rem;
}
.btn-about{
    background-color: blueviolet;
    padding: 16px 20px;
    border:none;
    outline:none;
    cursor: pointer;
}

/* ---PROJECTS */
.project-heading{
    margin-top:2rem;
}
.project-heading h1{
    text-align: center;
    font-size: 3rem;
    color: cadetblue;
    letter-spacing: 2px;

}
.language{
    text-align: center;
    margin:2rem 0rem;
}
.btn-lang{
    background-color: blueviolet;
    padding: 16px 20px;
    border:none;
    outline:none;
    cursor: pointer;
    border-radius: 10px;
}
.btn-lang-2{
    margin-left:18px;
}

.project-javascript-container,.project-java-container{
    display: flex;
    justify-content: space-between;
    width:90%;
    margin:4rem auto;
}
.projects{
    width:30%;
}

.project-image{
    width:100%;
    height:300px;
    background-color: red;
}
.project-image img{
    width:100%;
    height: 100%;
    
}
.project-text {
    margin:8px;
    color: rgb(50, 9, 216);
    text-align: center;
}
.project-text p{
    font-size:20px;
    
    letter-spacing:1px;
}
.source-code{
    margin-top:16px;
    display: inline-block;
    text-decoration: none;
    background-color: blueviolet;
    padding: 16px 20px;
 color: #fff;
    outline:none;
    cursor: pointer;
    border-radius: 8px;
}


.project-java{
    display: none;
}
/* --------Resume ---- */
#resume-heading{
    margin-top:2rem;
}
.resume-heading h1{
    text-align: center;
    font-size: 3rem;
    color: cadetblue;
    letter-spacing: 2px;

}


#resume-pdf{
    margin:3rem 0rem;
}


.resume-image{
    width:80%;
    height:100vh;
  
    margin:auto;

}
#resume-pdf{
    width:100%;
    height:100%;
}


#contact{
    background-color: #000;
    margin-top: 5rem;
    color: #fff;
    font-family: var(--pop);
    padding: 16px;
}
.footer{
    display:flex;
    width:80%;
    margin:auto;
    align-items:center;
    justify-content: space-between;
   
}
.contact{
    display:flex;
}


#mobile-design-navbar{
    display: none;


}
#bar{
    display: none;
}


/* ------------Responsive design----- */



@media(max-width:720px){

    #main-header{
        display: none;
    }

    #main-body{
        background-image:linear-gradient(to left,#084197bb,rgba(34, 31, 31, 0.47)), url("code.jpeg");
       background-repeat: no-repeat;
       background-size: cover;
       background-position: center;
        height:80vh;
     }
    #mobile-design-navbar{
     display: block;
        position: absolute;
         top:0;
         left:0;
         width:0px;
         overflow: hidden;
         transition: width 0.3s linear;
         height:100vh;
         z-index: 100;
         background-color: cadetblue;
         
       
     }
     #bar{
        display: block;
     }
     
     .logo-mobile{
         display: flex;
         justify-content: center;
         align-items: center;
         width:50px;
         height:50px;
         margin-top:3rem;
         position: relative;
         left:40%;
     
     }
     
     .logo-mobile img{
         width:100%;
         height:100%;
         object-fit: cover;
         border-radius: 50%;
        
     }
     .navbar-text-mobile{
         text-align: center;
         margin-top:3rem;
     }
     .navbar-list-mobile a{
         display: block;
         margin-top:18px;
     }

     #bar{
        position: absolute;
        top:20px;
        right:20px;
        background-color: black;
        padding: 8px;
        cursor: pointer;
     }
     .bar{
        width:30px;
        height:2px;
        border-radius: 2px;
        margin:4px;
        background-color: #f2eaea;
     
     }

     .body-text h2{
        font-family: var(--rob);
        letter-spacing: 2px;
        font-size: 1.8rem;
    }
    .body-text h1{
        font-size:2rem;
        letter-spacing: 2px;
        font-weight: 800;
    }
    .about-me-container{
        width:90%;
        margin:5rem auto;
        display: flex;
        flex-direction: column;
        
    
    }
    .about-image{
        width:100%;
    
    }
    .about-image img{
        width:100%;
        filter: drop-shadow(0px 2px 2px #000000);
        height: 300px;
        
    }
    .about-text{
        width:100%;
        margin-top:2rem;
        margin-left:0rem;
    }

    .project-javascript-container,.project-java-container{
        display: flex;
       flex-direction: column;

       margin-top:3rem;
    }
    .projects{
        width:100%;
        margin: 18px 0px;
    }
    .project-image img{
       
        filter: drop-shadow(0px 2px 2px #000000);
    }


    #resume-heading{
        margin-top:2rem;
    }
    .resume-heading h1{
        text-align: center;
        font-size: 3rem;
        color: cadetblue;
        letter-spacing: 2px;
    
    }
    
    
    #resume-pdf{
        margin:3rem 0rem;
        
    }
    
    
    .resume-image{
        width:90%;
        height:70vh;
        
        margin:auto;
    
    }
    #resume-pdf{
        width:100%;
        height:100%;
    }

    #contact{
        background-color: #000;
        margin-top: 5rem;
        color: #fff;
        font-family: var(--pop);
        padding: 16px;
        font-size:8px;
    }
    .footer{
        display:flex;
        width:98%;
        margin:auto;
        align-items:center;
        justify-content: space-between;
       
    }
    .contact{
        display:flex;
    }
    
    

}