style.css

body{
    font-family:segoe ui;
    background-color: #7733ff;
    margin:0px;
    padding:0px;
}
.main-container{
    max-width:700px;
    margin:auto;
}
.card{
    height:auto;
    max-width:700px;
    background-color: #ffffff;
    margin:auto;
    border-radius: 10px;
    justify-content: center;
    align-items:center;
    text-align: center;
    padding:20px;
    box-shadow:0px 2px 1px #7733ff;
    margin-bottom:20px;

}
.container{
    background-color: #7733ff;
    
}
.profile{
    height:150px;
    width:150px;
    border-radius:75px
}

h4{margin:0;}

a{
    text-decoration: none;
    color:#f2f2f2;
}
ul{text-align:center;
}
nav{margin-top:40px;}
li{display:inline;
padding:8px;
font-size:22px;
}



.contact-form{
    display:flex;
    flex-direction:column;
}

input{
border-radius:4px;
border:none;
background-color:#f2f2f2;
margin:5px;
padding:8px;
width:400px;
font-size:14px;
}
button{
    color:#ffffff;
    background-color: #7733ff;
    border:none;
    padding:10px;
    border-radius:4px;
    font-size:16px;

}

i.fa{
    opacity:0.8;
    font-size:35px;
    margin:5px;
}

.skill{
    color:#ffffff;
    background-color:#7733ff;
    opacity:0.6;
    padding:4px;
    border-radius:5px;
    width:auto;;
    margin:5px;


}

.skills{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: center;
}

.projects{
    display:flex;
    flex-direction:row;
}
.project{
    height:auto;
    background-color: #f2f2f2;
    margin:10px;
    width:auto;
    padding:15px;
    display:flex;
    flex-direction:column;

}
footer{
    color:#ffffff;
    background-color: #1d1d1d;
    text-align :center;
    padding:20px;
}

.title{font-size:20px;}
@media screen and (max-width:600px){
    .projects{display:flex;
        flex-direction:column;
    }
    input{width:200px;}
    nav{margin-top:20px;}
    .card{margin:10px;}
}