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

.flex {
     display: flex;
     justify-content: center;
     align-items: center;
}
.grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-template-rows: 1fr;
     padding: 5% 0%;
}
.container {
     width: 100%;
}
header {
     position: relative;
}
#navbar {
     position:fixed;
     top: 0;
    right: 0;
height: 65px;
background-color: rgb(250, 96, 96);
justify-content: end;
gap: 5%;
padding-right: 3%;
width: 100%;
}

#navbar a {
     text-decoration: none;
     color: #000;
     text-transform: uppercase;
     font-size: 1.1rem;
padding-bottom: 1px;
transition: all 0.5s ease-in-out;
}
#navbar a:hover{
border-bottom: 2px solid #000;
}
#welcome-section {
height: 100vh;
flex-direction: column;
gap: 2.5%;

}
.welcome-section_heading {
     font-size: 2.6rem;

}
#projects {
     flex-direction: column;
     gap: 5%;
     text-transform: capitalize;

}
.project-tile {
     border-bottom: 2px solid #000;
     padding-bottom: 0.8%;
     font-size: 1.8rem;
}
.cards {
     margin: 2% 10%;
}
.cards img {
     width: 100%;
     height: 100%;
}
.card {
     width: 20rem;
     height: 20rem;
     margin: 10px;
    box-shadow:1px 1px 5px 2px  #000;
}
#profile-link {
     text-decoration: none;
     font-size: 1.3rem;
     padding-bottom: 2%;
border-bottom: 2px solid black;
cursor: pointer;
opacity: 0.7;

}
#profile-link:hover {
     opacity: 1;
}
#contact {
     flex-direction: column;
     height: 15%;
     margin-top: 3rem;
     background-color: gray;
     color: #fff;
     gap: 3%;
 padding: 1% 0%;
 text-align: center;
}
.contact_sec {
     gap: 4%;
     width: 80%;
     text-transform: capitalize;
     margin: 1%;
}
.contact_link {

     text-decoration: none;
     font-size: 1.1rem;
     cursor: pointer;
     color: #fff;
     border-bottom: 2px solid #fff;
}
@media (max-width:500px){
     .container{
          width: 100vh;
     }
     #welcome-section {
          width: 100%;
     }
     .cards {
          grid-template-columns: 1fr;
     }
     .project-tile {
          font-size: 1.3rem;
     } 
}