body{
    background: hsl(0, 0%, 8%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color:white;
    font-family: 'inter', sans-serif;
    
}
/* main-div */
.main{
    background: hsl(0, 0%, 12%);
    width: 400px;
    height: 600px;
    border: 2px solid transparent;
    padding: 20px;
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    

}
p{
    margin: 5px;
}
h1{
    margin-top:10px;
}
/* profile-img */
.s0{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
/* first-p */
.s1{
    color:hsl(75, 94%, 57%);
}
/* the-profile-div */
.prof a{
    border:5px solid transparent;
    padding:10px;
    width: 250px;
    text-align: center;
    background: hsl(0, 0%, 20%); 
    margin: 15px;
    border-radius: 20px;
    display: block;
    color:white;

}
.prof a:hover{
    background: hsl(75, 94%, 57%);
}
a{
    text-decoration: none;
    color:white;
}


@font-face {
    font-family: 'inter';
    src: url('./assets/fonts/Inter-VariableFont_slnt\,wght.ttf') format('truetype');}

.attribution {  font-size: 11px; text-align: center; }
.attribution a {text-decoration: none; color: hsl(228, 45%, 44%); }