/* global.css */

/* Fonts */
@font-face {
    font-family: Dumbledore;
    src: url("/assets/fonts/Dumbledore.woff2") format("woff2");
    font-display: swap;
}

/* Base sizing */
html {
    font-size: 16px;
}

/* Base */
html,
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    height: 100%;
    overflow-y: hidden;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(111, 44, 255, 0.12),
            rgba(111, 44, 255, 0.05) 40%,
            transparent 80%),
        radial-gradient(circle at top,
            #e6e2ff 0%,
            #c9c2f0 60%,
            #b8b0e6 100%);

    font-family: Dumbledore, sans-serif;
}

body {
    height: 100%;
    overflow-y: auto;
}

/* Layout */
#main {
    max-width: 1200px;
    margin: 50px auto;
    padding-bottom: 25px;
}

/* Variables */
:root {
    --color-accent: #6f2cff;
    --color-primary: #3b0f5c;
    --color-gold: #e0b56f;
}

/* Navbar wrapper */
#navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Navbar */
.navbar {
    max-width: 75rem;
    /* 1200px */
    margin: 1rem auto;
    padding: 0.9rem 1.75rem;

    position: sticky;
    top: 0;
    z-index: 1000;

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

    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    border-radius: 1rem;

    box-shadow:
        0 0 20px rgba(111, 44, 255, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(8px);
}

/* Left side (icons) */
.nav-left {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Icons */
.icon {
    width: 1.75rem;
    height: 1.75rem;
    display: block;
    fill: var(--color-gold);

    transition: transform 0.2s ease, fill 0.2s ease;
}

.social-icon:hover .icon {
    fill: white;
    transform: scale(1.15);
}

/* Nav links container */
.navbar nav {
    display: flex;
    gap: 2.5rem;
}

/* Nav links */
.nav-link {
    color: var(--color-gold);
    text-decoration: none;

    font-size: 1.2rem;
    /* increased size */
    font-weight: 500;

    transition: transform 0.2s ease, color 0.2s ease;
}

.nav-link:hover {
    color: white;
    transform: scale(1.08);
}

/* Center title */
.nav-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    color: var(--color-gold);
    font-size: 2.2rem;

    pointer-events: none;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.6);
}