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

/* Animated background */
body {
    font-family: 'Space Grotesk', sans-serif;
    /* Change selection colors */
    ::selection {
        background-color: #ececec;; /* highlight color */
        color: rgb(29, 29, 29);           /* text color while highlighted */
    }
    
    /* Optional: for Firefox compatibility */
    ::-moz-selection {
        background-color: #ececec;;
        color: rgb(29, 29, 29);
    }
    
    color: #ececec;

    margin: 0;
    min-height: 100vh;
    padding-top: 70px; /* space for fixed nav */

    /* Top layer = dots, bottom layer = gradient */
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.08) 2px, transparent 2px),
        linear-gradient(
            to bottom,
            rgb(29, 29, 29) 0%,
            rgb(24, 24, 24) 55%,
            rgb(18, 25, 40) 75%,
            rgb(13, 31, 60) 100%
        );


    background-size:
        60px 60px,
        cover;

    background-position:
        0 0,
        0 0;

    background-repeat:
        repeat,
        no-repeat;

    animation: moveDots 10s linear infinite;
}

    /* ===== DOT ANIMATION ===== */
    @keyframes moveDots {
        0% {
            background-position:
                0 0,
                0 0;
        }
        100% {
            background-position:
                0 -60px,
                0 0;
        }
    }

/* Nav links */
button {
    font-family: 'Space Grotesk', sans-serif;
    background: rgba(49, 49, 49, 0.722);
    text-decoration: none;
    color: #ececec;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 6px;
    transition: background 0.2s ease, transform 0.15s ease;
}

button:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
    cursor: pointer;
}

/* Demo content */
.content {
    font-size: 1.2rem;
    display: flex;              /* enable flex layout */
    flex-direction: column;     /* stack items vertically */
    align-items: center;        /* center items horizontally */
    justify-content: flex-start; /* optional, vertical alignment */
    gap: 20px;                  /* spacing between children */
    padding: 40px;
}

.spacer {
    width: 100%;             /* full width */
}


.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

/* Icon hidden by default */
.external-icon {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Show icon only when link is hovered */
button:hover .external-icon {
    opacity: 1;
    transform: translateX(0);
}

.outlined-box {
    border: 2px solid rgba(255, 255, 255, 0.4); /* border width + color */
    border-radius: 5px;                        /* rounded corners */

    padding: 16px;
    background: rgba(29, 29, 29, 0.6);           /* optional background */

    width: 85%;
}

.email-form {
    display: flex;
    gap: 10px;
    max-width: 400px;
}

.email-form input {
    font-family: 'Space Grotesk', sans-serif;
    flex: 1;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #444;
    background: rgba(49, 49, 49, 0.722);
    color: white;
    transition: background 0.2s ease, transform 0.15s ease;
}

.email-form input::placeholder {
    font-family: 'Space Grotesk', sans-serif;
    color: #888;
}