:root{
    --bg-color: black;
    --offblack-bg: hsl(0, 0%, 8%);
    --dark-grey: hsl(0, 0%, 12%);
    --grey: hsl(0, 0%, 20%); 
    --white: hsl(0, 0%, 100%); 
    --green: hsl(75, 94%, 57%);
}

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

*{
    margin: 0;
    padding: 0;
}
.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color);
    height: 100vh;
}

.container-box{
    height: 85%;
    width: 375px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--offblack-bg);
    border-radius: 15px;
}

.profile-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 15px auto;
}

.dp{
    width: 100px;
    height: 100px;
}

.dp-image{
    width: 100px;
    height: 100px;
    border-radius: 60px;
}

.info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 24px auto;
    font-family: Inter, system-ui;
}

p{
    color: var(--white);
}

.name{
    font-size: 23.5px;
    font-weight: 700;
}
.location{
    font-family: Inter, system-ui;
    color: var(--green);
    font-size: 14px;
    margin: 8px auto 0px auto;
}
.profile-desc{
    margin: 0px auto 10px auto;
    display: flex;
    justify-content: center;
}
.bio{
    font-family: Inter, system-ui;
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
}

.button .button-socials{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    text-decoration: none;
    margin: 8px auto;
    background-color: var(--grey);
    width: 285px;
    height: 45px;
    font-size: 14px;
    font-weight: 600;
    font-family: Inter, system-ui;
    border-radius: 10.5px;
    transition: 0.2s;
}

.button-socials:hover{
    cursor: pointer; 
}

.button-socials:active{
    cursor: pointer;
    background-color: var(--green);
}

.attribution { 
    font-size: 14px; 
    text-align: center;
    text-decoration: none;
    margin: 25px auto 0px auto;
    color: var(--white);
    font-weight: 500;
    font-family: Inter, system-ui; 
}
.attribution a { 
    color: hsl(228, 45%, 44%);
    text-decoration: none; 
}