:root{
  --bg: #000000;
  --btn: #2b2b2b;
  --btn-border: #6b6b6b;
  --btn-text: #f5f5f5;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body{
  background: var(--bg);
  color: var(--btn-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-top: 120px; /* відступ для титулу */
}

/* Титул зверху */
.title{
  height: auto;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

/* Картинки зліва та справа, ближче одна до одної */
.second-image, .third-image{
  position: absolute;
  top: 120px;   /* трохи під титулом */
  width: 200px;
}

.second-image{ left: 300px; }    /* підсунули ближче до центру */
.third-image{ right: 300px; transform: scaleX(-1); }  /* віддзеркалили і ближче */

.fourth-image {
  position: absolute;
  top: 100px;       /* під титулом */
  left: 50%;
  transform: translateX(-50%);
  width: 200px;     /* можна змінити розмір */
  left: 755px;
}

/* Можна додати адаптив для мобільних */
@media (max-width: 520px){
  .fourth-image{
    position: static;
    width: 150px;
    margin: 10px 0;
  }
}
/* Кнопки ще нижче під картинками */
/* Кнопки вертикально та без згладжування */



button {
  background: var(--btn);
  color: var(--btn-text);
  border: 2px dashed var(--btn-border);
  padding: 14px 22px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;

  /* Прибираємо згладжування */
  backface-visibility: hidden;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;

  /* Для анімації пунктиру */
  border-style: dashed;
  border-width: 2px;
  border-color: var(--btn-border);
  border-image: none;

  /* Створюємо пунктирний рух */
  position: relative;
  box-sizing: border-box;
}

button {
  background: var(--btn);
  color: var(--btn-text);
  border: 2px dashed var(--btn-border);
  padding: 14px 22px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  z-index: 0;

  /* Прибираємо згладжування */
  backface-visibility: hidden;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;

  /* Світловий ефект через тінь */
  box-shadow: 0 0 10px #fff;
  transition: box-shadow 0.2s ease;
}

/* Псевдоелемент для анімації “світла” за кнопкою */
button {
  background: var(--btn);          /* непрозорий фон кнопки */
  color: var(--btn-text);
  border: 2px solid var(--btn-border); /* суцільна обводка */
  padding: 14px 22px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  z-index: 0;
  top: 20px;

  /* Мінімальне згладжування */
  backface-visibility: hidden;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;

  /* Псевдосвітло через box-shadow */
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
  animation: glow 2s ease-in-out infinite alternate;
}

/* Анімація світла */
@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(255,255,255,0);
  }
  50% {
    box-shadow: 0 0 25px rgba(255,255,255,0.6);
  }
  100% {
    box-shadow: 0 0 5px rgba(255,255,255,0);
  }
}

/* Кнопки у стовпчик */
.wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 450px;
}

.floating-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.floating-images img {
  position: absolute;
  width: 80px;
  opacity: 0.6;
}

/* Задаємо стартові позиції так, щоб меми були всередині екрану */
.float1 { top: 10%; left: 5%; animation: float1 8s ease-in-out infinite alternate; }
.float2 { top: 30%; left: 40%; animation: float2 10s ease-in-out infinite alternate; }
.float3 { top: 60%; left: 10%; animation: float3 12s ease-in-out infinite alternate; }
.float4 { top: 20%; left: 70%; animation: float4 9s ease-in-out infinite alternate; }
.float5 { top: 50%; left: 50%; animation: float5 11s ease-in-out infinite alternate; }

/* Анімації руху мемів */
@keyframes float1 { 0%{transform:translate(0,0);} 50%{transform:translate(200px,100px);} 100%{transform:translate(0,0);} }
@keyframes float2 { 0%{transform:translate(0,0);} 50%{transform:translate(-150px,150px);} 100%{transform:translate(0,0);} }
@keyframes float3 { 0%{transform:translate(0,0);} 50%{transform:translate(100px,-100px);} 100%{transform:translate(0,0);} }
@keyframes float4 { 0%{transform:translate(0,0);} 50%{transform:translate(-100px,-150px);} 100%{transform:translate(0,0);} }
@keyframes float5 { 0%{transform:translate(0,0);} 50%{transform:translate(150px,100px);} 100%{transform:translate(0,0);} }