body{
    background: #5e9cb5;
}
.container{
    height: 150vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}
.pfp{
    height: 200px;
    border-radius: 3rem;
}
h2, h3{
    width: 75%;
}

.projects{
    width: 70%;
    height: 21%;
    display: flex;
    justify-content: space-between;
    text-align: justify;
}
.project1, .project2, .project3{
    border: 2px solid black;
    background-color: rgb(41, 40, 41);
    width: 220px;
    font-size: 13px;
    text-align: justify;
}
a{
    text-decoration: none;
    color: orange;
}
.footer{
    font-size: 2.7rem;
}
a:hover{
    color: green;
}
a:active{
    color: purple;
}
.text:hover{
    color: yellow;
}
.text{
    color: blue;
}
a{
    color: red;
    display: flex;
    justify-content: center;
}
h1:hover{
    color: yellow;
}
h1{
    color: #FFFDB5;
    font-size: 18px;
}
h2:hover{
    color: yellow;
}
h2{
    color: #6FDCE3;
}
h3:hover{
    color: orange;
}
h3{
    color: #5C88C4;
}
footer:hover{
    color :brown;
}
.footer{
    background-color: aquamarine;
    color:#5C2FC2;
    background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
    width: 100%;
    display: flex;
    justify-content: center;
}
@media only screen and (max-width: 500px) {
    .container{
        display: flex;
        flex-direction: column;
    }
    .projects{
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .project{
        width: 100%;
    }
}
.header{
    background: #545be3;
    background: linear-gradient(0deg, rgba(84, 91, 227, 1) 0%, rgba(253, 187, 45, 1) 100%);
    display: flex;
    justify-content: space-around;
    width: 100%;
}