/* Font-Familien definieren */
@font-face {
    font-family: 'Inter Tight';
    src: url('../fonts/InterTight-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Inter Tight';
    src: url('../fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

/* CSS-Variablen für Font-Eigenschaften */
:root {
    --font-family-headings: 'Inter Tight', sans-serif;
    --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-size-small: 0.875rem;
    --font-size-base: 1rem;
    --font-size-large: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
}

body {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    max-width: 600px;
    margin: 0 auto;
    padding-top: 10vh;
    padding-left: 15px;
    padding-right: 15px;
    color: #000;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

h1 {
    font-size: 120px;
    font-weight: 650;
    letter-spacing: -0.5px;
}

@media (max-width: 1024px) {
    h1 {
        font-size: 100px;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 80px;
    }
}

.social-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    justify-content: flex-start;
}

a {
    color: #000;
}

/* Hintergrund-Kreuz */
body::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200vw;
    height: 200vh;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cstyle%3E.cross%7Bfill:%2339ff14%7D%3C/style%3E%3C/defs%3E%3Cpath class='cross' d='M0 40 L40 40 L40 0 L60 0 L60 40 L100 40 L100 60 L60 60 L60 100 L40 100 L40 60 L0 60 Z'/%3E%3C/svg%3E");
    background-size: 200vw 200vh;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    transform: translate(-50%, -50%) rotate(45deg);
    animation: crossRotation 7s infinite;
}

/* Kreuz-Rotations-Animation */
@keyframes crossRotation {
    0%, 85.7% {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    
    87.1% {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    
    88.6% {
        transform: translate(-50%, -50%) rotate(135deg);
    }
    
    90% {
        transform: translate(-50%, -50%) rotate(180deg);
    }
    
    91.4% {
        transform: translate(-50%, -50%) rotate(225deg);
    }
    
    92.9% {
        transform: translate(-50%, -50%) rotate(270deg);
    }
    
    94.3% {
        transform: translate(-50%, -50%) rotate(315deg);
    }
    
    95.7% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
    
    97.1% {
        transform: translate(-50%, -50%) rotate(405deg);
    }
    
    98.6% {
        transform: translate(-50%, -50%) rotate(450deg);
    }
    
    100% {
        transform: translate(-50%, -50%) rotate(495deg);
    }
}