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

@font-face {
    font-family: "inter-Bold";
    src: url(../assets/fonts/static/Inter-Bold.ttf);
}

@font-face {
    font-family: "inter-Regular";
    src: url(../assets/fonts/static/Inter-Regular.ttf);
}

@font-face {
    font-family: "inter-SemiBold";
    src: url(../assets/fonts/static/Inter-SemiBold.ttf);
}

:root {
    --fontVariable: "Inter-VariableFont", sans-serif;
    --fonteBold: "inter-Bold", sans-serif;
    --fonteRegular: "inter-Regular", sans-serif;
    --fontSemiBold: "inter-SemiBold", sans-serif;

    --Green: hsl(75, 94%, 57%);
    --White: hsl(0, 0%, 100%);

    --Grey700: hsl(0, 0%, 20%);
    --Grey800: hsl(0, 0%, 12%);
    --Grey900: hsl(0, 0%, 8%);
}

body {
    background-color: var(--Grey900);

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0px;
}

main {
    background-color: var(--Grey800);
    width: 270px;
    height: 460px;
    padding: 20px;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    
}

img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

h1 {
    font-family: "inter-SemiBold", sans-serif;
    color: var(--White);
    font-size: 1.5em;
}

p.contry {
    font-family: "inter-Bold", sans-serif;
    color: var(--Green);

    margin-top: -10px;
}

p {
    font-family: sans-serif;
    color: var(--White);
    font-size: 0.9em;
}

.profile {
    background-color: var(--Grey700);
    width: 250px;
    height: 28px;
    margin: 10px;
    border-radius: 5px;

    text-align: center;
    padding-top: 8px;
    margin-top: 4px;
}

a {
    font-family: var(--fontSemiBold);
    font-size: 0.9em;
    color: white;
    text-decoration: none;
}

.profile:hover {
    background-color: var(--Green);
    color: black;
}

.attribution > p {
    line-height: .2em;
}