:root{
    --bg:#000000;
    --txt:#fff;
    --accent:#f7393b;
}

html,body{
    height:100%;
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--txt);
    font-family:Arial,Helvetica,sans-serif;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

#title{
    margin-bottom:1.5rem;
    font-size:2rem;
}

#gifBtn{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    outline:none;
}
#gifBtn:focus-visible{
    outline:2px solid var(--accent);
}
#gifImg{
    display:block;
    max-width:100%;
    height:auto;
}

#gifBtn{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    outline:none;
    /* 👇 Добавляем плавные переходы */
    transition:
        transform .15s ease,
        filter   .15s ease,
        box-shadow .15s ease;
}

/* Увеличение‑округление при наведении */
#gifBtn:hover{
    /* чуть поднимаем и делаем ярче */
    transform: translateY(-3px) scale(1.05);
    filter:    brightness(1.2);
    box-shadow:0 4px 12px rgba(255,255,255,.1);
}

/* «Тык» – небольшое «втягивание» */
#gifBtn:active{
    transform: translateY(1px) scale(0.95);
    filter:    brightness(0.9);
}

/* Фокус‑индикатор (для клавиатурного доступа) */
#gifBtn:focus-visible{
    outline:2px solid var(--accent);
}

/* Изображение‑GIF */
#gifImg{
    display:block;
    max-width:100%;
    height:auto;
}