body {
    font-family: Arial, sans-serif;
    background-color: #1a1a2e;
    color: #e94560;
    overflow: hidden; /* Prevent scrollbar from appearing */
}

h1 {
    transition: transform 0.5s, color 0.5s;
    animation: colorChange 10ms infinite alternate; /* Color change */
}

h1:hover {
    transform: scale(1.1);
    color: #0f3460; 
    animation: none; /* Stop animation on hover */
}

.container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 20px;
}

.audio, .video {
    margin: 20px;
    border: 2px solid #e94560;
    border-radius: 10px;
    transition: box-shadow 0.5s;
    animation: growShrinkRandom 1s infinite alternate, colorChange 10ms infinite alternate, bounce 3s infinite, spin 1s linear infinite; 
}

.audio:hover, .video:hover {
    box-shadow: 0 0 105px #0f3460;
    animation: none; 
}

video, audio {
    width: 300px;
    border-radius: 10px;
}

@keyframes growShrinkRandom {
    0% { transform: scale(1); }
    10% { transform: scale(1.1); }
    20% { transform: scale(0.9); }
    30% { transform: scale(1.2); }
    40% { transform: scale(0.8); }
    50% { transform: scale(1.3); }
    60% { transform: scale(0.7); }
    70% { transform: scale(1.15); }
    80% { transform: scale(0.85); }
    90% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes colorChange {
    0% { border-color: #ff0000; background-color: #ffcccc; color: #ffcccc; }
    16% { border-color: #ff7f00; background-color: #ffd9cc; color: #ffd9cc; }
    33% { border-color: #ffff00; background-color: #ffffcc; color: #ffffcc; }
    50% { border-color: #00ff00; background-color: #ccffcc; color: #ccffcc; }
    66% { border-color: #0000ff; background-color: #ccccff; color: #ccccff; }
    83% { border-color: #4b0082; background-color: #e6ccff; color: #e6ccff; }
    100% { border-color: #9400d3; background-color: #f2ccff; color: #f2ccff; }
}

@keyframes bounce {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-50px, 30px) rotate(0deg); }
    20% { transform: translate(70px, -40px) rotate(360deg); }
    30% { transform: translate(-80px, 20px) rotate(720deg); }
    40% { transform: translate(50px, 60px) rotate(1080deg); }
    50% { transform: translate(-30px, -70px) rotate(1440deg); }
    60% { transform: translate(100px, 40px) rotate(1800deg); }
    70% { transform: translate(-60px, 80px) rotate(2160deg); }
    80% { transform: translate(30px, -50px) rotate(2520deg); }
    90% { transform: translate(-40px, 60px) rotate(2880deg); }
    100% { transform: translate(0, 0); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}