FrankenBuilds

                            
                                    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    @font-face {
        font-family: 'Poppins';
        src: url('Poppins');
    }
    
    .container{
        width: 100wv;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    
        background-color: #2e2f2c;
    }
    
        .profile-card{
            position: relative;
            width: 22vw;
            height: 80vh;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            box-shadow: 2px 4px 8px #1e1a1aa9;
    
    
            background-color: #d6d6d6;
        }
    
            #header-banner{
                flex: 30%;
                background-image: url(../Header_Banner.jpg);
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                border-radius: 20px 20px 0 0;
            }
    
            #profile-img{
                position: absolute;
                width: 120px;
                height: 120px;
                background-color: rgb(36, 36, 36);
                padding: 0.3rem;
                border-radius: 50%;
                top: 20%;
                left: 34%;
                box-shadow: 2px 2px 10px #1e1a1a62;
            }
    
            .info-sec{
                flex: 70%;
                padding-top: 2rem;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
                color: #1e1a1a;
            }
        
                .info-sec h1{
                    font-size: 2rem;
                    font-family: "Poppins";
                }
    
                .info-sec h3{
                    margin-top: -2rem;
                    font-size: 0.9rem;
                    font-family: "Poppins";
                    font-weight: 400;
                }
    
                .follow-sec{
                    display: flex;
                    width: 80%;
                }
    
                    .followers{
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }
    
                    .following{
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }
    
                        .followers h2,
                        .following h2{
                            color: teal;
                            font-size: 2rem;
                            font-family: "Poppins";
                        }
    
                        .followers p,
                        .following p{
                            font-size: 0.8rem;
                            font-family: "Poppins";
                            font-weight: 400;
                        }
    
            #follow{
                text-decoration: none;
                background-color: #8cb670;
                padding: 0.6rem 7.5rem;
                border-radius: 30px;
                color: white;
                font-size: 1.1rem;
                font-family: "Poppins";
                font-weight: 400;
            }
    
            .about-sec{
                margin: 0 2rem;
                font-size: 0.8rem;
                font-family: "Poppins";
                font-weight: 400;
            }
    
                .soc-links{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-around;
                    align-items: center;
                    padding-top: 1.2rem;
                }
    
                    .soc-links img{
                        width: 30px;
                        height: 30px;
                    }
                    
    
    /* Media Queries*/
    @media only screen and (max-width: 1024px) {
        .profile-card{
            width: 40vw;
        }
    }
    
    @media only screen and (max-width: 700px) {
        .profile-card{
            width: 90%;
        }
    
        #profile-img{
            left: 32%;
        }
    }
    
    @media only screen and (max-width: 320px) {
        #follow{
            padding: 0.6rem 6rem;
            font-size: 1rem;
        }
    
        #profile-img{
            left: 28%;
        }
    }