/*!
 * MOVING BOX MEDIA Website
 * (c) [2025] [Peter Bauditsch]
 */

.footer {
    background-color: var(--MBM-dark);
    color: var(--MBM-white);
    text-align: center;
    padding: 40px 0;
    width: 100vw;
    z-index: 5;
    position: relative;
    left: 0;
    bottom: 0;
}


.impressum-datenschutz-links a {
    color: var(--MBM-white);
    opacity: 0.8;
    text-decoration: none;
    margin: 0 10px;

}

.impressum-datenschutz-links a:hover {
    opacity: 1;
}

.webdesign-by {
    margin-top: 1em;
    color: rgba(255, 255, 255, 0.8);
}

.webdesign-by p {
    margin-bottom: 0;
}

.credits-link {
    text-decoration: none;
    font-weight: lighter;
    font-size: 18px;
    color: var(--MBM-orange);
    display: inline-block;
}

.credits-link:hover {
    animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }


/* Responsive styles for smaller screens */
@media screen and (max-width: 450px) {
    .footer {
        padding: 20px 0; /* Reduce padding for smaller screens */
        padding-bottom: 30px;
    }

    .footer, .impressum-datenschutz-links a, .webdesign-by p, .credits-link {
        font-size: 14px; /* Reduce font size */
    }

    .impressum-datenschutz-links a {
        margin: 0 5px; /* Reduce spacing between links */
    }
}