:root {
    --main-bg: 255, 0, 200;
    --accent-color: 240, 30, 30;
    --color: #fff;
}

@font-face {
    font-family: 'main';
    src: url('./Segoe Script.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-size: 40px;
}

p {
    font-size: 18px;
}

body {
    background-color: rgb(var(--main-bg));
    font-family: 'main', sans-serif;
    margin: 0;
    padding: 16px;
}

/* --- ENTRY ANIMATION --- */
.bar {
    width: 100%;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 16px;
    margin-bottom: 20px;
}

.bar {
    opacity: 0;
    transform: translateY(-80px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.bar.show {
    opacity: 1;
    transform: translateY(0);
}

/* Slide + fade */
@keyframes in2 {
    0% {
        transform: translateY(-80px);
        opacity: 0;
    }
    60% {
        transform: translateY(10px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- OBNOXIOUS RAINBOW --- */
.rainbow {
    background: linear-gradient(
        270deg,
        #ff0000,
        #ff8000,
        #ffff00,
        #00ff00,
        #00ffff,
        #0000ff,
        #8000ff,
        #ff00ff,
        #ff0000
    );

    background-size: 400% 400%;

    animation:
        rainbow 2s linear infinite
}

/* Faster aggressive movement */
@keyframes rainbow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Extra chaos via hue rotation */
@keyframes hueShift {
    0%   { filter: hue-rotate(0deg) saturate(1.8) contrast(1.2); }
    50%  { filter: hue-rotate(180deg) saturate(2) contrast(1.4); }
    100% { filter: hue-rotate(360deg) saturate(1.8) contrast(1.2); }
}

@keyframes violentShake {
    0%   { transform: translate(0, 0) rotate(0deg); }
    20%  { transform: translate(-5px, 4px) rotate(-2deg); }
    40%  { transform: translate(5px, -4px) rotate(2deg); }
    60%  { transform: translate(-4px, -3px) rotate(-1.5deg); }
    80%  { transform: translate(4px, 3px) rotate(1.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.bar:hover {
    animation: rainbow 1s linear infinite;
}