html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
    background: hsl(0, 0%, 8%);
    color: white;
    font-family: Inter, Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-size: 14px;
    
}

a {
    color: white;
    text-decoration: none;
}

.card {
    background: hsl(0, 0%, 12%);
    padding: 1rem;
    max-width: 380px;
    margin: 0 auto;
    border-radius: 10px;;
    
}


.user {
    text-align: center;

    .name {
        margin: 0 0 1rem 0;
        font-size: 20px;
    }

    .location {
        margin: 0.5rem 0 2rem 0;
        color: hsl(75, 94%, 57%);
    }

    img {
        border-radius: 50%;
        width: 90px;
        display: block;
        margin: 0 auto 2rem auto;
    }
}

.social {
    display: flex;
    flex-direction: column;
        margin: 1rem 0 0 0;    

    li {
        width: 100%;
        margin: 1rem 0 0 0;
    }

    a {
    padding: 10px;
    background: hsl(0, 0%, 20%);
    border-radius: 5px;
    display: block;
    text-align: center;
    font-weight: bold;

    &:hover {
        background: hsl(75, 94%, 57%);
        color: hsl(0, 0%, 20%);
    }
    }
    
}

/* 
- Green: hsl(75, 94%, 57%)

- White: hsl(0, 0%, 100%)

- Grey 700: hsl(0, 0%, 20%)
- Grey 800: hsl(0, 0%, 12%)
- Grey 900: hsl(0, 0%, 8%) */
























.attribution {
    position: absolute;
    bottom: 0;
    right: 0;
}