@font-face {
    font-family: 'Inter';
    src: url(./assets/fonts/123.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: hsl(0, 0%, 8%);
    margin: 0;
    padding: 0;
}
.profile-card {
    background-color: hsl(0, 0%, 12%);
    color: hsl(0, 0%, 100%);    
    width: 32vh;
    margin: 5vh auto;
    padding: 3vh;
    border-radius: 1vh;
    text-align: center;
    margin: 6vh auto;
}
.avatar {
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    margin-bottom: 1.5vh;
}
.name {
    font-size: 1.5em;
    font-weight: bold;
    font-family: 'Inter', sans-serif;
}
.location {
    color: hsl(75, 94%, 57%);
    margin-bottom: 2vh;
    margin-top:0vh;
}
.bio {
    font-size: 0.9em;
    margin-bottom: 2vh;
}
.social-buttons a {
    display: block;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    padding: 1vh;
    margin: 1.2vh 0;
    border-radius: 0.8vh;
    transition: background-color 0.3s ease;
    font-weight: bold;
}
.social-buttons a:hover{
    background-color: hsl(75, 94%, 57%);
}
.attribution {
    position:fixed;
    top: 98%;
    right: 42%;
    color:darkgray;
}
@media (max-width: 374px) {
    .profile-card{
        width: 90%;
        margin: 20px auto;
        padding: 0.2vh;
    }
    .avatar{
        width: 35%;
        height: auto;
        margin-top: 2vh;
    }
    .social-buttons {
        padding:0.02vh;
        border-radius: 4vh;
    }
    
}