.floating-container {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999;
}

.floating-link {
  display: block;
}

.floating-img {
  width: 150px; /* A kívánt méret */
  height: auto;
  border: 2px solid #000; /* opcionális */
  border-radius: 8px; /* opcionális */
}

.close-toggle {
  display: none; /* Elrejtjük a checkboxot */
}

.floating-image {
  position: relative;
  padding: 10px; /* Térköz hozzáadása, hogy a gomb ne legyen közvetlenül a képen */
}

.close-btn {
  position: absolute;
  top: -10px; /* Távolság a kép tetejétől */
  right: -10px; /* Távolság a jobb oldaltól */
  font-size: 25px; /* Nagyobb gomb */
  color: #fff;
  background-color: #ff4d4d; /* Élénk piros háttérszín */
  border: none;
  border-radius: 50%; /* Kerek gomb */
  width: 30px; /* Gomb méret */
  height: 30px; /* Gomb méret */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Árnyék hozzáadása */
}

.close-btn:hover {
  background-color: #ff1a1a; /* Sötétebb piros szín, amikor fölé viszik az egeret */
  transform: scale(1.1); /* Kisebb méretnövelés hover hatásra */
}

.close-btn:active {
  transform: scale(0.9); /* Aktiváláskor kicsit összenyomódik a gomb */
}

/* Ha a checkbox be van jelölve (azaz az X-re kattintottak), elrejtjük a képet */
.close-toggle:checked ~ .floating-link {
  display: none;
}