@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&family=Young+Serif&display=swap');

*, *::before,*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 body{
     font-family: "Inter";
     font-size: 14px;
 }
.container{
    width: 100%;
    background: hsl(0, 0%, 8%);
    display: grid;
    min-height:100vh;
    place-items: center;
    
}
.profile-container {
    max-width: 20rem;
    background: hsl(0, 0%, 12%);
    width: 90%;
    padding: 1.2rem;
    border-radius: 10px;
    margin: 50px;
    box-shadow: 3px 3px  hsl(0, 0%, 12%);
}
.card-photo{
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 50%;
    overflow: hidden;
    margin-top: 25px;
    margin-bottom: 20px;
}
.card-photo img{
    width: 100%;
    height: 100%;
}
.card-name, h1 p{
    text-align: center;
}
.card-name h1{
    margin-bottom: 8px;
    color: hsl(0, 0%, 100%);
}
.card-name .para1{
    margin-bottom: 18px;
    color: hsl(75, 94%, 57%);
}
.card-name .para2{
    margin-bottom: 18px;
    color: hsl(0, 0%, 100%);
}
.profile-link ul li{
    list-style-type: none;

}
.profile-link ul li a{
    display: block;
    background: hsl(0, 0%, 20%);
    margin: 15px;
    color: hsl(0, 0%, 100%);
    text-decoration: none;
    text-align: center;
    padding: 10px 5px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    border-radius: 10px;
}
.profile-link a:hover{
    background: hsl(75, 94%, 57%);
}
.attribution{
    color: hsl(0, 0%, 100%);
    margin: 0.3rem;
    padding: 0.2rem;

}
.attribution a{
    color: hsl(75, 94%, 57%)
}