/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   <style>
  
  @font-face {
  font-family: DepartureMono-Regular; /* Choose a name for your font */
  src: url(https://magicbrew.neocities.org/font/DepartureMono-Regular.woff2) format("woff2"),
       url(https://magicbrew.neocities.org/font/DepartureMono-Regular.woff) format("woff");
  font-weight: normal; /* Define font weight if applicable */
  font-style: normal; /* Define font style if applicable */
  font-color: white;
}
    /* Фон сторінки */
    body {
      background-image: url('https://magicbrew.neocities.org/img/bg.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      margin: 0;
      padding: 20px;
      font-family: DepartureMono-Regular, sans-serif;
      font-size: 20px; /* Задає розмір шрифту для всієї сторінки */
      font-color: white
    }

    /* Заголовок без білого фону та по центру */
    .header {
      text-align: center;
      margin-bottom: 20px;
      color: rgba(221, 221, 221, 1);
    }

    /* перемикач мови */
    .language-switch {
      position: fixed;
      top: 10px;
      right: 10px;
      background-color: rgba(219, 219, 219, 0.6);
      padding: 5px 10px;
    }

    .language-switch a {
      text-decoration: none;
      color: black;
      font-weight: bold;
    }


    /* Контейнер для тексту з напівпрозорим білим фоном */
    .content {
      background-image: url('https://magicbrew.neocities.org/img/banner3.jpg');
      background-size: 143%;
      background-size: cover;
      background-position: center;
      padding: 20px;
      max-width: 900px;
      margin: auto;
      color: white;
      text-shadow: 
    -1px -1px 0 #000, 
     1px -1px 0 #000, 
    -1px  1px 0 #000, 
     1px  1px 0 #000;
    }

    /* картинка внизу */
    .corner-image {
      position: fixed;       /* Фіксує зображення при прокручуванні */
      bottom: 10px;          /* Відстань від нижнього краю */
      right: 10px;           /* Відстань від правого краю */
      width: 120px;          /* Розмір зображення */
      opacity: 1;            /* Прозорість (0 - повністю прозоре, 1 - непрозоре) */
    }

    /* картинка внизу 2*/
    .corner-image2 {
      position: fixed;       /* Фіксує зображення при прокручуванні */
      bottom: 10px;          /* Відстань від нижнього краю */
      left: 10px;            /* Відстань від лівого краю */
      width: 120px;          /* Розмір зображення */
      opacity: 0.6;          /* Прозорість (0 - повністю прозоре, 1 - непрозоре) */
    }
  </style>


/* --- Ключові кадри анімації --- */
@keyframes slowRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }


/* --- Стилі та застосування анімації --- */
.corner-image {
  /* Ваші існуючі стилі */
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 120px;
  opacity: 0.6;
  
  /* !!! АНІМАЦІЯ !!! */
  animation-name: slowRotate;
  animation-duration: 20s; /* Налаштуйте це значення для потрібної швидкості */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}