/* СТИЛЬ 90-Х - АБСУРД И ХАОС */
body {
    background-color: #000000;
    color: #ff0000;
    font-family: "Comic Sans MS", "Courier New", monospace;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-image: 
        radial-gradient(circle at 20% 30%, #330000 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, #001133 0%, transparent 50%);
}

/* Мигающий текст с цветовым сдвигом */
.blink {
    animation: blinker 0.4s linear infinite, colorShift 2s infinite;
    color: #ff0000;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
    text-shadow: 2px 2px #00ff00, -2px -2px #0000ff;
}

@keyframes blinker {
    50% { opacity: 0; }
}

@keyframes colorShift {
    0%, 100% { color: #ff0000; text-shadow: 2px 2px #00ff00; }
    33% { color: #00ff00; text-shadow: 2px 2px #ff00ff; }
    66% { color: #0000ff; text-shadow: 2px 2px #ffff00; }
}

/* Дергающееся вверх-вниз с рандомом */
.jerk {
    animation: jerk 0.25s steps(2) infinite, rainbow 3s linear infinite;
    display: inline-block;
}

@keyframes jerk {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-20px) rotate(1deg); }
}

@keyframes rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Навигация с безумием */
nav {
    background: linear-gradient(90deg, #000, #300, #000, #003, #000);
    background-size: 400% 100%;
    animation: gradientMove 3s ease infinite;
    padding: 15px;
    text-align: center;
    border-bottom: 5px dashed #ff00ff;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

nav a {
    color: #ff0000;
    text-decoration: none;
    margin: 0 20px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.1s;
}

nav a:hover {
    color: #00ff00;
    text-decoration: line-through overline;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #ff00ff;
    transform: scale(1.1) rotate(2deg);
}

/* Контейнер */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    border-left: 3px dotted #00ffff;
    border-right: 3px dotted #ffff00;
}

/* Заголовки с глитч-эффектом */
h1, h2, h3 {
    color: #ff0000;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-shadow: 3px 3px #00ff00, -3px -3px #0000ff;
    animation: glitch 2s infinite;
}

@keyframes glitch {
    0%, 90%, 100% { transform: translate(0); }
    92% { transform: translate(-3px, 2px); }
    94% { transform: translate(3px, -2px); }
    96% { transform: translate(-1px, 1px); }
    98% { transform: translate(2px, -1px); }
}

/* Текст */
p {
    line-height: 1.8;
    margin: 20px 0;
    text-align: justify;
    background: linear-gradient(90deg, transparent 95%, #ff000022 95%, transparent 95%);
    background-size: 20px 100%;
}

/* Флаги - ЕДИНЫЙ РАЗМЕР */
.flags {
    text-align: center;
    margin: 25px 0;
    padding: 20px;
    background: repeating-linear-gradient(45deg, #0a0a0a, #0a0a0a 10px, #1a001a 10px, #1a001a 20px);
    border: 4px double #00ffff;
    box-shadow: 0 0 20px #ff00ff, inset 0 0 20px #00ff00;
}

.flags img {
    width: 180px;
    height: 120px;
    object-fit: contain;
    margin: 15px;
    border: 4px solid #ffffff;
    background: #000;
    box-shadow: 0 0 15px #ffff00;
    transition: transform 0.2s;
}

.flags img:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 30px #ff00ff, 0 0 60px #00ffff;
}

/* Фото и видео с БЕЛЫМИ рамками + абсурд */
.photo-frame, .video-frame {
    border: 8px solid #ffffff;
    display: inline-block;
    margin: 20px;
    background: linear-gradient(135deg, #000, #111, #000);
    padding: 10px;
    box-shadow: 
        0 0 0 3px #ff0000,
        0 0 0 6px #00ff00,
        0 0 0 9px #0000ff,
        0 0 20px #ff00ff;
    animation: framePulse 1.5s ease-in-out infinite;
}

@keyframes framePulse {
    0%, 100% { box-shadow: 0 0 0 3px #ff0000, 0 0 0 6px #00ff00, 0 0 0 9px #0000ff, 0 0 20px #ff00ff; }
    50% { box-shadow: 0 0 0 3px #00ffff, 0 0 0 6px #ffff00, 0 0 0 9px #ff00ff, 0 0 30px #00ff00; }
}

.photo-frame img {
    display: block;
    max-width: 380px;
    height: auto;
    filter: contrast(1.1) saturate(1.2);
}

.video-frame video {
    display: block;
    max-width: 580px;
    height: auto;
    border: 3px solid #fff;
}

/* Галерея с хаотичным расположением */
.gallery {
    text-align: center;
    margin: 40px 0;
    perspective: 1000px;
}

.gallery > * {
    display: inline-block;
    animation: float 4s ease-in-out infinite;
}

.gallery > *:nth-child(2) { animation-delay: -1s; }
.gallery > *:nth-child(3) { animation-delay: -2s; }
.gallery > *:nth-child(4) { animation-delay: -3s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(1deg); }
    75% { transform: translateY(5px) rotate(-1deg); }
}

/* Сообщение о неавторизованности */
.not-authorized {
    text-align: center;
    font-size: 36px;
    color: #ff0000;
    margin: 80px 0;
    padding: 40px;
    border: 6px ridge #ff00ff;
    background: 
        repeating-linear-gradient(45deg, #000, #000 10px, #100 10px, #100 20px),
        radial-gradient(circle, #300 0%, transparent 70%);
    animation: warningPulse 0.8s infinite;
    text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
}

@keyframes warningPulse {
    0%, 100% { border-color: #ff00ff; box-shadow: 0 0 20px #ff0000; }
    50% { border-color: #00ffff; box-shadow: 0 0 40px #00ffff, inset 0 0 30px #ff00ff; }
}

/* Разделители - безумные */
hr {
    border: none;
    height: 4px;
    background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff, #ffff00, #ff00ff, #00ffff);
    background-size: 300% 100%;
    animation: gradientMove 2s linear infinite;
    margin: 40px 0;
    box-shadow: 0 0 10px currentColor;
}

/* Футер - без даты, с абсурдом */
footer {
    text-align: center;
    padding: 25px;
    background: linear-gradient(180deg, #000, #200, #002, #000);
    border-top: 5px groove #00ff00;
    margin-top: 60px;
    font-size: 14px;
    animation: footerGlow 3s ease-in-out infinite;
}

@keyframes footerGlow {
    0%, 100% { box-shadow: inset 0 10px 20px #ff000033; }
    50% { box-shadow: inset 0 10px 40px #00ff0033, 0 0 30px #00ffff22; }
}

/* Эффект старого монитора + помехи */
.crt::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: 
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.08), rgba(0, 255, 0, 0.04), rgba(0, 0, 255, 0.08));
    z-index: 999;
    background-size: 100% 3px, 4px 100%;
    pointer-events: none;
    animation: scanline 8s linear infinite;
}

@keyframes scanline {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 1000px, 100px 0; }
}

/* Случайные искры на фоне */
body::after {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #ff000088, transparent),
        radial-gradient(2px 2px at 80% 15%, #00ff0088, transparent),
        radial-gradient(2px 2px at 40% 90%, #0000ff88, transparent),
        radial-gradient(2px 2px at 10% 70%, #ffff0088, transparent);
    background-repeat: repeat;
    animation: sparkles 0.5s steps(2) infinite;
    pointer-events: none;
    z-index: 1;
    opacity: 0.3;
}

@keyframes sparkles {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.5; }
}

/* Ссылки */
a {
    color: #ff0000;
    text-decoration: none;
    position: relative;
}

a::after {
    content: "★";
    position: absolute;
    right: -15px;
    animation: spin 2s linear infinite;
    font-size: 10px;
}

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

/* Бегущая строка */
.marquee {
    background: #000;
    color: #00ff00;
    padding: 8px;
    border: 2px solid #ff00ff;
    margin: 20px 0;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
}

.marquee span {
    display: inline-block;
    animation: marquee 15s linear infinite;
    padding-left: 100%;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Декоративные уголки */
.corner {
    position: fixed;
    width: 100px;
    height: 100px;
    border: 3px solid #ff0000;
    pointer-events: none;
    z-index: 100;
}
.corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.corner.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.corner.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; }