:root {
    --bg-hover-color: hsl(0, 0%, 8%);
    --card-color: hsl(0, 0%, 12%);
    --main-font-color: hsl(0, 0%, 100%);
    --location-hover-color: hsl(75, 94%, 57%);
    --nav-color: hsl(0, 0%, 20%);
}

body {
    background-color: var(--bg-hover-color);
    font-family: 'Inter', sans-serif;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 97vh;
}

p {
    font-size: .875rem;
    font-weight: 400;
}

main{
    background-color: var(--card-color);
    color: var(--main-font-color);
    padding: 1.875rem;
    border-radius: 0.625rem; 
    text-align: center;
    width: 18.75rem;
}

img {
    border-radius: 50%;
    width: 5.5rem;
    margin-top: 1.25rem;
}

h1 {
    font-size: 1.5rem;
    margin-bottom: 0.3125rem;
}

.location {
    color: var(--location-hover-color);
    margin-top: 0rem;
    margin-bottom: 1.875rem;
}

.description {
    margin-bottom: 1.25rem;    
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav a {
    text-decoration: none;
    color: var(--main-font-color);
    background-color: var(--nav-color);

    display: flex;
    justify-content: center;
    padding: 0.625rem;
    margin: .75rem;
    border-radius: 0.3125rem;
}

nav a:hover {
    background-color: var(--location-hover-color);
    color: var(--bg-hover-color);
}


footer { 
    color: var(--nav-color);
    font-size: 0.625rem; 
    text-align: center;
    position: absolute;
    bottom: 0.625rem; 
}

footer a { 
    color: var(--location-hover-color); 
}