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

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

    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "Kumbh Sans";

    background-color: var(--dark-cyan);
    background-image: url("./images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg");
    background-position: bottom 500px right 180px, top 450px left 200px;
    background-repeat: no-repeat;
    background-size: 500px;
}
.card{
    max-width: 300px;
    display: flex;
    flex-direction: column;
}
.cover {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.photo {
    border-radius: 50%;
    border: 6px solid white;
    margin-top: -55px;
}

.content{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
}
.personal{
    margin-top: 25px;
}
.name{
    display: inline;
    font-weight: bold;
    font-size: 18px;
    margin-right: 5px;
}
.age {
    color: var(--dark-gray)
}
.city{
    margin-top: 10px;
    margin-bottom: 30px;
    color: var(--dark-gray);
}
.row{
    border-top: 1px solid rgb(189, 189, 189);
}
.information{
    display: flex;
    background-color: white;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    justify-content: space-around;
}
.info-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px;
}

.numbers{
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 5px;
}

.description{
    color:var(--dark-gray);
    font-size: 11px;
    letter-spacing: 2px;
}

@media only screen and (min-width: 375px){
    :root{
        background-position: bottom 250px right 600px, top 400px left 500px;
        background-size: 1000px;
    }
    .card{
        min-width: 380px;
    }

    .content{
        padding: 0px 100px 0px 100px;
    }
    .row{
        border-top: 1px solid hsl(0, 0%, 85%);
    }
}