@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@media (min-width : 768px) and (max-width : 1024px){
nav{
    font-size: 20px;
    display : flex;
    justify-content: space-around;
    box-shadow: 10px;
    text-decoration: none;
    padding : 8px 0px;
}
*{
    font-family: 'Montserrat', sans-serif;
    margin: 0px;
    scroll-behavior: smooth;
    /* overflow-x : hidden;*/
} 
header{
    background-color: #0C2E3E ;
    margin : 0px;
    padding : 10px;
}
main{
    color : #F5F5F5;
}
.BG1{
    background-image: url("https://www.perficient.com/-/media/images/insights/strategic-positions/hero-images---desktop-and-mobile/sp_self--managed-first-party_desktop--hero.ashx?h=550&iar=0&w=1800&hash=94C1FD5ABD2BD66CE9152E15B4CE9CD9");
    background-repeat : no-repeat;
    background-size : cover;
    background-position : center;
    height : auto;
    min-height : 50vh;
    padding : 30px 30px;
}
nav a{
    color : white;
    text-decoration: none;
    font-weight: bold;
}
a{
    color : rgb(0, 255, 255);
}
a:hover{
    color : rgb(0, 255, 255);
    text-decoration : none;
    font-weight: bolder;
    text-shadow: 2px 2px 4px cyan;
}
.home{
    padding-top : 20px;
}
.home button
{
    background-color : rgba(0, 255, 255, 0.774);
    color : rgb(4, 7, 153);
    border : 2px solid rgb(2, 40, 43);
    border-radius : 20px;
    margin : auto;
    display : block;
    padding : 10px 20px;
    font-family: 'Montserrat', sans-serif;
}
.home a{
    text-decoration : none;
}
.home button:hover{
    background-color : rgb(0, 255, 255);
    cursor : pointer;
    font-weight: bold;
}
.container > h1{
    display : block;
}
.aboutMe{
    margin-top : 70px;
}
.aboutMe section{
    display : flex;
    font-size : 20px;
    margin-top : 10px;
}
.aboutMe p{
    margin-top : 30px;
}
aside img{
    border-radius : 50%;
    height : 200px;
    width : 200px;
    border : 5px solid rgb(0, 255, 255);
    margin-right: 20px;
}
.skills{
    margin-top : 50px;
}
.skills h4{
    margin-top : 40px;
    margin-bottom: 5px;;
}
.progressBar{
    background: #959595;
    width : 70%;
    height : 20px;
    border-radius: 10px;
    
}
.progressBar div{
    height : 20px;
    border-radius: 10px;
}
.progressBar div span{
    color : black;
    font-weight: bold;
    padding-left : 5px;
}
.html {
    width : 80%;
    background-color: royalblue;
}
.css{
    width : 70%;
    background-color: orange;
}
.js{
    width : 5%;
    background-color: yellow;
}
.java{
    width : 60%;
    background-color: cyan;
    color : black;
}
.cpp{
    width : 40%;
    background-color: purple;
}
.BG2{
     /* background-image: url("https://img.freepik.com/premium-vector/binary-code-black-background_1302-11246.jpg"); */
    background-image : url("BG2.jpg");
    background-repeat : no-repeat;
    background-size : cover;
    background-position : center; 
    /* background-image: url("https://img.freepik.com/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-102998.jpg?semt=ais_hybrid&w=740&q=80");
    background-repeat : no-repeat;
    background-size : cover;
    background-position : center;*/
    background-color: black;
    height : auto;
    min-height : 50vh;
    padding : 30px 30px;
}
.projects{
    display : grid;
    grid-template-columns: 1fr 1fr;
    justify-content : space-between;
    gap : 20px;
    margin : 30px 10px;
    justify-items : center;
}
.projects a{
    margin : 20px 10px;
    display : block;
    width : 100%;
}
.projects img{
    width : 100%;
    height : 95%;
    border : 4px solid cyan;
    border-radius: 15px;
}
.projects img:hover{
    transform : scale(1.05);
    transition : all 0.5s ease-in-out;
    cursor : pointer;
}
.projects iframe
{
    border : 4px solid cyan;
    width : 100%;
    height : 100%;
    aspect-ratio: 4/2;
    border-radius: 15px;
}
.projects iframe:hover{
    transform : scale(1.05);
    transition : all 0.5s ease-in-out;
    cursor : pointer;
}
.BG3{
    /* background-image: url("https://www.shutterstock.com/image-illustration/telephone-envelope-letter-email-symbols-600nw-1784113403.jpg"); */
    background-image : url("BG3.jpg");    
    background-repeat : no-repeat;
    background-size : cover;
    background-position : center;
    background-color: black;
    height : auto;
    min-height : 50vh;
    padding : 30px 30px;
}
.BG3 h2, .BG3 span{
    display : block;
    text-align : center;
    margin-top : 20px; 
}
.BG3 h2{
    font-size: 25px;;
}
.contactMe span{
    font-weight : bold;
}
.contactMe form{
    margin-top: 20px;
    display : flex;
    flex-direction: column;
    margin : auto;
    gap : 20px;
    margin-top : 8%;
    width: 50%;
    justify-content: center;
}
form input, form textarea, form button{
    background: transparent;
    border : 2px solid cyan;
    border-radius: 10px;
    padding : 20px;
    color : white;
}
form button:hover{
    background-color : rgb(0, 255, 255);
    color : black;
    cursor : pointer;
    font-weight: bolder;
}
.links{
    display : flex;
    justify-content: center;   
    gap : 20px;
    margin-top : 20px;
}
.links i{
    background: rgba(0, 255, 255, 0.459);
    border-radius: 50%;
    font-size: 40px;
    width : 60px;
    height : 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.links i:hover{
    background: cyan;
    color : black;
    cursor : pointer;
    transform : scale(1.1);
    transition : all 0.3s ease-in-out;
}
footer{
    background-color: #0A2E40;
    padding: 10px;
    font-size : 20px;
}
.footer{
    color: white;
    font-weight: bold;
    display : flex;
    justify-content : center;
    align-items : center;
}
}