header {
    background: #333;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    position: relative;
    border-bottom: 4px solid transparent; /* Alsó keret, alapértelmezett szín: átlátszó */
    border-image: linear-gradient(90deg, #f06, #4a90e2, #f06); /* Színátmenet a kerethez */
    border-image-slice: 1; /* Átmenet alkalmazása a keretre */
    animation: borderColorMove 2s linear infinite; /* Színváltás animáció */
}


header img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
}

header img.left {
    left: 20px; /* Bal oldali kép helye */
}

header img.right {
    right: 20px; /* Jobb oldali kép helye */
}

body {
    display: flex;
    flex-direction: column; /* Az oldal tartalma és a lábléc egy oszlopban */
    background-color: #f4f4f4; /* Alap háttérszín */
    background-image: url('/kepek/hatter_xp.jpg'); /* Kép elérési útja */
    background-size: cover; /* Kép méretezése, hogy kitöltse az egész háttért */
    background-position: center; /* Kép középre igazítása */
    background-repeat: no-repeat; /* Kép ne ismétlődjön */
    background-attachment: fixed; /* Kép rögzítése a háttérhez */
    font-family: 'Minecraft Ten', Arial, sans-serif; /* Minecraft Ten betűtípus alkalmazása */
	overflow-x: hidden; /* Megakadályozza a vízszintes görgetést */
	height: 100%; /* Biztosítja, hogy a body teljes magasságot kitöltse */
    margin: 0;
}

/* Alsó keret színváltós animáció */
@keyframes borderColorMove {
    0% {
        border-bottom-color: #ff0000; /* Piros */
    }
    50% {
        border-bottom-color: #00ff00; /* Zöld */
    }
    100% {
        border-bottom-color: #0000ff; /* Kék */
    }
}

h1 {
    display: inline-block; /* Inline-block, hogy az animációk jól működjenek */
	font-family: 'Szepseg', Arial, sans-serif; /* Custom font */
    margin: 0;
    position: relative;
    z-index: 1;
    font-size: 2.5em; /* Betűméret beállítása */
    transition: transform 0.5s ease; /* Animáció a transformációra */
text-shadow: 
        0 0 10px #00ffff, 
        0 0 20px #ff7f00, 
        0 0 30px #ffff00, 
        0 0 40px #00ff00, 
        0 0 50px #00ffff; /* Fényes és ragyogó árnyékok */
}


@keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

/* Betűtípus beágyazások */
@font-face {
    font-family: 'PressStart'; /* PressStart */
    src: url('/fonts/PressStart2P.ttf') format('truetype'); /* A betűtípus fájl helye */
}

@font-face {
    font-family: 'Minecraft Ten';
    src: url('/fonts/MinecraftTen.ttf') format('truetype'); /* TrueType betűtípus */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Szepseg'; /* Adj nevet a betűtípusnak */
    src: url('/fonts/EQUALIZER.otf') format('opentype'); /* Add meg az útvonalat a .otf fájlhoz */
    font-weight: normal; /* Állítsd be a súlyt, ha szükséges */
    font-style: normal; /* Állítsd be a stílust, ha szükséges */
}

@font-face {
    font-family: 'Minecraftia';
    src: url('/fonts/EQUALIZER.otf') format('opentype'); /* Add meg az útvonalat a .otf fájlhoz */
	font-weight: normal;
    font-style: normal;
}

.parent {
    width: 100%;
    text-align: center; /* Ez horizontálisan középre igazítja a gyerek elemeket */
}
/* Felirat robbanó effektus */
@keyframes explosion {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5) rotate(15deg);
        opacity: 0.5;
    }
    100% {
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }
}
h1:hover {
    animation: explosion 1s forwards; /* Alkalmazza az explosion animációt a hover eseményre */
}

/* Panel színek és 3D hatás */
.panel:nth-of-type(1) {
    background: rgba(193, 225, 193, 0.9); /* Világos fémes zöld szín átlátszósággal */
	font-size: 1.5em; /* Növeld a betűméretet, például 1.5em-ről 2em-re */
}

.panel:nth-of-type(2) {
    background: rgba(193, 225, 193, 0.9); /* Világos fémes zöld szín átlátszósággal */
	font-size: 1.5em; /* Növeld a betűméretet, például 1.5em-ről 2em-re */
}


.panel:nth-of-type(3) {
    background: rgba(193, 225, 193, 0.9); /* Világos fémes zöld szín átlátszósággal */
	font-size: 1.5em; /* Növeld a betűméretet, például 1.5em-ről 2em-re */
}


.panel:nth-of-type(4) {
    background: rgba(255, 183, 77, 0.9); /* Világos fémes sárga szín átlátszósággal */
	font-size: 1.0em; /* Növeld a betűméretet, például 1.5em-ről 2em-re */
    /* Villogó szöveg csak a panel-4 "TELEPITESI SEGED" szövegére */
 }
 
.panel#panel-4 .blinking-text {
        font-size: 1.5em; /* Növelt betűméret */
        animation: blink 3s infinite; /* Villogó szöveg animáció */
}

.panel:nth-of-type(5) {
    background: rgba(0, 191, 255, 0.9); /* Világos fémes kék szín átlátszósággal */
	font-size: 1.2em; /* Növeld a betűméretet, például 1.5em-ről 2em-re */
}

.panel:hover {
    transform: scale(1.05); /* Panel nagyítása */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); /* Erősebb árnyék */
    filter: brightness(1.1); /* Fehér ragyogás effektus */
    animation: glowing 1.5s infinite; /* Ragyogás animáció */
}

.done-icon {
    position: absolute; /* Abszolút pozicionálás a panelen belül */
    top: 10px; /* Távolság a panel tetejétől */
    right: 10px; /* Távolság a panel jobb szélétől */
    width: 40px; /* Kép szélessége (állítható) */
    height: auto; /* Arányosan méretezett magasság */
}

.first-icon {
    position: absolute; /* Abszolút pozicionálás a panelen belül */
    bottom: 0; /* Távolság a panel aljától */
    left: 50%; /* Kép középre igazítása vízszintesen */
    transform: translateX(-50%); /* Kép középre igazítása vízszintesen */
    width: 70%; /* Kép szélessége a panel szélességének 2/3-a */
    height: auto; /* Arányosan méretezett magasság */
}

.second-icon{
        position: absolute; /* Abszolút pozicionálás a panelen belül */
        bottom: 0; /* Távolság a panel aljától */
        left: 50%; /* Kép középre igazítása vízszintesen */
        transform: translateX(-50%); /* Kép középre igazítása vízszintesen */
        width: 70%; /* Kép szélessége a panel szélességének 2/3-a */
        height: auto; /* Arányosan méretezett magasság */
    
}
/* Felirat robbanó effektus */
@keyframes explosion {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5) rotate(15deg);
        opacity: 0.5;
    }
    100% {
        transform: scale(0) rotate(45deg);
        opacity: 0;
    }
}
/* Villogó animáció globális definiálása */
@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes glowing {
    0% {
        box-shadow: 0 0 10px #ffffff;
    }
    50% {
        box-shadow: 0 0 30px #ffffff;
    }
    100% {
        box-shadow: 0 0 10px #ffffff;
    }
}
/* Szöveg körvonal animáció */
@keyframes textOutline {
    0% {
        text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 25px #ff0000, 0 0 30px #ff0000, 0 0 35px #ff0000;
    }
    14% {
        text-shadow: 0 0 5px #ff7f00, 0 0 10px #ff7f00, 0 0 15px #ff7f00, 0 0 20px #ff7f00, 0 0 25px #ff7f00, 0 0 30px #ff7f00, 0 0 35px #ff7f00;
    }
    28% {
        text-shadow: 0 0 5px #ffff00, 0 0 10px #ffff00, 0 0 15px #ffff00, 0 0 20px #ffff00, 0 0 25px #ffff00, 0 0 30px #ffff00, 0 0 35px #ffff00;
    }
    42% {
        text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 15px #00ff00, 0 0 20px #00ff00, 0 0 25px #00ff00, 0 0 30px #00ff00, 0 0 35px #00ff00;
    }
    57% {
        text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff, 0 0 20px #00ffff, 0 0 25px #00ffff, 0 0 30px #00ffff, 0 0 35px #00ffff;
    }
    71% {
        text-shadow: 0 0 5px #0000ff, 0 0 10px #0000ff, 0 0 15px #0000ff, 0 0 20px #0000ff, 0 0 25px #0000ff, 0 0 30px #0000ff, 0 0 35px #0000ff;
    }
    85% {
        text-shadow: 0 0 5px #8b00ff, 0 0 10px #8b00ff, 0 0 15px #8b00ff, 0 0 20px #8b00ff, 0 0 25px #8b00ff, 0 0 30px #8b00ff, 0 0 35px #8b00ff;
    }
    100% {
        text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000, 0 0 15px #ff0000, 0 0 20px #ff0000, 0 0 25px #ff0000, 0 0 30px #ff0000, 0 0 35px #ff0000;
    }
}
/* Animáció a remegő szöveghez */
@keyframes shake {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(2px, 2px); /* Elmozdulás oldalra és lefelé */
    }
    50% {
        transform: translate(-2px, -2px); /* Elmozdulás balra és felfelé */
    }
    75% {
        transform: translate(2px, -2px); /* Elmozdulás oldalra és felfelé */
    }
}
/* Színes villogó animáció */
@keyframes colorBlink {
    0% { color: red; }
    25% { color: blue; }
    50% { color: green; }
    75% { color: yellow; }
    100% { color: red; }
}

#intro-message button {
    font-family: 'Minecraft Ten', Arial, sans-serif; /* Gomb szövegének betűtípusa */
}

.video-panel-title {
    font-family: 'Minecraft Ten', Arial, sans-serif; /* Videó panel címek betűtípusa */
}

/* Üzenőfal stílusa */
#message-board, .message-text {
    font-family: 'Minecraft Ten', sans-serif; 
}

.info-text {
    width: 90%;
    margin: 0 auto 20px auto; /* Középre igazítva és margó az üzenőfal felett */
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    border: 2px solid #000; /* Fekete keret */
    border-radius: 12px; /* Lekerekített sarkok */
    font-family: 'PressStart', Arial, sans-serif; /* Ugyanaz a betűtípus, mint az üzenőfalé */
	font-size: 12px;
	line-height: 1.5;
    text-align: center; /* Szöveg középre igazítása */
	background: rgba(0, 191, 255, 0.7); /* Világos fémes zöld szín átlátszósággal */
}

.info-text2 {
    width: 52.5%;
	margin: 20px auto 20px auto; /* 20px margó a tetején */
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    border: 2px solid #000; /* Fekete keret */
    border-radius: 10px; /* Lekerekített sarkok */
    font-family: 'PressStart', Arial, sans-serif; /* Ugyanaz a betűtípus, mint az üzenőfalé */
	font-size: 12px; /* Betűméret (állítsd be a kívánt méretet) */
    text-align: center; /* Szöveg középre igazítása */
	line-height: 1.5;
	background: rgba(0, 191, 255, 0.7); /* Világos fémes zöld szín átlátszósággal */
	padding: 10px; /* 10px távolság a beviteli mező szélei és a szöveg között */
}

.container { /* Külső, nagy box */
    width: 50%;
    margin: auto;
    background: rgba(193, 225, 193, 0.7); /* Világos fémes zöld szín átlátszósággal */
    border: 2px solid #000; /* Fekete keret */
    border-radius: 12px; /* Lekerekített sarkok */
    padding: 20px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
	margin-top: 20px;
    background-image: url('/kepek/uzenofal_box_hatter.webp');
}

.message-box { /* Elküldött üzenetek a nagyobbik box */
    height: 300px;
    overflow-y: scroll;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    background: rgba(193, 225, 193, 0.7); /* Világos fémes zöld szín átlátszósággal */
    border: 2px solid #000; /* Fekete keret */
    border-radius: 0px; /* Lekerekített sarkok */
	font-family: 'PressStart', Arial, sans-serif; /* Ugyanaz a betűtípus, mint az üzenőfalé */
	font-size: 10px; /* Betűméret (állítsd be a kívánt méretet) */
	
}

.message {
    margin-bottom: 10px;
    line-height: 1.5; /* Sorok közötti távolság (1.5-szeres) */
    padding: 10px;
    border-radius: 5px;
    word-wrap: break-word;
    font-family: 'PressStart', Arial, sans-serif; /* Ugyanaz a betűtípus, mint az üzenőfalé */
    background: rgba(255, 255, 255, 0.3); /* Fehér háttér átlátszósággal */
    color: #000; /* Szöveg színe fekete */
}

.timestamp {
    font-family: 'EQUALIZER.otf', ; /* Timestamp betűtípusa */
    font-size: 6px; /* Kisebb betűméret a dátumhoz */
    color: #666; /* Halványabb szín */
    margin-top: -8px; /* Kisebb margó az üzenet és az idő között */
}

.kezdolap { /* Az kezdolap képének stílusa */
    background-color: rgba(0, 123, 255, 0.5); /* 50%-ban átlátszó kék */
    border: 2px solid black; /* Fekete szegély */
    border-radius: 10px; /* Lekerekített sarkok */
    width: 400px; /* Fix szélesség */
    margin: 20px auto; /* Automatikus középre igazítás és függőleges margó */
    text-align: center; /* Szöveg és tartalom középre igazítása */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Árnyék a box körül */
}

.kezdolap-img {
    max-width: 100%; /* A kép ne lépje túl a box szélességét */
    height: auto; /* Automatikus arányos magasság */
    cursor: pointer; /* Mutassa, hogy kattintható */
}

.input-box { /* Az üzenetírás mező */
    width: 100%; /* Az üzenetírás mező szélessége */
    max-width: 100%; /* Maximum szélesség beállítása */
}

.message-date {
    font-family: 'Arial', sans-serif; /* Sans-serif betűtípus */
    font-size: 10px; /* Betűméret */
    color: #555; /* Dátum színe (opcionális) */
}

.message {  /* Üzenetek közötti távolság */
    margin-bottom: 5px; 
}

/* Beviteli mező stílusa */
#messageInput {
    font-family: 'PressStart', cursive; /* Betűtípus beállítása */
    width: 100%; /* Szélesség beállítása */
    padding: 10px; /* Belső margó */
    border: 2px solid #3498db; /* Keret színe */
    border-radius: 5px; /* Lekerekített sarkok */
    background-color: rgba(255, 255, 255, 0.7); /* Fehér háttér átlátszósággal */
    color: #333; /* Szöveg színe */
    resize: none; /* Méret átméretezés letiltása */
}

/* Képesség a helymeghatározó szöveg stílusának beállításához */
#messageInput::placeholder {
    color: #aaa; /* Placeholder szöveg színe */
    font-style: italic; /* Dőlt betű */
}


button { /* Küldés gomb */
    font-family: 'Szepseg', Arial, sans-serif;
    font-size: 24px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    border: 4px solid #000;
    color: white;
    cursor: pointer;
	margin-top: 20px; /* További hely az előző box és a gomb között */
}

button:hover {
    background-color: #45a049; /* Sötétebb szín, amikor a gomb fölé viszik az egeret (opcionális) */
}

/* Automatikus görgetés az utolsó üzenetre */
window.onload = function() {
    var elem = document.getElementById('message-end');
    if (elem) {
        elem.scrollIntoView({ behavior: 'smooth' });
    }
};