.container{
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #1F221B;
    min-height: 100vh;
}

.profilepic{
    width: 50%;
    align-self: flex-end;
}

.img {
    max-width: 70%;
    height: auto;
}

.info{
    width: 50%;
    padding: 5%;
    text-align: end;
}

.hi{
    font-size: x-large;
    color: #D7D7D7;
}

.name{
    font-size: xxx-large;
    color: #D7D7D7;
}

.about{
    font-size: medium;
    color: #D7D7D7;
    margin-left: 35%;
}

.socialLink{
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 10px;
}

.icon{
    width: 45px;
    padding: 8px;
    border: 2px solid #E6AF2E;
    border-radius: 50%;
    margin: 5px;
    transition: background-color 0.3s ease;
}

.icon a{
    transition: filter 0.3s ease;
}

.icon:hover{
    background-color: #E6AF2E;
    border: 2px solid #D7D7D7;
}

.icon a:hover{
    filter: grayscale(100%) brightness(40%) contrast(170%) sepia(10%) hue-rotate(180deg);
}

@media(max-width: 450px){
    .container{
        flex-direction: column;
        justify-content: end;
    }

    .socialLink{
        justify-content: center;
    }

    .icon{
        width: 35px;
        padding: 4px;
    }

    .info{
        width: 100%;
        padding: 10%;
    }
    
    .profilepic{
        width: 100%;
    }

    .img{
        max-width: 100%;
    }

    .hi{
        font-size: medium;
    }

    .name{
        font-size: xx-large;
    }
    
    .about{
        font-size: small;
        margin: 0%;
    }
}

@media(max-width: 950px ) and (min-width: 450px) {
    .icon{
        width: 40px;
        padding: 7px;
    }

    .img{
        max-width: 100%;
        height: auto;
    }

    .hi{
        font-size: large;
    }
    
    .name{
        font-size: xx-large;
    }
    
    .about{
        font-size: smaller;
        margin: 0%;
    }
}