:root {
    --bg: #0a0d12;
    --text: #eae2d5;
    --muted: #b8bcc8;
    --subtitle: #a4a8be;
    --accent-name: #f0b5a0;
    --accent-hover: #b5a9d8;
    --accent-icon: #d8c37a;
}

body {
    font-family: "JetBrains Mono", monospace;
    background-color: var(--bg);
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="300" height="300"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/%3E%3CfeGaussianBlur stdDeviation="0.5"/%3E%3C/filter%3E%3Crect width="300" height="300" filter="url(%23n)" opacity="0.04"/%3E%3C/svg%3E');
    color: var(--text);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 2.5rem 3.5rem;
}

.container {
    max-width: 38rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    margin-right: 8%;
    margin-top: -6.5rem;
    margin-left: 0.5ch;
}

h1 {
    font-size: 2.8rem;
    margin: 0 0 1.8rem 0;
    color: #f0b5a0;
    letter-spacing: 0.01em;
    font-weight: 600;
    transition: text-shadow 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

h1:hover {
    text-shadow: 0 0 32px rgba(240, 181, 160, 0.12);
}

.subtitle {
    font-size: 1.08rem;
    margin: 0 0 2.25rem 0;
    color: var(--subtitle);
    letter-spacing: 0.015em;
    font-weight: 400;
    transition: text-shadow 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
}

.subtitle:hover {
    text-shadow: 0 0 30px rgba(164, 168, 190, 0.13);
}

.link {
    display: flex;
    align-items: center;
    margin-bottom: 0.95rem;
    text-decoration: none;
    color: var(--text);
    transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-size: 1.12rem;
    letter-spacing: 0.015em;
    padding: 0.35rem 0;
    position: relative;
    font-weight: 400;
}

.link:hover {
    color: var(--accent-hover);
    transform: translateX(4px);
    text-shadow: 0 0 28px rgba(181, 169, 216, 0.14);
}

.link-indicator {
    margin-right: 0.65rem;
    display: flex;
    align-items: center;
    color: transparent;
    transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.link:hover .link-indicator {
    color: var(--accent-hover);
}

.link-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.external-link-icon {
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.45rem;
    opacity: 0;
    transition: opacity 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.link:hover .external-link-icon {
    opacity: 0.5;
}

footer {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    gap: 1rem;
}

.icon-link {
    color: var(--subtitle);
    transition: all 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0.4;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.icon-link:hover {
    color: var(--accent-hover);
    opacity: 0.75;
}

.icon {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

@media (max-width: 768px) {
    footer {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    
    .link-indicator {
        color: var(--text);
        opacity: 0.75;
    }
    
    .link:active .link-indicator {
        color: var(--accent-hover);
        opacity: 1;
        transition: all 150ms ease;
    }
}