body {
    margin: 0;
    padding: 0;
    background-color: #0A0A0A; /* Fast schwarzer Hintergrund */
    color: #F8F8F8; /* Weißer Text */
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.container {
    text-align: center;
}

.title a {
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: linear-gradient(45deg, #E91E63, #FF4081); /* Elegantes Rosenrot */
    -webkit-text-stroke: 0.5px #E91E63; /* Rosenroter Rand */
    text-shadow: 0 0 10px rgba(233, 30, 99, 0.8), 0 0 20px rgba(233, 30, 99, 0.6), 0 0 30px rgba(233, 30, 99, 0.4);
    animation: glow 2s infinite alternate;
    text-decoration: none; /* Entfernt die Unterstreichung */
}

.record-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
}

.record {
    width: 50px; /* 50% kleiner */
    height: 50px; /* 50% kleiner */
    border-radius: 50%;
    position: relative;
    animation: spin 6s linear infinite;
    cursor: pointer;
    transform-style: preserve-3d; /* 3D-Effekt beibehalten */
}

@keyframes spin {
    0% {
        transform: rotate3d(1, 0, 0, 0deg); /* Startposition */
    }
    25% {
        transform: rotate3d(1, 1, 0, 180deg); /* Schräg in eine Richtung */
    }
    50% {
        transform: rotate3d(0, 1, 1, 180deg); /* Schräg in eine andere Richtung */
    }
    75% {
        transform: rotate3d(1, 0, 0, 360deg); /* Normale Drehung */
    }
    100% {
        transform: rotate3d(0, 1, 0, 360deg); /* Zurück zur Startposition */
    }
}