/* ===========================
   Theme
=========================== */

:root {
    /* Colors */
    --color-text: #ffffff;
    --color-background: #080812;

    --color-glass: rgba(255,255,255,.10);
    --color-glass-hover: rgba(255,255,255,.18);
    --color-glass-strong: rgba(255,255,255,.12);

    --color-border: rgba(255,255,255,.12);
    --color-avatar-border: rgba(255,255,255,.25);

    --color-bio: rgba(255,255,255,.75);

    /* Accent */
    --accent-start: #6d5dfc;
    --accent-end: #ff4db8;

    --accent-shadow: rgba(255,77,184,.35);
    --accent-shadow-hover: rgba(255,77,184,.55);

    /* Background gradients */
    --gradient-1: rgba(0,174,255,.6);
    --gradient-2: rgba(255,0,170,.45);
    --gradient-3: rgba(123,92,255,.65);

    --background-start: #090914;
    --background-end: #141428;

    /* Typography */
    --font-family: Inter, Arial, sans-serif;

    --font-title: 2rem;
    --font-button: 1.15rem;
    --font-toggle: 1rem;

    /* Layout */
    --content-width: 420px;

    --gap: 16px;

    --radius-button: 18px;
    --radius-pill: 999px;
    --radius-avatar: 50%;

    --avatar-size: 120px;

    /* Blur */
    --blur: 18px;
    --blur-toggle: 14px;

    /* Animation */
    --transition: .25s ease;
    --float-height: 8px;
    --float-duration: 5s;

    /* Shadows */
    --shadow-primary:
            0 12px 35px var(--accent-shadow);

    --shadow-primary-hover:
            0 18px 45px var(--accent-shadow-hover);
}

/* ===========================
   Reset
=========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===========================
   Layout
=========================== */

body {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    font-family: var(--font-family);
    color: var(--color-text);

    background: var(--color-background);
}

.background {
    position: fixed;
    inset: 0;

    background:
            radial-gradient(circle at 15% 20%, var(--gradient-1), transparent 40%),
            radial-gradient(circle at 85% 20%, var(--gradient-2), transparent 35%),
            radial-gradient(circle at 50% 85%, var(--gradient-3), transparent 40%),
            linear-gradient(135deg, var(--background-start), var(--background-end));

    z-index: -2;
}

.linktree {
    width: min(var(--content-width), 90vw);

    display: flex;
    flex-direction: column;
    gap: var(--gap);

    text-align: center;
}

/* ===========================
   Language toggle
=========================== */

.lang-toggle {
    position: fixed;
    top: 24px;
    right: 24px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    min-width: 70px;
    padding: 12px 18px;

    cursor: pointer;

    font-size: var(--font-toggle);
    font-weight: 700;

    color: var(--color-text);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    background: var(--color-glass-strong);

    backdrop-filter: blur(var(--blur-toggle));

    transition: var(--transition);
}

.lang-toggle:hover {
    background: var(--color-glass-hover);
    transform: translateY(-2px) scale(1.05);
}

/* ===========================
   Avatar
=========================== */

.avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);

    margin: 0 auto 12px;

    object-fit: cover;

    border-radius: var(--radius-avatar);
    border: 3px solid var(--color-avatar-border);

    animation: float var(--float-duration) ease-in-out infinite;
}

@keyframes float {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(calc(-1 * var(--float-height)));
    }
}

/* ===========================
   Text
=========================== */

h1 {
    font-size: var(--font-title);
    font-weight: 700;
}

.bio {
    margin-bottom: 10px;
    color: var(--color-bio);
}

.cta-row {
    display: flex;
    gap: 12px;
}

.cta-row .primary {
    flex: 3;
}

.secondary {
    flex: 1;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    background: var(--color-glass);
    color: var(--color-text);

    font-weight: 700;
}

.secondary:hover {
    background: var(--color-glass-hover);
}

/* ===========================
   Buttons
=========================== */

.button {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;

    padding: 16px;

    text-decoration: none;

    border-radius: var(--radius-button);
    border: 1px solid var(--color-border);

    backdrop-filter: blur(var(--blur));

    transition: var(--transition);
}

.button:hover {
    transform: translateY(-3px);
}

.primary {

    padding: 20px;

    font-size: var(--font-button);
    font-weight: 700;

    color: var(--color-text);

    background: linear-gradient(
            135deg,
            var(--accent-start),
            var(--accent-end)
    );

    box-shadow: var(--shadow-primary);
}

.primary:hover {
    box-shadow: var(--shadow-primary-hover);
}

.social {

    background: var(--color-glass);

    color: var(--color-text);
}

.social:hover {
    background: var(--color-glass-hover);
}

.social i {
    width: 24px;
    font-size: 1.35rem;
}