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

body{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', sans-serif;
    background-color: hsl(0, 0%, 8%);
}

.profile{
    margin-top: 10%; 
    text-align: center;
    background-color: hsl(0, 0%, 12%); 
    border-radius: 16px; 
    padding: 32px 24px; 
    width: 87%; 
    max-width: 320px; 
}

.profile img {
    width: 96px; 
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 24px; 
    display: block;
    padding-top: 0; 
}

h1 {
    color: hsl(0, 0%, 100%); 
    font-size: 24px; 
    font-weight: 700; 
    margin-bottom: 8px; 
}

h3{
    color: hsl(75, 94%, 57%); 
    font-size: 14px; 
    font-weight: 600; 
    margin-bottom: 24px; 
}

p {
    font-size: 14px; 
    color: hsl(0, 0%, 100%); 
    padding: 0; 
    margin: 0 auto 24px; 
    font-weight: 400; 
    max-width: 90%; 
}

.link{
    background-color: hsl(0, 0%, 20%); 
    border-radius: 8px; 
    margin-bottom: 16px; 
    transition: background-color 0.2s ease; 
    width: 100%; 
    max-width: 300px; 
    margin-left: auto;
    margin-right: auto;
}

.link a {
    color: hsl(0, 0%, 100%); 
    text-decoration: none;
    display: block; 
    padding: 12px 0; 
    font-weight: 400; 
    transition: color 0.2s ease; 
}

.link:hover,
.link:focus-within { 
    background-color: hsl(75, 94%, 57%); 
    cursor: pointer;
}

.link:hover a,
.link:focus-within a { 
    color: hsl(0, 0%, 8%); 
}

.link a:focus {
    outline: none; 
}

.link a:focus-visible {
    outline: 2px solid hsl(75, 94%, 57%); 
    outline-offset: -2px; 
    border-radius: 6px; 
}

/* Responsive adjustments */
@media (min-width: 768px) {
    .profile {
        margin-top: 3%; 
        width: 380px; 
    }
}