/* Stílusok a táblához (azonosító: #table) */


/* Megjegyzés: a fájl korábban üres volt; ha szeretnéd visszaállítani a korábbi háttérkép-stílusokat,
	 szólj és hozzáadom őket is. */

#backgroundpicture {
    background-image: url('fooldal_hatter.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* Középre igazított doboz osztály: fehér háttér, 50% átlátszóság */
.centered-box {
    width: 90%;              /* relatív szélesség, szükség szerint módosítható */
    max-width: 800px;        /* maximális szélesség nagy képernyőn */
    margin: 2rem auto;       /* felül-alul 2rem, balra-jobbra auto -> középre */
    background-color: rgba(255,255,255,0.7); /* fehér, 70% átlátszóság */
    color: #000;             /* szöveg színe */
    padding: 1rem;           /* belső térköz */
    border-radius: 8px;      /* opcionális lekerekítés */
    box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* finom árnyék */
    display: flex;           /* Flexbox elrendezés */
    flex-direction: column; /* egymás alá kerülnek */
    gap: 1rem;               /* térköz a gyerek elemek között */
}

/* Használat: <div class="centered-box">Tartalom</div> */

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.picture {
    margin: 1rem;       /* középre igazítás */   
    width: 150px;             /* ne lépje túl a szülőelem szélességét */
    height: auto;            /* arányok megtartása */
    border: 2px solid #ccc;  /* világosszürke keret */
    border-radius: 4px;      /* enyhe lekerekítés */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* finom árnyék */
    margin-left: auto;       /* kép a jobb oldalra tolva */
    /* float eltávolítva, így a kép a flex elrendezésben marad és margin-left: auto jobb oldalra tolja */
}

h1{
    margin: 0;
}

.site-footer {
  background-color: #000000cb;   /* fekete háttér */
  color: #fff;              /* fehér szöveg */
  text-align: center;       /* középre igazítás */
  padding: 8px 10px;       /* belső margó */
  font-size: 14px;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.site-footer {
  margin-top: auto;
}

#backgroundpicture::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("fooldal_hatter.jpeg") center / cover no-repeat;
  z-index: -1;
}

p {
  text-align: justify;
}

.footer_link {
  color: #fff;
  text-decoration: none;
}

.footer_link:hover {
  text-decoration: underline;
  color: #aaa;
}