body {
    background-color: #000000;
    margin: 0;
    padding: 0;
}

h1{
    margin: auto;
    padding: 30px;
    color:rgb(255, 255, 255);
    text-align: center;
    font-weight: 900;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
p{
    padding: 5px;
    color: white;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

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

}
/* media quiry for small screen */
@media only screen and (max-width: 700px) and (min-width:100px) {
    .projects{
        display: flex;
        flex-direction: column;
    }
} 
.card{
    width: 200px;
    height: 300px;
    margin: 20px;
    border-radius: 10px;
    background-color: rgb(28, 28, 28);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

}
.card:hover{
    cursor: pointer;
    box-shadow: rgba(206, 206, 223, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
img{
    border-radius: 5px;
    width: 180px;
    height: 150px;
    object-fit: contain;
    margin: 10px;
}
.icon{
    height :30px;
    width:30px;
    border-radius: 10%;
}
.icon:hover{
    height:28px;
    width:28px;

}