/* THE WAIFU ZONE - UGLIEST STYLESHEET EVER */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Comic Sans MS', 'Papyrus', 'Brush Script MT', cursive;
    line-height: 0.8;
    color: #ff0080;
    background: repeating-linear-gradient(
        45deg,
        #ff0000,
        #ff0000 10px,
        #00ff00 10px,
        #00ff00 20px,
        #0000ff 20px,
        #0000ff 30px,
        #ffff00 30px,
        #ffff00 40px,
        #ff00ff 40px,
        #ff00ff 50px
    );
    min-height: 100vh;
    padding: 5px;
    animation: shake 0.3s infinite;
    overflow-x: hidden;
}

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

h1 {
    text-align: left;
    font-size: 5rem;
    color: #ff0080;
    text-shadow: 5px 5px 0px #00ff00, 10px 10px 0px #0000ff, 15px 15px 0px #ffff00;
    margin-bottom: 5px;
    letter-spacing: 15px;
    animation: rainbow 0.5s linear infinite, bounce 1s ease-in-out infinite;
    transform: rotate(-10deg);
    font-weight: 900;
    text-decoration: underline overline line-through;
}

@keyframes rainbow {
    0% { color: #ff0000; }
    16% { color: #ff8000; }
    33% { color: #ffff00; }
    50% { color: #00ff00; }
    66% { color: #0080ff; }
    83% { color: #8000ff; }
    100% { color: #ff0080; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(-10deg); }
    40% { transform: translateY(-30px) rotate(-15deg); }
    60% { transform: translateY(-15px) rotate(-5deg); }
}

p {
    background: repeating-linear-gradient(
        90deg,
        #ff00ff 0px,
        #00ffff 5px,
        #ffff00 10px,
        #ff0000 15px
    );
    padding: 30px;
    margin-bottom: 3px;
    border-radius: 0px;
    box-shadow: 20px 20px 0px #000000, 40px 40px 0px #ff0000;
    border: 10px dashed #00ff00;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 5px;
    transform: skew(-20deg, 5deg);
    animation: wiggle 0.8s ease-in-out infinite;
}

@keyframes wiggle {
    0%, 100% { transform: skew(-20deg, 5deg) rotate(0deg); }
    25% { transform: skew(-15deg, 10deg) rotate(2deg); }
    50% { transform: skew(-25deg, 0deg) rotate(-2deg); }
    75% { transform: skew(-10deg, 8deg) rotate(1deg); }
}

p:first-of-type {
    text-align: right;
    font-size: 3rem;
    font-weight: 900;
    background: repeating-conic-gradient(#ff0000 0deg, #00ff00 90deg, #0000ff 180deg, #ffff00 270deg);
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: skew(-20deg, 5deg) rotate(0deg); }
    to { transform: skew(-20deg, 5deg) rotate(360deg); }
}

img {
    display: block;
    margin: 10px auto;
    max-width: 200%;
    height: auto;
    border-radius: 0px;
    box-shadow: 50px 50px 0px #ff00ff, -50px -50px 0px #00ff00;
    border: 20px solid #ff0000;
    filter: hue-rotate(180deg) saturate(5) contrast(3) brightness(2) sepia(1);
    animation: crazy-spin 3s linear infinite, pulse 1s ease-in-out infinite alternate;
    transform: scaleX(-1);
}

@keyframes crazy-spin {
    0% { transform: scaleX(-1) rotate(0deg) scale(1); }
    25% { transform: scaleX(-1) rotate(90deg) scale(1.5); }
    50% { transform: scaleX(-1) rotate(180deg) scale(0.5); }
    75% { transform: scaleX(-1) rotate(270deg) scale(2); }
    100% { transform: scaleX(-1) rotate(360deg) scale(1); }
}

@keyframes pulse {
    from { filter: hue-rotate(0deg) saturate(5) contrast(3) brightness(2) sepia(1); }
    to { filter: hue-rotate(360deg) saturate(10) contrast(5) brightness(3) sepia(0.5); }
}

a {
    color: #ff0000;
    text-decoration: blink;
    font-weight: 900;
    font-size: 4rem;
    transition: none;
    background: #ffff00;
    padding: 20px;
    border: 5px dotted #00ff00;
    animation: blink-crazy 0.1s linear infinite;
}

@keyframes blink-crazy {
    0% { opacity: 1; color: #ff0000; background: #ffff00; }
    25% { opacity: 0; color: #00ff00; background: #ff00ff; }
    50% { opacity: 1; color: #0000ff; background: #00ffff; }
    75% { opacity: 0; color: #ffff00; background: #ff0000; }
    100% { opacity: 1; color: #ff00ff; background: #00ff00; }
}

a:hover {
    color: #ffffff;
    text-decoration: none;
    animation: explode 0.2s linear infinite;
    transform: scale(3) rotate(45deg);
}

@keyframes explode {
    0% { transform: scale(3) rotate(45deg); }
    50% { transform: scale(5) rotate(180deg); }
    100% { transform: scale(3) rotate(360deg); }
}

/* Post styling - MAXIMUM UGLINESS */
p:nth-of-type(3),
p:nth-of-type(4) {
    border: 15px ridge #ff00ff;
    font-style: normal;
    background: repeating-linear-gradient(
        45deg,
        #ff0000 0px,
        #00ff00 2px,
        #0000ff 4px,
        #ffff00 6px,
        #ff00ff 8px,
        #00ffff 10px
    );
    transform: skew(15deg, -10deg) rotate(5deg);
    animation: disco 0.3s linear infinite;
}

@keyframes disco {
    0% { background-position: 0px 0px; }
    100% { background-position: 20px 20px; }
}

/* Last paragraph with link - ULTIMATE CHAOS */
p:last-of-type {
    text-align: center;
    background: radial-gradient(circle, #ff0000 10%, #00ff00 20%, #0000ff 30%, #ffff00 40%, #ff00ff 50%);
    font-size: 2rem;
    border: 20px groove #00ffff;
    animation: chaos 0.5s ease-in-out infinite;
    transform: perspective(100px) rotateX(30deg) rotateY(-20deg);
}

@keyframes chaos {
    0% { transform: perspective(100px) rotateX(30deg) rotateY(-20deg) scale(1); }
    25% { transform: perspective(100px) rotateX(-10deg) rotateY(40deg) scale(1.2); }
    50% { transform: perspective(100px) rotateX(50deg) rotateY(-60deg) scale(0.8); }
    75% { transform: perspective(100px) rotateX(-30deg) rotateY(80deg) scale(1.5); }
    100% { transform: perspective(100px) rotateX(30deg) rotateY(-20deg) scale(1); }
}

/* Responsive design - UGLY ON ALL DEVICES */
@media (max-width: 768px) {
    body {
        padding: 2px;
        animation: mega-shake 0.1s infinite;
    }
    
    @keyframes mega-shake {
        0% { transform: translate(5px, 5px) rotate(5deg); }
        25% { transform: translate(-5px, -10px) rotate(-5deg); }
        50% { transform: translate(-10px, 5px) rotate(10deg); }
        75% { transform: translate(10px, -5px) rotate(-10deg); }
        100% { transform: translate(5px, 5px) rotate(5deg); }
    }
    
    h1 {
        font-size: 8rem;
        margin-bottom: 0px;
        transform: rotate(-45deg) scale(2);
    }
    
    p {
        padding: 50px;
        margin-bottom: 1px;
        font-size: 3rem;
    }
}

/* TOTAL VISUAL DESTRUCTION */
p {
    opacity: 1;
    animation: strobe 0.1s linear infinite, wiggle 0.8s ease-in-out infinite;
}

@keyframes strobe {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

p:nth-child(2) { animation-delay: 0s; filter: invert(1); }
p:nth-child(3) { animation-delay: 0.05s; filter: saturate(10); }
p:nth-child(4) { animation-delay: 0.1s; filter: hue-rotate(180deg); }
p:nth-child(5) { animation-delay: 0.15s; filter: contrast(5); }
p:nth-child(6) { animation-delay: 0.2s; filter: brightness(3); }

/* CURSOR CHAOS */
* {
    cursor: grab !important;
}

*:hover {
    cursor: wait !important;
}

/* SCROLLBAR NIGHTMARE */
::-webkit-scrollbar {
    width: 50px;
    background: repeating-linear-gradient(90deg, #ff0000, #00ff00 10px, #0000ff 20px);
}

::-webkit-scrollbar-thumb {
    background: radial-gradient(circle, #ff00ff, #ffff00);
    border: 10px dashed #00ffff;
}

/* SELECTION HORROR */
::selection {
    background: #ff0000;
    color: #00ff00;
    text-shadow: 5px 5px 0px #0000ff;
}