@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap');


:root{
    --dark-cyan : hsl(185, 75%, 39%);
    --Very-dark-desaturated-blue: hsl(229, 23%, 23%);
    --Dark-grayish-blue: hsl(227, 10%, 46%);
    --Dark-gray: hsl(0, 0%, 59%);

    /* Font Weights*/
    --fw-400  : 400;
    --fw-700 : 700;
}
 /* Mobile First */

*{
    margin : 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Kumbh Sans', sans-serif;
}
body{
    background-color: var(--dark-cyan);
    background-size: cover;
}

.bg{
    display: flex;
    position: fixed;
    z-index: -2
}
.bg :first-child{
    position: fixed;
    bottom: 15rem;
    right: 12rem;
    height: 40rem;
    width: auto;
    overflow: hidden;
}
.bg :last-child{
    position: fixed;
    top: 17rem;
    left: 10rem;
    height: 40rem;
    width: auto;
}
.wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    height : 100vh;
    width: 100vw;
}
.container{
    background-color: white;
    max-width: 20.375rem;
    min-height: 23.375rem;
    border-radius: 1.2rem;
}
.container .pattern-top{
    height: 8.75rem;
    width: 20.375rem;
    background-image: url(images/bg-pattern-card.svg);
    border-radius: 1.2rem 1.2rem 0rem 0rem;
}
.container .profile{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.container .profile .image{
    text-align: center;
    margin-top: -3.5rem;
}
.container .profile .image img{
    border-radius: 5rem;
    border: 0.313rem solid white;
}
.container .profile .name{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
}
.container .profile .name h2{
    font-size: 1.2rem;
    color: var(--Very-dark-desaturated-blue);
    font-weight: var(--fw-700);
}
.container .profile .name span{
    color: var(--Dark-gray);
    margin-left: 0.688rem;
    margin-top: 0.1rem;
    font-size: 1.25rem;
}
.container .profile .city{
    margin-top: 0.938rem;
}
.container .profile .city span{
    color: var(--Dark-gray);
}
.container .bottom-info{
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    height: 100%;
    border-top: 0.1px solid var(--Dark-gray);
    margin-top: 1.75rem;
    padding-top: 1rem;
    padding-bottom: 1.688rem;
}
.container .bottom-info .followers , .likes , .photos{
    display: flex;
    flex-direction: column;
    text-align: center;
    color: var(--Dark-gray);
    font-size: 0.813rem;
    letter-spacing: 0.13rem;
    margin-top: 0.625rem;
}
.container .bottom-info h2{
    color: var(--Very-dark-desaturated-blue);
    font-size: 1.2rem;
}
.container .bottom-info span{
    margin-top: 0.4rem;
}


/*For Mobiles With Small Screen*/
@media only screen and (min-width: 320px) and (max-width: 375px){
    .container{
        max-width: 17rem;
    }
    .pattern-top{
        max-width: 100%;
    }
}
/*For Mobiles With Large Sized Screen*/
@media only screen and (min-width:376px) and (max-width:425px){
    .container{
        min-width: 22rem;
        min-height: 20rem;
    }
    .container .pattern-top{
        min-height: 8.75rem;
        min-width: 22rem;
    }
    .bg :first-child{
        bottom: 15rem;
        right: 12rem;
    }
    .bg :last-child{
        top: 17rem;
        left: 10rem;
    }
}

/*For Tablets*/
@media only screen and (min-width:426px) and (max-width:767px){
    .container{
        width: 30rem;
    }
    .pattern-top{

    }
    .bg :first-child{
        bottom: 15rem;
        right: 15rem;   
    }
    .bg :last-child{
        top: 17rem;
        left: 15rem;
    }
} 


/*For Desktops*/
@media only screen and (min-width:768px) and (max-width:1023px){
    
    .bg :first-child{
        bottom: 15rem;
        right: 25rem;
    }
    .bg :last-child{
        top: 15rem;
        left: 25rem;
    }
    
} 

@media only screen and (min-width: 1024px) and (max-width: 1439px){
    .container{
        min-width: 22rem;
    }
    .pattern-top{
        min-width: 22rem;
    }
    .bg :first-child{
        bottom: 15rem;
        right: 35rem;
    }
    .bg :last-child{
        top: 15rem;
        left: 35rem;
    }
}

@media only screen and (min-width: 1440px){
    .container{
        min-width: 25rem;
    }
    .pattern-top{
        min-width: 25rem;
    }
    .bg :first-child{
        bottom: 20rem;
        right: 45rem;
        width: 70rem;
        height: auto;
    }
    .bg :last-child{
        top: 25rem;
        left: 40rem;
        width: 70rem;
        height: auto;
    }
}