/* ---------------------  Переменные  --------------------- */
:root{
    --bg:#000;                     /* фон страницы          */
    --txt:#fff;                    /* основной цвет текста  */
    --accent:#f7393b;              /* акцентный (outline)   */
    --gif-size:300px;              /* <-- меняете здесь размер GIF‑кнопки */
}

/* ---------------------  Базовые стили  --------------------- */
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;
}

/* ---------------------  Кнопка с GIF  --------------------- */
#gifBtn{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    outline:none;                 /* убираем стандартный outline  */
    transition:
        transform .15s ease,
        filter   .15s ease,
        box-shadow .15s ease;
}

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

/* Ховер‑эффект */
#gifBtn:hover{
    transform: translateY(-3px) scale(1.05);     /* поднимаем и слегка увеличиваем */
    filter:    brightness(1.2);                /* делаем ярче */
    box-shadow:none;                            /* ← убираем «белую рамку»/тень */
}

/* Нажатие – «втягивание» */
#gifBtn:active{
    transform: translateY(1px) scale(0.95);
    filter:    brightness(0.9);
}

/* ---------------------  Сам GIF  --------------------- */
#gifImg{
    display:block;
    width:var(--gif-size);        /* фиксированный размер (можно менять через переменную) */
    max-width:100%;               /* не выходит за пределы контейнера */
    height:auto;                  /* сохраняет пропорцию */
    border-radius:4px;            /* небольшие скругления – по желанию */
}