@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Pixelwarden.ttf') format('opentype');
}


@font-face {
    font-family: 'Georgia';
    src: url('./fonts/Caudex.ttf') format('opentype');
}
 
 
 
button.h-9.w-9 {
    background-color: transparent !important; /* Убираем фон, !important для надежности */
    border: 1px solid transparent; /* Хитрость: делаем рамку прозрачной, чтобы при появлении кнопка не "прыгала" */
    transition: border-color 0.2s ease-in-out; /* Плавный переход для рамки */
}

/* Стилизуем саму иконку (SVG) внутри кнопки */
button.h-9.w-9 svg {
    color: #888888; /* Устанавливаем иконке нейтральный серый цвет */
    transition: color 0.2s ease-in-out; /* Плавный переход для цвета иконки */
}

/* Стиль для кнопки при наведении курсора */
button.h-9.w-9:hover {
    border-color: #555555; /* Делаем нашу прозрачную рамку видимой */
}
 

 
 /* @font-face {
    font-family: 'Georgia';
    src: url('./fonts/PixelMusketee.ttf') format('opentype');
}
 
 */