@font-face {
    font-family: 'Inter-bold';
    src: url(../fonts/Inter-Bold.ttf);
}

@font-face {
    font-family: 'Inter-regular';
    src: url(../fonts/Inter-Regular.ttf);
}

@font-face {
    font-family: 'Inter-semibold';
    src: url(../fonts/Inter-SemiBold.ttf);
}

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

:root {
    --emphasis: hsl(75, 94%, 57%);
    --letters: hsl(0, 0%, 100%);
    --gray20: hsl(0, 0%, 20%);
    --gray12: hsl(0, 0%, 12%);
    --gray8: hsl(0, 0%, 8%);

}

body {
        background-color: var(--gray8);
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Inter-regular';
        color: var(--letters);
    }

    main {
        background-color: var(--gray12);
        width: 21rem;
        padding: 1.2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 0.9375rem;
    }

    .section-img {
        display: flex;
        justify-content: center;
        margin: 0.3125rem 0 1.5625rem;
    }

    .section-img img {
        width: 5.625rem;
        border-radius: 50%;
    }

    .section-title h1 {
        text-align: center;
        font-family: 'Inter-bold';
        margin-bottom: 0.2rem;
    }

    .section-title p {
        text-align: center;
        font-family: 'Inter-semibold';
        color: var(--emphasis);
        margin-top: 0.8rem;
    }

    .section-info {
        margin: 2rem 0rem 1.7rem;
    }

    .section-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        width: 90%;
    }

    .section-links a {
        background-color: var(--gray20);
        padding: 0.8rem;
        width: 100%;
        text-align: center;
        text-decoration: none;
        color: var(--letters);
        border-radius: 0.3rem;
        font-family: 'Inter-semibold';
    }

    .section-links a:hover {
        background-color: var(--emphasis);
        color: var(--gray8);
    }