@import url("mediaq.css");

*{
    scroll-behavior: smooth;
    padding:0;
    box-sizing: border box;
    
}

body{
    margin:0;
    padding:0;
    box-sizing:border-box;
   
   
}
header{
    display:flex;
    justify-content: space-between;
    background-color:black;
    padding:10px;
    align-items:center;
    position:sticky;
    top:0;
    color: white;
    

}

nav ul{
    list-style: none;
    display: flex;
    
   
}
nav ul li{
    margin:0 30px;
    
    
}
nav ul li a{
    text-decoration: none;
    color:white;
    
}
.links:hover{
    color:#ffd700;
    text-decoration:underline;
}
div{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.hero{
    padding:80px;
    /*background-image:url("../images/yellow.jpg"); */
    background-color:whitesmoke;
    background-size: cover;
    background-position:center ;
    background-repeat: no-repeat;
    height:400px;
    text-align:left;
    justify-content: space-between;
    display:flex;
    
}
  
.btn{
    height:50px;
    background-color:black;
    border-radius:20px;
    object-fit: cover;
    color:white;
    margin-top:50px;
    width:150px;
    
   
    
    
}
.hed{
    margin-top:100px;
    text-align:left;
    font-size:30px;
    color:black
    

}

.hed2{
    font-size: 30px;
}


.hero-par{
    color:black;
    font-size: 2rem;
}
    
.me img{
    justify-content: space-between;
    border-radius:50px;
    image-orientation: right;
    object-fit:cover;
    height:475px;
    width: fix-content;
    aspect-ratio:1 ;
    object-position: center;
    text-align:justify;
    display:flex;
 
    
    
}
.hero div{
    font-weight: normal;
    all:unset;
    
}
.about{
    padding:20px;
   font-size: x-large;
   background-color: white;
   text-align: center;
}


.exper{
    all:unset;
    justify-content: space-between;
    display: flex;
    text-align:justify
}
#experience{
    text-orientation: right;
}
.services{
    display:flex;
    padding:20px;
    gap:2px;
    flex-direction:column;
    background-color: white;
    font-size: 20px;
    
   
}

.projects{
    text-align: center;
    
}
.cards{
    all:unset;
    background:whitesmoke;
    border-radius:20px;
    padding:10px;
   justify-content: space-between;
    width:60%;
    height:60%;  
    margin-top:20px;
    font-size: 20px;

}
.interests{
    font-size: x-large;
    background-color: white;
    padding:10px;
    object-fit:cover ;
    text-align: center;
}
.contact{
    font-size: x-large;
    background-color: white;
    padding:10px;
    text-align:center;
   
}
.footer{
    background-color:black;
    text-align: center;
    padding: 1px;
    color:white;
}
footer a img{
    margin:10px;
    
}

input{
    padding:5px;
    width: 300px;
    height:50px;
    background-color: beige;
    border-radius: 20px;
}
textarea{
    margin-top:5px;
    height:60px;
    width:400px;
    background-color: beige;
    border-radius: 20px; 
    text-align: left;
    padding:6px;

}
.btn1{
    width:200px;
    height:40px;
    background-color:#ffd700;; 
    align-items: center;
    border-radius: 20px;
    color:black;

}

.download{
    border-radius: 8px;
    padding: 12px 24px;
    display: inline-block;
    background-color:#ffd700;
    text-decoration: none;
    margin-top: 15px;
    
}

.download:hover{
    background-color: black;
    color:white;
}

.github{
    border-radius: 8px;
    padding: 12px 24px;
    display: inline-block;
    background-color:#ffd700;
    text-decoration: none;
    margin-top: 15px;
    color:purple
}

.github:hover{
     background-color: black;
     color:white;
}