*{

	margin:0;

	padding:0;

	outline:none;

	box-sizing: border-box;

}



/* Alap stílusok */



body {



    font-family: 'Oxanium', sans-serif;



    background-color: #0a0a0a;



    color: #ffffff;



    margin: 0;



    padding: 0;



    text-align: center;



    line-height: 1.6;



    background-image: url('images/stars_background.jpg');



    background-size: cover;



    background-attachment: fixed;



    min-height: 100vh;



    display: flex;



    flex-direction: column;



}







/* Header link stílus */



header h1 a.header-link {



    color: #ffc500; /* Megegyezik a header h1 színével */



    text-decoration: none; /* Eltávolítja az aláhúzást */



    font-size: 1.1em; /* Megegyezik a header h1 betűméretével */



    font-family: 'Oxanium', sans-serif; /* Megegyezik a body betűtípusával */



    display: inline-block; /* Biztosítja, hogy a link a h1-gyel azonos módon viselkedjen */



    margin: 0; /* Megegyezik a header h1 margójával */



    transition: color 0.3s ease-in-out; /* Opcionális: sima színátmenet hover esetén */



}







header h1 a.header-link:hover {



    color: #A7864D; /* Hover hatás, hogy illeszkedjen a navigációs linkekhez */



}







.white-text {



  color: #d1d1d1;



}



.white-text strong {



  color: #A7864D;



}



.iae-section .lumi-text {

  color: #FFFFFF !important;

}







.highlight-h1 {



    color: #A7864D;	



}







.highlight-h2 {



    color: #ffc500;



}







.highlight-h3 {



    color: #ffc500;



}







/* Alapértelmezett képes háttér minden oldalra */



header {



    background-image: url('images/space_background.jpg');



    background-size: cover;



    background-position: center;



    padding: 50px;



    border-bottom: 3px solid #A7864D;



    position: relative;



}







/* Általános header stílusok minden aloldalhoz */



header {



    background-size: cover;



    background-position: center;



    padding: 50px;



    border-bottom: 3px solid #A7864D;



    position: relative; /* Biztosítja, hogy a ::before réteg a headeren belül legyen */



}







/* Sötétítő réteg minden headerhez */



header::before {



    content: "";



    position: absolute;



    top: 0;



    left: 0;



    right: 0;



    bottom: 0;



    background: rgba(0, 0, 0, 0.4); /* Fekete átlátszó réteg */



    z-index: 1; /* A háttérkép fölött, de a szöveg alatt */



}







/* A header tartalma legyen a sötétítő réteg felett */



header > * {



    position: relative;



    z-index: 2; /* Tartalom a sötétítő réteg felett */



}







/* Egyedi háttérképek aloldalonként */



body.page-rolunk header {



    background-image: url('images/teszt20.jpg');



}







body.page-jatekrol header {



    background-image: url('images/teszt5.jpg');



}







body.page-patch header {



    background-image: url('images/patch3.jpg');



}







body.page-csapattev header {



    background-image: url('images/csapat2.jpg');



}







body.page-orgtortenet header {



    background-image: url('images/org1.jpg');



}



body.page-iae header {

    background-image: url('images/iaebanner.jpg');

    

    body.page-iae header::before {

    content: "";

    position: absolute;

    top: 0; left: 0; right: 0; bottom: 0;

    background: rgba(0, 0, 0, 0.9);

    z-index: 1;

}



}







/* Főoldal - videós háttér */



body.page-videoheader header {



    background-image: none;



    overflow: hidden;



}







body.page-videoheader header::before {



    content: "";



    position: absolute;



    top: 0; left: 0; right: 0; bottom: 0;



    background: rgba(0, 0, 0, 0.5);



    z-index: 1;



}







body.page-videoheader .background-video {



    position: absolute;



    top: 0; left: 0;



    width: 100%;



    height: 100%;



    object-fit: cover;



    z-index: 0;



}







body.page-videoheader header > *:not(.background-video) {



    position: relative;



    z-index: 2;



}







@media (min-width: 768px) {



  header {



    padding: 65px 0; /* PC-n megnövelt padding */



  }



}







/* Logó */



header img.logo {



    width: 150px;



    vertical-align: middle;



    margin-right: 4px;



}







header h1 {



    display: inline-block;



    color: #ffc500;



    margin: 0;



    font-size: 3em;



}







@media (min-width: 768px) {







    header img.logo {



        width: 150px;



        margin-right: 2px;



    }







    header h1 {



        font-size: 2.8em;



        margin: 0;



        position: relative;



        top: 6px; /* csak ha szükséges */



    }



}







/* Navigációs menü */



nav {



    width: 100%;



    max-width: 1200px;



    margin: 0 auto;



}







nav ul {



    list-style: none;



    padding: 0;



    margin-top: 20px;



    display: flex;



    justify-content: center;



    flex-wrap: nowrap;



    gap: 30px;



    white-space: nowrap;



}







nav ul li {



    margin: 0; /* inline-block nem kell már */



}







nav ul li a {



    color: #ffffff;



    text-decoration: none;



    font-size: 16px;



    padding: 10px 10px;



    border-radius: 20px;



    transition: all 0.3s ease-in-out;



}







nav ul li a:hover {



    background-color: #A7864D;



    color: #ffc500;



}







/* Reszponzív dizájn */



@media screen and (max-width: 768px) {



    header {



        padding: 30px 15px; /* Kisebb padding mobilon */



    }







    header h1 {



        font-size: 2em;



    }







    nav ul {



        margin-top: 10px;



        flex-direction: column;



        align-items: center;



        gap: 10px;



    }







    nav ul li {



        margin: 0;



    }



}







/* Csatlakozás szekció stílus */



.join-section {



    text-align: center; /* Középre igazítja a szöveget és a gombot */



    margin-top: 20px;



    margin-bottom: 30px;



}







/* Csatlakozás gomb stílus */



.join-discord-button {



    display: inline-block;



    padding: 10px 20px;



    background-color: #A7864D; /* Gomb színe */



    color: white;



    font-size: 16px;



    font-weight: bold;



    border: none;



    border-radius: 5px;



    text-align: center;



    text-decoration: none;



    margin-top: 10px;



    transition: background-color 0.3s ease;



}







.join-discord-button:hover {



    background-color: #8d7040;



}







/* Minden kép – alapstílus (PC-re) – módosítva #A7864D színre */

.welcome-image {

    max-width: 45%;

    height: auto;

    margin-top: 20px;

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(167, 134, 77, 0.3); /* #A7864D átkonvertálva RGBA-ba, 30% átlátszósággal */

    display: block;

    margin-left: auto;

    margin-right: auto;

}



/* Opcionális: Hover hatás hozzáadása (erősebb barna glow-ra) */

.welcome-image:hover {

    box-shadow: 0 4px 8px rgba(167, 134, 77, 0.5); /* Erősebb #A7864D glow hoverkor */

    transition: box-shadow 0.3s ease; /* Simán átmenet */

}



/* Mobilnézetre optimalizált méret – változatlan */

@media (max-width: 768px) {

    .welcome-image {

        max-width: 90%;

    }

    

    .gallery {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

        gap: 20px;

        max-width: 1200px;

        margin: 0 auto;

        padding: 20px;

    }



    .gallery-item {

        text-align: center;

    }



    .gallery-item img.welcome-image {

        width: 100%;

        max-width: 100%;

        height: auto;

    }      

}



/* Felsorolás stílus a "Mit kínálunk?" szekcióhoz */



main ul {



    text-align: left; /* Balra igazítás a felsoroláshoz */



    max-width: 800px; /* Korlátozzuk a szélességet, hogy ne legyen túl széthúzva */



    margin: 0 auto; /* Középre igazítjuk a listát, de a szöveg balra marad */



    padding-left: 20px; /* Kis behúzás a lista elemekhez */



}







main ul li {



    margin-bottom: 10px; /* Térköz az elemek között */



    font-size: 1em;



    color: #ffffff;



}







main a {



    color: #ffc500;



    text-decoration: none; /* Opcionális: eltávolítja az alapértelmezett aláhúzást */



}







main a:hover {



    color: #A7864D; /* Opcionális: hover hatás, hogy illeszkedjen a nav linkekhez */



    text-decoration: underline; /* Opcionális: aláhúzás hover esetén */



}







/* Fő tartalom */



main {



    padding: 50px 20px;



    background: rgba(17, 17, 17, 0.8);



    flex: 1;



}







/* Szekciók */



section {



    margin-bottom: 40px;



    padding: 20px;



    border-radius: 8px;



    background-color: #1e1e1e;



    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);



}







section h2 {



    color: #A7864D;



    font-size: 2em;



    margin-bottom: 20px;



}







/* Hírek szekció */



*,



*::before,



*::after {



    box-sizing: border-box;



}







#hirek-container {



    width: 100%;



    background: #121212;



    padding: 4rem 1rem;



    margin-bottom: 4rem;



}







/* Belső tartalom középre */



#hirek {



    max-width: 1200px;



    margin: 0 auto;



}







/* Címsor */



#hirek h2 {



    text-align: center;



    font-size: 2rem;



    color: #ff9800;



    text-transform: uppercase;



    margin-bottom: 3rem;



    word-wrap: break-word;



    max-width: 100%;



}







/* Hírek tartalom */



#hirek .hirek-tartalom {



    display: flex;



    flex-direction: column;



    gap: 2rem;



}







/* Egyéni hírek */



#hirek .nagy-hir,



#hirek .hir {



    background: #1f1f1f;



    padding: 2rem;



    border-radius: 12px;



    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);



    width: 100%;



    box-sizing: border-box;



    position: relative;



    transition: box-shadow 0.3s ease-in-out;





}







/* Hover effekt: scale helyett shadow, hogy ne nyúljon ki és ne okozzon görgetést */



#hirek .nagy-hir:hover,



#hirek .hir:hover {



    box-shadow: 0 6px 30px rgba(255, 152, 0, 0.3);



}







/* Címek a hírekben */



#hirek .nagy-hir h3,



#hirek .hir h3 {



    font-size: 1.8rem;



    color: #ffc500;



    display: flex;



    align-items: center;



    gap: 0.5rem;



    flex-wrap: wrap;



    word-wrap: break-word;



    max-width: 100%;



}







#hirek .hir h3 {



    font-size: 1.5rem;



}



.hir{

    display: flex;

    align-items: center;

    flex-direction: column;

    justify-content: space-between;

}





/* Leírás */



#hirek .nagy-hir p,



#hirek .hir p {



    font-size: 1rem;



    line-height: 1.6;



    word-wrap: break-word;



}







/* Két kisebb hír */



#hirek .kis-hirek {



    display: grid;



    grid-template-columns: repeat(2, 1fr);



    gap: 2rem;



}







/* Videó */



#hirek .video-container {



    position: relative;



    padding-bottom: 46.25%; /* 16:9 */



    height: 0;



    overflow: hidden;



    max-width: 100%;



    width: 100%;



    border-radius: 8px;



    margin-top: 1.5rem;



    background: #000;



}







#hirek .video-container iframe {



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    border: none;



    display: block;



}







/* Gomb */



#hirek .cta-button {



    display: inline-block;



    background: #ff9800;



    color: #121212;



    padding: 0.75rem 1.5rem;



    border-radius: 5px;



    text-decoration: none;



    text-transform: uppercase;



    font-weight: bold;



    margin-top: 1rem;



    transition: background 0.3s ease-in-out;



    white-space: normal;



    box-sizing: border-box;



    position: relative;



    z-index: 2;



}







#hirek .cta-button:hover {



    background: #ffa726;



}







/* Reszponzív */



@media (max-width: 768px) {



    #hirek .kis-hirek {



        grid-template-columns: 1fr;



    }







    #hirek .nagy-hir h3,



    #hirek .hir h3 {



        font-size: 1.3rem;



        line-height: 1.4;



    }







    #hirek .cta-button {



        padding: 0.5rem 1rem;



        font-size: 0.9rem;



    }

    



}







.image.main {



    display: block;



    margin: 0 0 3em 0;



    width: 100%;



}







.image.main img {



    width: 100%;



}







@media screen and (max-width: 736px) {



    .image.main {



        margin: 0 0 2em 0;



    }



}







/* Jelentkezés gomb */



.apply-button {



    display: inline-block;



    background: linear-gradient(135deg, #ffc500, #8d7040);



    color: #fff;



    font-size: 1.2em;



    padding: 12px 25px;



    border: none;



    border-radius: 25px;



    text-decoration: none;



    font-weight: bold;



    text-transform: uppercase;



    box-shadow: 0 0 15px rgba(167, 134, 77, 0.5);



    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;



}







.apply-button:hover {



    transform: scale(1.05);



    box-shadow: 0 0 20px rgba(167, 134, 77, 0.8);



}







.apply-button:active {



    transform: scale(0.95);



}







#main {



    padding: 0em 0 6em 0;



}







@media screen and (max-width: 736px) {



    #main {



        padding: 0em 0 4em 0;



    }



}







/* Történet konténer rácsa */



#tortenet-container {



    max-width: 1200px;



    margin: 0 auto;



    padding: 20px;



}







.tortenet-tartalom {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 oszlop, minimum 300px széles kártyák */



    gap: 20px;



}







/* Történet kártyák */



.tortenet {



    background: #1a1a2e;



    color: #fff;



    padding: 20px;



    border-radius: 10px;



    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);



    transition: transform 0.2s ease-in-out;



    height: fit-content; /* Egyenlő magasság a tartalomhoz igazítva */



}







.tortenet:hover {



    transform: scale(1.03);



}







.tortenet h3 {



    font-size: 1.2rem; /* Nagyobb betűméret a címekhez */



    margin-bottom: 10px;



}







.tortenet p {



    font-size: 1em;



    color: #ffffff;



}







/* Mobilos nézet */



@media (max-width: 768px) {



    .tortenet-tartalom {



        grid-template-columns: 1fr; /* Egy oszlop mobilon */



    }



}







#esemenyek-container {



    display: flex;



    flex-direction: column;



    gap: 20px;



}







.esemeny-tartalom {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));



    gap: 20px;



}







.esemeny {



    background: #1a1a2e;



    color: #fff;



    padding: 20px;



    border-radius: 10px;



    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);



    transition: transform 0.2s ease-in-out;



}







.esemeny:hover {



    transform: scale(1.03);



}







.esemeny h3 {



    font-size: 1.5rem;



    margin-bottom: 10px;



}







.esemeny p {



    font-size: 1rem;



    line-height: 1.5;



}







.esemeny .image {



    display: block;



    width: 100%;



    height: 200px;



    overflow: hidden;



    border-radius: 10px;



    margin: 10px 0;



}







.esemeny .image img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}







/* Logo alapstílus (meglévő) */



header img.logo {



    width: 150px;



    vertical-align: middle;



    margin-right: 4px;



}







/* Logo forgató animáció */



@keyframes logoSpinFade {



    0% {



        opacity: 0;



        transform: rotateY(0deg);



    }



    100% {



        opacity: 1;



        transform: rotateY(360deg);



    }



}







/* Animáció osztály, amit JS hozzáad */



.logo-animate {



    animation: logoSpinFade 2s ease-in-out forwards;



}







.video-grid {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));



    gap: 20px;



    max-width: 1200px;



    margin: 0 auto;



    padding: 20px;



}







.video-tile .video-wrapper {



    position: relative;



    padding-bottom: 56.25%; /* 16:9 arány */



    height: 0;



    overflow: hidden;



}







.video-tile iframe {



    position: absolute;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



}







/* CSS a footer.css-be vagy külön cookie.css-be */



#cookie-consent {



    position: fixed;



    bottom: 0;



    left: 0;



    right: 0;



    background: #A7864D;



    color: #fff;



    padding: 15px;



    z-index: 1000;



    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);



    display: none;



}







.cookie-content {



    max-width: 1200px;



    margin: 0 auto;



    text-align: center;



}







.cookie-content p {



    margin: 0 0 10px 0;



    font-size: 14px;



}







.cookie-content button {



    background: #FFC500;



    border: none;



    padding: 10px 20px;



    color: #A7864D;



    font-weight: bold;



    font-size: 15px;



    cursor: pointer;



    border-radius: 5px;



    transition: all 0.3s ease;



    font-family: 'Oxanium', sans-serif;



}







.cookie-content button:hover {



    background: #e6b000;



    transform: translateY(-2px);



    box-shadow: 0 2px 8px rgba(0,0,0,0.2);



}







/* Lábjegyzet */



footer {



    background: #001f3f;



    padding: 10px;



    width: 100%;



    color: #ffc500;



    font-size: 0.9em;



    margin-top: 20px;



    box-sizing: border-box; /* Padding ne növelje a szélességet */



}







/* Reszponzív dizájn */



@media screen and (max-width: 768px) {



    header h1 {



        font-size: 2em;



    }



    nav ul {



        margin-top: 10px;



    }



    nav ul li {



        display: block;



        margin: 5px 0;



    }



    section {



        padding: 15px;



    }



    .card {



        width: 100%;



        max-width: 100%;



    }



    .timeline {



        max-width: 100%;



    }



    .timeline-item {



        padding: 10px;



    }



    article {



        max-width: 100%;



        padding: 10px;



    }



    footer {



        margin-top: 10px;



        padding: 5px; /* Kisebb padding mobilon */



        font-size: 0.8em; /* Kisebb betűméret, ha túl magas lenne */



        color: #ffc500;



        max-width: 100%; /* Biztosítja, hogy ne lógjon ki */



        overflow: hidden; /* Kilógó tartalom elrejtése */



    }



}







#IAE {

    border-radius: 10px;

    height: fit-content;

    position: relative;

    overflow: hidden;

    margin-bottom: 40px;



}



/* háttérvideó stílus */

.iae-bg-video {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  z-index: 0;

  pointer-events: none;

}



/* sötétítő overlay a videó fölött */

.iae-overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  z-index: 1;

  pointer-events: none;

}



/* tartalom legyen a videó fölött */

.iae-section,

.iae-container,

.iae-content,

.iae-image {

  position: relative;

  z-index: 2;

}



/* IAE Szekció */



.iae-section {



  background-color: rgba(10, 10, 20, 0);



  border-radius: 15px;



  padding: 40px;



  margin: 60px auto;



  max-width: 1100px;



  box-shadow: 0 0 25px rgba(100, 150, 255, 0);



}







/* Flex konténer – kép balra, szöveg jobbra */



.iae-container {



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 40px;



}







/* Két kép egymás alatt */

.iae-image {

  flex: 1;

  display: flex;

  flex-direction: column;   /* <- ETTŐL LESZNEK EGYMÁS ALATT */

  gap: 20px;                /* Térköz a két kép között */

  justify-content: center;

}



.iae-image img {

  width: 100%;

  max-width: 420px;

  border-radius: 12px;

  box-shadow: 0 0 15px rgba(0, 100, 255, 0.3);

}



/* Szövegrész */

.iae-content {

  flex: 1.2;

  color: #fff;

  text-align: left;

}



.iae-content h2 {

  color: #A7864D;

  font-size: 1.8em;

  margin-bottom: 15px;

}



.iae-content p {

  line-height: 1.6;

  margin-bottom: 20px;

}



.cta-button {

  display: inline-block;

  background-color: #A7864D;

  color: #000;

  font-weight: bold;

  padding: 10px 20px;

  border-radius: 8px;

  margin-top: 15px;

  transition: background-color 0.3s ease;

}



.cta-button:hover {

  background-color: #8d7040;

}



/* Mobilbarát elrendezés */

@media (max-width: 768px) {

  .iae-container {

    flex-direction: column;

    text-align: center;

  }



  .iae-image img {

    max-width: 100%;

  }



  .iae-content {

    text-align: center;

  }

}



/* === LÉPÉSEK GRID === */



.steps-grid {



  display: grid;



  grid-template-columns: repeat(2, 1fr);



  gap: 30px;



  max-width: 1000px;



  margin: 0 auto 40px auto;



  padding: 0 20px;



  grid-auto-rows: 1fr; /* egyforma magasságú sorok */



}







.step-section {



  background-color: rgba(10, 10, 20, 0.9);



  border-radius: 15px;



  padding: 20px;



  box-shadow: 0 0 25px rgba(100, 150, 255, 0.15);



  text-align: center;



  display: flex;



  flex-direction: column;



  height: 100%;



  transition: transform 0.3s ease, box-shadow 0.3s ease;



}







.step-section:hover {



  transform: translateY(-8px);



  box-shadow: 0 12px 30px rgba(167, 134, 77, 0.25);



}







/* KÉPEK – NINCS LEVÁGÁS! */



.step-image {



  width: 100%;



  height: auto;



  max-height: 220px;



  object-fit: contain;



  object-position: center;



  background: #111;



  padding: 12px;



  border-radius: 12px;



  margin-bottom: 15px;



  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);



  transition: transform 0.3s ease;



}







.step-image:hover {



  transform: scale(1.02);



}







.step-section h2 {



  color: #A7864D;



  margin: 0 0 12px 0;



  font-size: 1.25rem;



  flex-shrink: 0;



}







.step-section p {



  margin: 8px 0;



  line-height: 1.6;



  flex-grow: 1;



}







.step-section a {



  color: #A7864D;



  font-weight: bold;



  text-decoration: none;



}







.step-section a:hover {



  text-decoration: underline;



}







.referral-box {



  background: rgba(167, 134, 77, 0.2);



  padding: 10px 15px;



  border-radius: 8px;



  font-family: 'Courier New', monospace;



  font-size: 1.1rem;



  margin: 12px 0;



  border: 1px solid #A7864D;



  display: inline-block;



}







/* 5. LÉPÉS – KÖZÉPEN */



.step-center {



  max-width: 700px;



  margin: 0 auto 40px auto;



  width: 100%;



}







/* MOBIL NÉZET */



@media (max-width: 768px) {



  .steps-grid {



    grid-template-columns: 1fr;



    padding: 0 15px;



    grid-auto-rows: auto;



    gap: 25px;



  }







  .step-image {



    max-height: 180px;



    padding: 10px;



  }







  .step-center {



    margin: 0 15px 35px 15px;



  }







  .step-section {



    padding: 18px;



  }



}









/* Üdvözlő kép Főoldal!!!!– alapstílus (PC-re) – módosítva #A7864D színre */

.welcome-image2 {

    max-width: 100%;

    height: auto;

    margin-top: 20px;

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(167, 134, 77, 0.3); /* #A7864D átkonvertálva RGBA-ba, 30% átlátszósággal */

    display: block;

    margin-left: auto;

    margin-right: auto;

}



/* Opcionális: Hover hatás hozzáadása (erősebb barna glow-ra) */

.welcome-image2:hover {

    box-shadow: 0 4px 8px rgba(167, 134, 77, 0.5); /* Erősebb #A7864D glow hoverkor */

    transition: box-shadow 0.3s ease; /* Simán átmenet */

}



/* Mobilnézetre optimalizált méret – változatlan */

@media (max-width: 768px) {

    .welcome-image2 {

        max-width: 90%;

    }

    

    .gallery {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

        gap: 20px;

        max-width: 1200px;

        margin: 0 auto;

        padding: 20px;

    }



    .gallery-item {

        text-align: center;

    }



    .gallery-item img.welcome-image2 {

        width: 100%;

        max-width: 100%;

        height: auto;

    }      

}



.new-features-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 40px;

    margin: 60px auto;

    max-width: 1300px;

    justify-content: center;

    padding: 0 20px;

}



.feature-box {

    background: rgba(20, 20, 40, 0.78);

    border: 1px solid #A7864D;

    border-radius: 15px;

    padding: 30px;

    flex: 1;

    min-width: 320px;

    max-width: 560px;

    text-align: center;

    box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);

    transition: transform 0.3s ease;

}



.feature-box:hover {

    transform: translateY(-8px);

}



.daily-lore-img {

    width: 100%;

    height: 220px;

    object-fit: cover;

    border-radius: 10px;

    margin: 18px 0 22px;

    border: 1px solid #00ffff33;

}



/* Dőlt, elegáns megjelenés */

#lore-content {

    font-style: italic;

    font-size: 1.15rem;

    line-height: 1.75;

    color: #e0faff;

    

}



@media (max-width: 868px) {

    .new-features-grid { flex-direction: column; align-items: center; }

    .feature-box { min-width: 90%; }

}