/* Add @font-face rule for Comic Sans MS */
@font-face {
    font-family: 'Comic Sans MS';
    src: url('comic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Apply the font-family to the body and other elements */
body {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    background-color: yellow;
    color: red;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal overflow */
    animation: bgcolorchange 5s infinite;
}

@keyframes bgcolorchange {
    0% { background-color: yellow; }
    25% { background-color: pink; }
    50% { background-color: lime; }
    75% { background-color: cyan; }
    100% { background-color: yellow; }
}

h1 {
    font-size: 8vw; /* Responsive font size */
    text-shadow: 3px 3px 5px purple;
    animation: shake 0.5s infinite;
}

@keyframes shake {
    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); }
}

p {
    font-size: 4vw; /* Responsive font size */
    margin: 2vw 0;
    animation: colorchange 2s infinite;
}

@keyframes colorchange {
    0% { color: red; }
    25% { color: blue; }
    50% { color: green; }
    75% { color: orange; }
    100% { color: red; }
}

a {
    font-size: 5vw; /* Responsive font size */
    display: inline-block;
    margin: 2vw;
    padding: 2vw;
    background-color: #ff69b4; /* Hot pink */
    color: #0000ff; /* Blue */
    text-decoration: none;
    border: 2px solid yellow;
    border-radius: 2vw;
    box-shadow: 0 0 2vw #ff00ff;
    text-shadow: 0.5vw 0.5vw 1vw #ff0000;
    animation: button-jiggle 1s infinite, button-colorchange 1s infinite;
}

@keyframes button-jiggle {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(-10deg); }
    20% { transform: rotate(10deg); }
    30% { transform: rotate(-10deg); }
    40% { transform: rotate(10deg); }
    50% { transform: rotate(-10deg); }
    60% { transform: rotate(10deg); }
    70% { transform: rotate(-10deg); }
    80% { transform: rotate(10deg); }
    90% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

@keyframes button-colorchange {
    0% { background-color: #ff69b4; color: #0000ff; }
    25% { background-color: #ff1493; color: #ffff00; }
    50% { background-color: #ff00ff; color: #00ffff; }
    75% { background-color: #ff4500; color: #ff6347; }
    100% { background-color: #ff69b4; color: #0000ff; }
}

img {
    width: 50vw; /* Responsive width */
    height: auto;
    margin: 2vw;
    animation: spin 4s linear infinite;
}

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

ul {
    list-style-type: square;
    font-size: 3vw; /* Responsive font size */
    text-align: center;
    margin: 2vw auto;
    width: 90%;
    animation: slide 3s infinite;
}

@keyframes slide {
    0% { transform: translateX(0); }
    50% { transform: translateX(20px); }
    100% { transform: translateX(0); }
}

.vibrating {
    display: inline-block;
    animation: vibrate 0.5s infinite;
}

@keyframes vibrate {
    0% { transform: translateX(0); }
    10% { transform: translateX(-2px); }
    20% { transform: translateX(2px); }
    30% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    50% { transform: translateX(-2px); }
    60% { transform: translateX(2px); }
    70% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    90% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.fiery {
    display: inline-block;
    animation: fiery-blast 1s infinite;
}

@keyframes fiery-blast {
    0% { color: #ff4500; }
    50% { color: #ff6347; }
    100% { color: #ff4500; }
}

.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: lime;
    color: red;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    padding: 5vw;
    border: 2vw dashed purple;
    box-shadow: 0 0 2vw yellow;
    animation: popup-shake 0.5s infinite;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
}

@keyframes popup-shake {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    10% { transform: translate(-50%, -50%) rotate(-5deg); }
    20% { transform: translate(-50%, -50%) rotate(5deg); }
    30% { transform: translate(-50%, -50%) rotate(-5deg); }
    40% { transform: translate(-50%, -50%) rotate(5deg); }
    50% { transform: translate(-50%, -50%) rotate(-5deg); }
    60% { transform: translate(-50%, -50%) rotate(5deg); }
    70% { transform: translate(-50%, -50%) rotate(-5deg); }
    80% { transform: translate(-50%, -50%) rotate(5deg); }
    90% { transform: translate(-50%, -50%) rotate(-5deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}

.popup .close-btn {
    position: absolute;
    top: 1vw;  /* Adjusted positioning */
    right: 1vw;  /* Adjusted positioning */
    font-size: 2.5vw; /* Responsive font size */
    cursor: pointer;
    background: yellow;
    border: 1px solid red; /* Border styling */
    padding: 0.5vw; /* Padding */
    border-radius: 50%;
    animation: vibrate 0.5s infinite;
    z-index: 1001; /* Ensure close button is above the popup content */
}

@keyframes timer-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.ugly-timer {
    display: block;
    font-size: 6vw; /* Responsive font size */
    margin-top: 2vw;
    background-color: magenta;
    color: yellow;
    padding: 2vw;
    border: 1vw dotted cyan;
    border-radius: 2vw;
    text-shadow: 2px 2px 5px lime;
    animation: timer-blink 1s infinite;
}

/* Responsive styles */
@media (max-width: 768px) {
    h1 {
        font-size: 10vw;
    }

    p {
        font-size: 5vw;
    }

    a {
        font-size: 6vw;
        padding: 3vw;
    }

    ul {
        font-size: 4vw;
        width: 90%;
    }

    img {
        width: 70vw;
    }

    .popup {
        padding: 4vw;
        border: 2vw dashed purple;
    }

    .popup .close-btn {
        font-size: 2vw;
        padding: 2vw;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 12vw;
    }

    p {
        font-size: 6vw;
    }

    a {
        font-size: 8vw;
        padding: 4vw;
    }

    ul {
        font-size: 6vw;
        width: 95%;
    }

    img {
        width: 90vw;
    }

    .popup {
        padding: 2vw;
        border: 2vw dashed purple;
    }

    .popup .close-btn {
        font-size: 2vw;
        padding: 1vw;
    }
}

/* Custom audio player design */
#custom-player {
    width: 300px; /* Width of the player */
    height: 100px; /* Height of the player */
    margin: 20px auto; /* Center it horizontally */
    background-color: #ff69b4; /* Bright pink background */
    border: 5px dashed yellow; /* Dashed border */
    box-shadow: 0 0 15px #ff00ff; /* Vibrant shadow */
    animation: wiggle 2s infinite, color-change 2s infinite; /* Add animations */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform-origin: center; /* Ensure animation is centered */
    position: relative; /* Position relative for absolute positioning of text */
}

/* Information text styling */
.player-info {
    font-size: 1.5rem; /* Responsive font size */
    color: #ffffff; /* Bright white text */
    text-shadow: 2px 2px 5px #636324; /* Shadow for cringy effect */
    animation: text-blink 0.2s infinite, text-shake 0.5s infinite;
    position: absolute; /* Absolute positioning */
    bottom: 10px; /* Position text at the bottom */
}

/* Text animations */
@keyframes text-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes text-shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

/* Animation for the cringy effect */
@keyframes wiggle {
    0% { transform: translateX(0); }
    25% { transform: translateX(20px); }
    50% { transform: translateX(-20px); }
    75% { transform: translateX(20px); }
    100% { transform: translateX(0); }
}

@keyframes color-change {
    0% { background-color: #ff69b4; }
    25% { background-color: #ff1493; }
    50% { background-color: #ff00ff; }
    75% { background-color: #ff6347; }
    100% { background-color: #ff69b4; }
}

/* Cringy Input Menu */
#input-menu {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 400px;
    background-color: #ff69b4; /* Bright pink background */
    color: #0000ff; /* Bright blue text */
    border: 5px dashed yellow; /* Dashed border */
    box-shadow: 0 0 20px #ff00ff; /* Vibrant shadow */
    padding: 2rem;
    text-align: center;
    z-index: 1000; /* Ensure it’s on top */
    animation: wiggle 2s infinite, color-change 2s infinite;
}

#input-menu input {
    width: 90%;
    padding: 1rem;
    font-size: 1.5rem;
    border: 3px solid #ff00ff;
    border-radius: 10px;
    background-color: #ffff00; /* Yellow background */
    color: #ff0000; /* Bright red text */
    text-shadow: 1px 1px 5px #000000; /* Black shadow for better readability */
    animation: text-blink 1s infinite, text-shake 0.5s infinite;
}

.input-info {
    font-size: 1.2rem; /* Responsive font size */
    margin-top: 1rem;
}

/* Hidden class for toggling visibility */
.hidden {
    display: none;
}