/* =================
    ROOT VARIABLES
==================*/
:root {
    --green: #C4F82A;
    --gray-500: #333333;
    --gray-700: #111111;
    --gray-800: #1F1F1F;
    --gray-900: #141414;
    --white: #FFFFFF;

    /* Typography */
    --font-primary: 'Inter', sans-serif;

    --text-preset-1-size: clamp(1.25rem, 2vw, 1.5rem);
    --text-preset-1-line-height: 1.5;
    --text-preset-1-weight: 700;

    --text-preset-2-size: 0.875rem;
    --text-preset-2-line-height: 1.5;
    --text-preset-2-weight: 400;

    --text-preset-2-weight-bold: 700;


    /* Spacing */
    --space-500: 2.5rem;
    --space-300: 1.5rem;
    --space-200: 1rem;
    --space-150: .75rem;
    --space-100: .5rem;
    --space-50: .25rem;
}

/* =========================
    RESET
==========================*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

.links {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =========================
    BODY
==========================*/
body {
    font-family: var(--font-primary);
    background: var(--gray-900);
    color: var(--white);
    padding: 0 1.5rem;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: var(--space-50);
}

.btn-link:is(:hover, :focus-visible) {
    background: var(--green);
    color: var(--gray-700);
}

/* =========================
    CARD
==========================*/
.card {
    background: var(--gray-800);
    display: flex;
    flex-direction: column;
    gap: var(--space-300);
    width: 100%;
    max-width: 528px;
    padding: clamp(var(--space-300), 4vw, var(--space-500));
    border-radius: .75rem;
}

/* Card image */
.card img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    margin: 0 auto;
    display: block;
    border-radius: 50%;
}

.card header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-50);
}

.card-title {
    color: var(--white);
    font-size: var(--text-preset-1-size);
    line-height: var(--text-preset-1-line-height);
    font-weight: var(--text-preset-1-weight);
}

.card header p {
    color: var(--green);
    font-size: var(--text-preset-2-size);
    line-height: var(--text-preset-2-line-height);
    font-weight: var(--text-preset-2-weight-bold);
}

.card section p {
    width: 100%;
    max-width: 19rem;
    margin: 0 auto;
    text-align: center;
    font-size: var(--text-preset-2-size);
    line-height: var(--text-preset-2-line-height);
    font-weight: var(--text-preset-2-weight);
}

.links {
    display: flex;
    flex-direction: column;
    gap: var(--space-200);
}

.btn-link {
    display: block;
    text-decoration: none;
    background: var(--gray-500);
    color: var(--white);
    text-align: center;
    border-radius: 0.5rem;
    padding: var(--space-150);
    font-size: var(--text-preset-2-size);
    line-height: var(--text-preset-2-line-height);
    font-weight: var(--text-preset-2-weight-bold);
    transition: background-color 0.2s ease, color 0.2s ease;
}