index1.1.css

@import url("https://fonts.google.com/specimen/Kumbh+Sans");
*{
    box-sizing: border-box;
    font-family: "Kumbh Sans",sans-serif;
    
    
}
html{
    width:1440;
    height:100%;
}
body{
    width:100%;
    height:100%;
    background-color:hsl(185, 75%, 39%);
    background-image: url("images/bg-pattern-top.svg"),url("images/bg-pattern-bottom.svg");
    background-position-x: -121%,194%;
    background-position-y: -555px,305px;
    background-repeat: no-repeat;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;
    align-content:center;
    
}

.card{
    
    height:320px;
    width:310px;
    background-color:#fff;
    border:none;
    border-radius: 17px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-content:center;
    position:relative;
    top:10%; 
    box-shadow: 5px 12px 300px  hsl(227, 10%, 46%) ;
     
}


.cardbackground{
    width:100%;
    height:38%;
    Border:none;
    border-top-left-radius: inherit;
    border-top-right-radius:inherit;
    background-image: url("images/bg-pattern-card.svg");
    background-position: center;
    background-size: cover;
    position: absolute;
    top:0;
}
.pictureframe{
    position: absolute;
    left:104px;
    bottom:150px;
    background-image: url("images/image-victor.jpg");
    width:96px;
    height:96px;
    border: solid #fff 4px;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.name{
    position:absolute;
    top:172px;
    left: 90px;
    

    
}
.darker{
    color:hsl(229, 23%, 23%);
    text-align:center;
    font-weight:700;
    font-size:18px;
    


    
}
.number,.grey{
    color:hsl(0, 0%, 59%);
    
    
}

.number{
    position:absolute;
    top:176px;
    right: 85px;
    font-weight:400px;
}
.city{
    position:absolute;
    top:204px;
    left:130px;
    font-size:12px;
}
hr {
    
    height: 1px;
    border: 0 hsl(0, 0%, 59%);border-top: 1px solid hsla(0, 0%, 59%, 0.288); 
    margin: 1em 0; padding: 0; 
    position:relative;
    top:227px;
    
}
.row{
        display:flex;
        height:60px;
        position:relative;
        top:100px;
        margin:auto;
        padding:0;
         
    }
.col1,.col2,.col3{
    padding:0 20px;
    
    display:flex;
    flex-direction: column;
    justify-content:center;
    
    
}
.details{
    
    font-size: 10px;
    letter-spacing: 1px;
    margin: -12px 0 0 0;
    
    
}
.offset{
    text-indent:8px;
    
}

.attribution { 
    position:relative;
    top:30px;
    font-size: 11px; text-align: center;
     }

.attribution a { color: hsl(228, 45%, 44%); }