#meowie{

position:relative;
  background-image: url("https://i.pinimg.com/originals/47/a9/af/47a9af8e0eef04f9fe8dbed45d5c6cbf.gif") ;
  background-size:11.1111%;
  border: 3px  dotted white ;

    box-shadow: 0 0 50px 5px black; 
 
  width: 670px ;
  height: 670px ;
top:20px;
  z-index:1;
margin: 20px auto;


  display: grid; 
  grid-template-columns: repeat(3, 1fr); /* 3 колонки */
  grid-template-rows: repeat(3, 1fr);    /* 3 ряда */
                         
  padding: 20px;                         /* Чтобы внутренние боксы не липли к краям */
  box-sizing: border-box;                /* Важно! Чтобы паддинг не увеличил ширину 70% */
}

.mini-box {
  background-color:black;
  border: 2px dotted white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #380721;
  font-weight: bold;
  
    width: 100%; 
  height: 100%; 
  
  /* Чтобы текст/картинка внутри не ломали размер */
  box-sizing: border-box; 
  
  /* Центрируем то, что внутри (цифры или картинки) */
  display: flex;
  align-items: center;
  justify-content: center;


  
  
}


  
  .lazy {
  position: relative;
  top: -20px;
  left: 0;
  width: 100%;
  height: 750px;
  z-index: -1;

  /* СЛОЙ 1 (Сверху): Теперь градиент идет от ПРОЗРАЧНОГО к ЧЕРНОМУ */
  /* СЛОЙ 2 (Снизу): Твои звезды */
  background: 
    linear-gradient(to bottom, transparent 0%, black 70%, black 100%), 
    url("https://i.pinimg.com/1200x/2f/51/07/2f510765e391273bb9f89ba8d5e6e85a.jpg");

  background-size: 100% 100%, cover;
  background-repeat: no-repeat, repeat;
  box-shadow: 0 0 20px 5px black;
}

.blues{
   background: 
    linear-gradient(to bottom, #470736, #240935, #001424, transparent, transparent);
      width: 100%;
  height: 250px;
   top: -10;
  left: 0;
    position:relative;}

.chore{
   background: 
    linear-gradient(to bottom, black, #001424, #003057, #60188c, #a49ef7, #f7e96d, #FFB464,  transparent, transparent);
      width: 100%;
  height: 600px;
  position:relative;
 top:-50px}






body, html {
  margin: 0;
  padding: 0;
}



body {
  position: relative;
  min-height: 10000px;
  margin: 0;
  background: 
    /* 1-3. ЗВЁЗДЫ (3 слоя) */
    radial-gradient(1px 1px at 25% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 50% 70%, #fff, transparent),
    radial-gradient(1px 1px at 75% 40%, #fff, transparent),

    /* 4. ВИНЬЕТКА */
    radial-gradient(ellipse, transparent 70%, rgba(51, 14, 19, 0.6) 130%),
    
    /* 5. ДЫМКА */
    linear-gradient(rgba(51, 14, 19, 0.15), rgba(51, 14, 19, 0.15)),

    /* 6. СЕТКА */
    repeating-linear-gradient(rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 6px, transparent 6px),

    /* 7. МИНИ-ГРАДИЕНТ 50px */
    linear-gradient(rgba(0, 0, 41, 0.20) 0px, transparent 50px),
    
    /* 8. ОСНОВНОЙ ГРАДИЕНТ */
    linear-gradient(to bottom left, #5c1922, #cb4154, #F24E64, #ffa58a, transparent);

  /* Теперь тут ровно 8 значений под 8 слоев выше */
  background-size: 
    300px 100px, 200px 100px, 400px 100px, /* Звезды */
    100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; /* Всё остальное на весь экран */

  /* Повтор только для звезд (первые 3 слоя) */
  background-repeat: repeat-x, repeat-x, repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  
  background-attachment: scroll, scroll, scroll, scroll, fixed, fixed, fixed, fixed;

  animation: twinkle 4s infinite ease-in-out;
}
 






.footer-strip {
  position: absolute; /* Привязываем к координатам страницы */
  bottom: 0;          /* Самый низ */
  left: 0;            /* От левого края */
  width: 100%; 
display:flex;
  
  /* Укажите высоту вашей картинки (например, 100px) */
  height: 250px;      
  
  /* Сама картинка */
  background-image: url('grass.png'); 
  
  /* ПОВТОРЕНИЕ: заставляет картинку дублироваться по горизонтали */
  background-repeat: repeat-x; 
  
  /* Чтобы картинка не растягивалась, а сохраняла размер */
  background-size: contain; 
  
  /* Чтобы была поверх фона body */
  z-index: 100;       
}





.liebesleute {
  position: absolute;
  /* 1. Чтобы стояли В траве, ставим bottom меньше высоты травы (трава 250px) */
  bottom: 50px;         
  left: 50%;
  transform: translateX(-50%);
  
  width: 250px; 
  height: 250px;      
  
  /* 2. УДАЛЯЕМ синий цвет (меланхолия уходит!) */
  background-color: transparent; 

  background-image: url('Liebesleute.png'); /* Проверь большую букву здесь! */
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain; 
  
  /* 3. Ставим их ЗА траву (99) или ПЕРЕД травой (101) */
  z-index: 101;
    animation: breathing 6s infinite ease-in-out;
  
  /* Указываем точку, от которой будет "качаться" картинка (низ скамьи) */
  transform-origin: bottom center; 
  
}



@keyframes breathing {
  0%, 100% {
    /* Исходное состояние: масштаб 100% и без наклона */
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
  50% {
    /* "Вдох": чуть-чуть увеличиваем (на 2%) и наклоняем на 0.5 градуса */
    transform: translateX(-50%) scale(1.04) rotate(0.6deg);
  }
}