/*Világos mód------------------------------------------------------------------------------------------------------*/



@media (prefers-color-scheme: light) {


@media (min-width: 1090px) {

/*FŐ OLDAL~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f0f0f0;
}


.test{
    display: flex;
    flex-direction: column;
    height: 100vh;
}


div{
    display: block;
    unicode-bidi: isolate;
}


.logodiv{
    margin-top: 0px;
    flex-wrap: nowrap;
    text-align: right;
    width: 500px;
}



.logo{
    width: 100px;
    height: 100px;
    cursor: pointer;
    user-select: none
}



form{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}



.termekek{
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}


.global-modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
}

.global-modal-img {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 10px;
}

.global-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    font-weight: bold;
}





/*Kereső-----------------------------------------------------------------------------------------------*/

.kereso{
    width: 50%;
    background-color: #f1f1f1;
    border: solid gray 2px;
    border-radius: 10px 0 0 10px;
}

.keresodiv{
    display: flex;
    position: relative;
}


.kereso,
.kereso-gomb {
  height: 36px;
  line-height: 36px;
  box-sizing: border-box;
}



.Kereso_logo{
    width: 45px;
    height: auto;
    margin-top: -8px;
    height: fit-content;
}



.kereso-gomb {
  position: relative;
  width: 10%;
  border: solid gray 2px;
  border-radius: 0 10px 10px 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}

.kereso-gomb:hover {
    background-color: rgb(223, 223, 223);
    transition: 0.4s ease;
}



.kez-bal, .kez-jobb {
  position: absolute;
  top: 50%;
  width: 65px;
  transform: translateY(100%);
  opacity: 0;
  transition: 0.4s ease;
  pointer-events: none;
}

.tavcso-wrap {
    width: 100%;
    height: auto; 
    display: block;
}

.ikon-wrap {
    position: relative;
    display: inline-block;
    user-select: none
}

.kez-bal {
  left: calc(-46px);
  top: calc(20px);
  transform: translateX(-100%);
}

.kez-jobb {
  right: calc(-35px);
  top: calc(20px);
  transform: translateX(100%);
}


.kereso-gomb:hover .kez-bal,
.kereso-gomb:hover .kez-jobb {
  opacity: 1;
  transform: translateX(6px) translateY(-25px) scale(1.05);
}



/*Fejlécek---------------------------------------------------------------------------------------*/


.fejlec-1{
    width: 100%;
    height: 180px;
    transition: transform 0.5s ease;
    z-index: 999;
}

.fejlec-1.hide {
    transform: translateY(-138px);
    transition: transform 0.5s ease;
    z-index: 999;
}

.fejlec-2{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 45px;
    margin-top: -15px;
    text-align: center;
    background-color: rgb(32, 32, 32);
    color: rgb(223, 222, 233);
}


.fejlec-3{
    width: 100%;
    margin-top: 0px;
    flex-wrap: nowrap;
}


.fejlec-3-1{
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}


.fejlec-3-2{
    position: relative;
    width: 20px;
    margin-left: 1%;
    top: 4px;
}



.fejlec-4{
    display: flex;
    height: 60px;
    align-items: center;
}


.idk{
    width: 40%;
}


.telefonakkoreltunik{
    pointer-events: none;
}

.fejlec-valasztasok{
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.valasztasok-gomb, .valasztasok-gomb-bezar{
    visibility: hidden;
    position: absolute;
}


.valasztas-li{
    float: left;
    width: 25%;
    height: 44px;
    text-align: center;
    list-style: none;
}


.valasztas-ul{
    margin-left: -41px;
}







.fejlec-gomb.aktiv.javit {
    background-color: rgb(250, 209, 161);
    transition: background-color 0.5s ease;
}
.fejlec-gomb.aktiv.csillag {
    background-color: none;
}
.fejlec-gomb.aktiv.vadasz {
    background-color: rgb(163, 238, 163);
    transition: background-color 0.5s ease;
}


.fejlec-gomb.aktiv.tenger {
    background-color: rgb(190, 215, 231);
    transition: background-color 0.5s ease;
}









.nyitvatartas, .email, .telefonszam{
    position: absolute;
}

.nyitvatartas{
    margin-top: 5px;
}

.email{
    left: 65%;
}

.telefonszam{
    right: 65%;
}



.fejlec-gomb{
    width: 100%;
    height: 100%;
    border: none;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background-color: rgb(170, 170, 170);
    border: solid gray 1px;
}


@keyframes fejlec-gomb-asd {
    from {  }
    to { border-radius: 0 0 10px 10px; height: 50px; z-index: 20; }
}

.fejlec-gomb.aktiv{
    animation: fejlec-gomb-asd 0.5s forwards;
}
.fejlec-gomb.csillag.aktiv{
     border-radius: 0 0 10px 10px;
     height: 50px;
     z-index: 20;
     transition: border-radius 0.5s ease, height 0.5s ease, z-index 0s;
}


.cart-counter {
    padding: 2px;
    font-weight: bold;
    text-align: center;
}


.valasztoful{
    width: 300px;
    height: 100%;
    margin: -15px;
    margin-top: -30px;
}



/*Szűrők----------------------------------------------------------------------------------------*/

        .oldal-menu {
          position: fixed;
          top: 180px;
          left: 0;
          background-color: rgb(213, 213, 213);
          padding: 2rem 0rem;
          display: flex;
          flex-direction: column;
          border-right: solid rgba(128, 128, 128, 0.484) 3px;
          overflow-y: auto;
          overflow-x: hidden;
          height: calc(100vh - 245px);
          transition: left 0.3s ease, height 0.5s ease, top 0.5s ease;
        }

        .oldal-menu.show {
          left: -450px;
        }

        .oldal-menu.hide{
            top: 0px;
            height: 100vh;
            transition: height 0.5s ease, top 0.5s ease;
        }
        

        #menuToggle {
            z-index: 5;
            position: absolute;
            top: 102px;
            background: rgb(170, 170, 170);
            cursor: pointer;
            width: 60px;
            height: 35px;
            border-radius: 0 5px 0 0;
            border: solid gray 1px;
            border-style: solid solid none none;
        }


        .szuro{
            position: relative;
            width: 18px;
        }


        #szuroszamlalo{
            position: absolute;
            top: 10px;
            left: 55%;
        }


        #szurotorlo{
            position: absolute;
            width: 200px;
            top: 25px;
            left: 36px;
            color: rgb(82, 2, 2);
            border: none;
            background-color: rgb(235, 235, 235);
            border-radius: 50px;
        }
        #szurotorlo:hover{
            background-color: rgb(213, 213, 213);
            transition: 0.2s ease;
        }
        #szurotorlo:active{
            transform: scale(0.95);
            transition: 0.1s ease;
        }
        

.kocka{
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    margin-top: 50px;
}



.menu-open .tartalom {
    transition: margin-left 0.1s ease, transform 0.5s ease, height 0.5s ease;
    margin-left: 0px;
    transition-delay: 0s;
}


.tartalom {
    transition: margin-left 0.21s ease-out, transform 0.5s ease, height 0.5s ease;
    transition-delay: 0.07s;
    margin-left: 274px;
    height: calc(100vh - 180px);
}

.tartalom.hide{
    height: 100%;
    transform: translateY(-140px);
    transition: transform 0.5s ease, height 0.3s ease;
}




#range-output-min, #range-output-max {
    width: 70px;
    height: 20px;
}


.csuszka-ertekek {
    position: relative;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}


.szurok-allja{
    height: 80px;
}


.valasztoful h1 {
    position: relative;
    font-size: 20px;
    top: 50px;
    right: -50px;
}


.beallitasok{
    position: relative;
    top: 60px;
    left: 35px;
}

.beallitasok-td-1{
    width: 110px;
}

.beallitasok-td-2{
    width: 110px;
    text-align: center;
}



/*VÁLASZTÁS~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*főoldal*/



/*javítás*/


/*gomb*/


.anim-wrap {
    position: absolute;
    inset: 0;
    width: 200px;
    height: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none
}


.csavarhuzo{
    opacity: 0;
    z-index: 2;
}

.csavarhuzo,
.fogaskerek, 
.fogaskerekek-szele,
.fogaskerekek-szele-2 {
    position: absolute;
    user-select: none;
    transition: opacity 0.4s ease, transform 0.6s ease;
}
.fogaskerekek-szele,
.fogaskerekek-szele-2{
    z-index: -1;
    opacity: 0;
}

.fejlec-gomb.javit.aktiv .csavarhuzo,
.fejlec-gomb.javit.aktiv .fogaskerek {
    transform: translateY(0);
}

.csavarhuzo.bal,.csavarhuzo.jobb {
    width: 80px;
}


@keyframes becsusz-bal {
    0% {
        transform: translateX(-255px) translateY(-63px) rotate(15deg) scaleX(-1);
    }
    100% {
        transform: translateX(-143px) translateY(10px) rotate(15deg) scaleX(-1);
    }
}
@keyframes fordul-bal {
    0% {
        transform: translateX(-143px) translateY(10px) rotate(15deg) scaleX(-1);
    }
    100% {
        transform: translateX(-142px) translateY(28px) rotate(-15deg) scaleX(-1);
    }
}
@keyframes megjelen-csavarh {
    from { opacity: 0; }
    to { opacity: 1; }
}



.fejlec-gomb.javit.aktiv .csavarhuzo.bal {
    animation:
        becsusz-bal 0.5s ease-out forwards,
        fordul-bal 0.4s ease-out forwards 0.5s,
        megjelen-csavarh 0s linear forwards;
}










@keyframes becsusz-jobb {
    0% {
        transform: translateX(200px) translateY(-65px) rotate(-15deg);
    }
    100% {
        transform: translateX(64px) translateY(10px) rotate(-15deg);
    }
}
@keyframes fordul-jobb {
    0% {
        transform: translateX(64px) translateY(10px) rotate(-15deg);
    }
    100% {
        transform: translateX(62px) translateY(28px) rotate(15deg);
    }
}



.fejlec-gomb.javit.aktiv .csavarhuzo.jobb {
    animation:
        becsusz-jobb 0.5s ease-out forwards,
        fordul-jobb 0.4s ease-out forwards 0.5s,
        megjelen-csavarh 0s linear forwards;
}



@keyframes forgas-jobb {
    from { transform: rotate(0deg); }
    to { transform: rotate(30deg); }
}

@keyframes forgas-bal {
    from { transform: rotate(0deg); }
    to { transform: rotate(-30deg); }
}


.fogaskerek.jobb {
    width: 40px;
    right: 10px;
    top: 9px;
}

.fogaskerek.bal {
    width: 40px;
    right: 150px;
    top: 10px;
}


.fejlec-gomb.javit.aktiv .fogaskerek.jobb {
    animation: forgas-jobb 0.35s ease-out forwards;
    animation-delay: 0.5s;
}

.fejlec-gomb.javit.aktiv .fogaskerek.bal {
    animation: forgas-bal 0.35s ease-out forwards;
    animation-delay: 0.5s;
}



.fkerekek {
    position: absolute;
    margin: auto;
    width: 100%;
    inset: 0;
}

.fejlec-gomb.javit.aktiv .kimegy-jobb {
    position: relative;
    float: right;
    right: 95px;
}

.fejlec-gomb.javit.aktiv .kimegy-bal{
    position: relative;
    float: left;
    left: 285px;
}







@keyframes fogaskerekek-szele {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fkerekek {
    from { opacity: 0; }
    to { opacity: 1; }
}


.fejlec-gomb.javit.aktiv .fogaskerekek-szele {
    animation:
        fkerekek 0.5s forwards,
        fogaskerekek-szele 1.2s ease-in,
        fogaskerekek-szele 1s linear infinite;
    animation-delay: 0s, 0.6s, 1.8s;
}


.fejlec-gomb.javit.aktiv .fogaskerekek-szele-2 {
    animation:
        fkerekek 0.5s forwards,
        fogaskerekek-szele 1.2s ease-out reverse,
        fogaskerekek-szele 1s linear infinite reverse;
    animation-delay: 0s, 0.6s, 1.8s;
}


@keyframes kimegy {
    from { transform: translateX(80px); opacity: 0; }
    to { transform: translateX(0%); opacity: 1; }
}

.fejlec-gomb.javit.aktiv .kimegy-jobb{
    animation: kimegy 0.5s forwards;
}


@keyframes kimegy-2 {
    from { transform: translateX(-80px); opacity: 0; }
    to { transform: translateX(0%); opacity: 1; }
}

.fejlec-gomb.javit.aktiv .kimegy-bal{
    transform: translateX(50%);
    animation: kimegy-2 0.5s forwards;
}













/*csillagászat*/


/*gomb*/


@keyframes csillag-hatter-szoveg {
    from {color: #000000;}
    to {color: #ffffff;}
}



.fejlec-gomb.aktiv.csillag {
    animation: csillag-hatter-szoveg 0.5s forwards;
}



.csillag-hatter-csillagkep{
    position: absolute;
    z-index: 1;
    transform: translateY(-51.5%) scale(0.11);
    top: 36px;
}
.csillag-hatter-csillagkep-2{
    position: absolute;
    z-index: 1;
    transform: translateY(-51.5%) scale(0.11);
    top: 36px;
}
@keyframes csillag-hatter-csillagkep {
    from { transform: translateY(-51.5%) scale(0.11);}
    to { transform: translateY(-51.5%) scale(0.15);}
}
@keyframes csillag-hatter-csillagkepasd {
    from { opacity: 1;}
    to { opacity: 0;}
}

.fejlec-gomb.csillag.aktiv .csillag-hatter-csillagkep {
    animation: csillag-hatter-csillagkep 1s ease-in-out forwards,
    csillag-hatter-csillagkepasd 0.7s forwards;
}





.csillag-hatter-csillagkep-2{
    position: absolute;
    z-index: 1;
    transform: translateY(-51.5%) scale(0.11);
    
}

@keyframes csillag-hatter-csillagkep-2 {
    from { transform: translateY(-51.5%) scale(0.11);}
    to { transform: translateY(-51.5%) scale(0.15);}
}


.fejlec-gomb.csillag.aktiv .csillag-hatter-csillagkep-2 {
    animation: csillag-hatter-csillagkep-2 1s ease-in-out forwards;
}






.gomb-szoveg {
    position: relative;
    z-index: 20;
}

.csillag-hatter{
    position: absolute;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%) scale(0.3) rotate(90deg);
    opacity: 0;
}


@keyframes csillag-hatter-1 {
    from { transform: translateX(-50%) translateY(-50%) scale(0.3) rotate(90deg);opacity: 0;}
    to { transform: translateX(-50%) translateY(-50%) scale(0.2) rotate(90deg);opacity: 1;}
}


.fejlec-gomb.csillag.aktiv .csillag-hatter {
    animation: csillag-hatter-1 0.5s ease-in-out forwards;
}




.csillag-hatter-2{
    position: absolute;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%) scale(0.3);
    opacity: 0;
}

@keyframes csillag-hatter-2 {
    from { transform: translateX(-50%) translateY(-50%) scale(0.2); opacity: 1;}
    to { transform: translateX(-50%) translateY(-50%) scale(0.3); opacity: 1;}
}


.fejlec-gomb.csillag.aktiv .csillag-hatter-2 {
    animation: csillag-hatter-2 0.8s ease-in-out forwards;
}


.csillag {
    position: relative;
}

.fejlec-gomb.csillag.aktiv .csillag-pont {
    position: relative;
    width: 6px;
    height: 6px;
    background-image: url('Valasztas_oldalak/Csillagászat/Images/Egy-csillag.png');
    background-size: cover;
    opacity: 0;
    animation: csillag-pislak 2s ease-in-out infinite;
}

@keyframes csillag-pislak {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.3); }
}



.hullocsillag {
    position: absolute;
    width: 10px;
    height: 5px;
    background-image: url('Valasztas_oldalak/Csillagászat/Images/Hullocsillag.png');
    background-size: cover;
    opacity: 0;
    pointer-events: none;
}

@keyframes hullocsillag-ut {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(-1) rotate(var(--angle));
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(-0.5) rotate(var(--angle));
    }
}





/*oldal*/






/*Vadászat*/



/*gomb*/



@keyframes vad-eltunik {
    from { opacity: 1; }

    to { opacity: 0; }
}


.madar{
    right: 157px;
    top: 13px;
}


.fejlec-gomb.vadasz.aktiv .madar{
    animation: vad-eltunik 0s forwards;
}

.fejlec-gomb.vadasz.aktiv .ozike{
    animation: vad-eltunik 0s forwards;
}


.ozike{
    right: 10px;
    top: 7.5px;
}


.ozike-1, .ozike{
    position: absolute;
    width: 40px;
}



.madar-1, .madar{
    position: absolute;
    width: 30px;
}


@keyframes vad-megjelen {
    from { opacity: 0; }

    to { opacity: 1; }
}

.madar-1{
    right: 157px;
    top: 13px;
    opacity: 0;
}

@keyframes madar-anim {
    0% { transform: translateX(0) translateY(0) rotate(0deg); }
    50%{ transform: translateX(25px) translateY(-10px) rotate(-8deg); }
    100% { transform: translateX(30px) translateY(-11px) rotate(0deg); }
}


.fejlec-gomb.vadasz.aktiv .madar-1{
    animation: vad-megjelen 0s forwards,
    madar-anim 0.7s forwards;
}

.fejlec-gomb.vadasz.aktiv .ozike-1{
    animation: vad-megjelen 0s forwards;
}



.ozike-1{
    right: 10px;
    top: 7.5px;
    opacity: 0;
}








.level-bal{
    opacity: 0;
}

.level-jobb{
    opacity: 0;
}



.levelek {
    position: absolute;
    margin: auto;
    width: 100%;
    inset: 0;
    background-color: #000000;
}


.kimegy-jobb-level, .kimegy-bal-level{
    top: -10px;
    user-select: none;
}

.kimegy-jobb-level {
    position: relative;
    float: right;
    right: -10px;
}

.kimegy-bal-level{
    position: relative;
    float: left;
    left: 35px;
}






@keyframes levelek-szele {
    from {
        transform: rotate(90deg) scalex(-1);
        
    }
    to {
        transform: rotate(0) scalex(-1);
        
    }
}


@keyframes level-szel {
    0%   { transform: rotate(0deg) translateX(0%) translateY(0) scalex(-1); }
    25%  { transform: rotate(5deg) translateX(1px) translateY(1px) scalex(-1); }
    50%  { transform: rotate(8deg) translateX(3px) translateY(1px) scalex(-1); }
    75%  { transform: rotate(7deg) translateX(2px) translateY(0px) scalex(-1); }
    100% { transform: rotate(0deg) translateX(0%) translateY(0) scalex(-1); }
}

.fejlec-gomb.vadasz.aktiv .level-jobb{
    position: absolute;
    animation: levelek-szele 0.5s forwards,
    level-szel 5s ease-in-out infinite 0.5s,
    levelek-szele-megjelen 0s forwards;
}



@keyframes levelek-szele-bal {
    from {
        transform: rotate(-90deg) scaley(-1);
        
    }
    to {
        transform: rotate(0) scaley(-1);
        
    }
}


@keyframes level-szel-bal {
    0%   { transform: rotate(0deg) translateX(0%) translateY(0) scaley(-1); }
    25%  { transform: rotate(-5deg) translateX(1px) translateY(1px) scaley(-1); }
    50%  { transform: rotate(-8deg) translateX(3px) translateY(1px) scaley(-1); }
    75%  { transform: rotate(-7deg) translateX(2px) translateY(0px) scaley(-1); }
    100% { transform: rotate(0deg) translateX(0%) translateY(0) scaley(-1); }
}

@keyframes levelek-szele-megjelen {
    from { opacity: 0; }

    to { opacity: 1; }
}


.fejlec-gomb.vadasz.aktiv .level-bal{
    position: absolute;
    animation: levelek-szele-bal 0.5s forwards,
    level-szel-bal 5s ease-in-out infinite 0.5s,
    levelek-szele-megjelen 0s forwards;
}





@keyframes kimegy-jobb-levelek {
    from { transform: translateX(30px) translateY(-100px);}
    to { transform: translateX(0%) translateY(0);}
}


.fejlec-gomb.vadasz.aktiv .kimegy-jobb-level {
    position: absolute;
    width: 0%;
    animation: kimegy-jobb-levelek 0.5s forwards;
}


@keyframes kimegy-bal-levelek {
    from { transform: translateX(-30px) translateY(-100px);}
    to { transform: translateX(0%) translateY(0);}
}


.fejlec-gomb.vadasz.aktiv .kimegy-bal-level {
    position: absolute;
    width: 0%;
    animation: kimegy-bal-levelek 0.5s forwards;
}





/*oldal*/





/*Tengerészet*/



/*gomb*/




.vtorony{
    position: absolute;
    width: 30px;
    right: 15px;
    top: 15px;
}
.hajo{
    position: absolute;
    width: 30px;
    left: 15px;
    top: 15px;
}


@keyframes hajo-rangas {
    0% { transform: rotate(0);}
    25% { transform: rotate(5deg) translatex(2px);}
    50% { transform: rotate(0);}
    75% { transform: rotate(-5deg) translatex(-2px);}
    100% { transform: rotate(0);}
}

.fejlec-gomb.tenger.aktiv .hajo{
    animation: hajo-rangas 3s linear infinite;
}




@keyframes viz-elojon {
    from { }
    to { top: 20px; }
}
@keyframes viz-elojon-2 {
    from { }
    to { top: -3px; }
}


.fejlec-gomb.tenger.aktiv .tenger-1 {
    animation: viz-elojon 0.5s ease-out forwards,
    tenger-rangas 2s linear infinite;
}
.fejlec-gomb.tenger.aktiv .tenger-2 {
    animation: viz-elojon-2 0.5s ease-out forwards,
    tenger-rangas-2 2s linear infinite;
}

@keyframes tenger-rangas {
    0% { transform: translateX(0);}
    50% { transform: translateX(20px) translateY(2px);}
    100% { transform: translateX(0);}
}

.tenger-1{
    position: relative;
    right: 160px;
    top: 50px;
    width: 250%;
    height: 40px;
}

@keyframes tenger-rangas-2 {
    0% { transform: translateX(0);}
    50% { transform: translateX(-10px);}
    100% { transform: translateX(0);}
}

.tenger-2{
    position: relative;
    right: 200px;
    top: 50px;
    width: 300%;
    height: 10px;
}



/*oldal*/


}




/*Kis méret-------------------------------------------------------------------------------------------------------*/




@media (max-width: 1090px) {


/*FŐ OLDAL~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f0f0f0;
}


.test{
    display: flex;
    flex-direction: column;
    height: 100vh;
}


div{
    display: block;
    unicode-bidi: isolate;
}



.logo{
    width: 80px;
    height: 80px;
    cursor: pointer;
    user-select: none
}


@media (max-width: 369px) {
    .logo{
        position: relative;
        left: -20px;
    }
}



.logodiv{
margin-top: 0px;
flex-wrap: nowrap;
display: flex;
justify-content: right;
width: 110px;
}

@media (min-width: 730px) {
    .logodiv{
    width: 190px;
}
}

form{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}



.termekek{
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}


.global-modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
}

.global-modal-img {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 10px;
}

.global-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: white;
    cursor: pointer;
    font-weight: bold;
}





/*Kereső-----------------------------------------------------------------------------------------------*/

.kereso{
    width: 55%;
    background-color: #f1f1f1;
    border: solid gray 2px;
    border-radius: 10px 0 0 10px;
}


.keresodiv{
    margin-left: 40px;
    position: absolute;
    top: 85px;
}


.kereso,
.kereso-gomb {
  height: 30px;
  line-height: 36px;
  box-sizing: border-box;
}



.Kereso_logo{
    width: 40px;
    margin-top: -8px;
}



.kereso-gomb {
  position: relative;
  width: 70px;
  border: solid gray 2px;
  border-radius: 0 10px 10px 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}

.kereso-gomb:hover {
    background-color: rgb(223, 223, 223);
    transition: 0.4s ease;
}



.kez-bal, .kez-jobb {
  position: absolute;
  top: 50%;
  width: 65px;
  transform: translateY(100%);
  opacity: 0;
  transition: 0.4s ease;
  pointer-events: none;
}

.tavcso-wrap {
    width: 100%;
    height: auto; 
    display: block;
}

.ikon-wrap {
    position: relative;
    display: inline-block;
    user-select: none
}

.kez-bal {
  left: calc(-45px);
  top: calc(19px);
  transform: translateX(-100%);
}

.kez-jobb {
  right: calc(-34px);
  top: calc(19px);
  transform: translateX(100%);
}


.kereso-gomb:hover .kez-bal,
.kereso-gomb:hover .kez-jobb {
  opacity: 1;
  transform: translateX(6px) translateY(-25px) scale(0.9);
}



@media (min-width: 730px) {
    
.kereso{
    width: 50%;
    background-color: #f1f1f1;
    border: solid gray 2px;
    border-radius: 10px 0 0 10px;
}

.keresodiv{
    top: 4px;
    left: -140px;
    position: relative;
}


.kereso,
.kereso-gomb {
  height: 36px;
  line-height: 36px;
  box-sizing: border-box;
}


}


/*Fejlécek---------------------------------------------------------------------------------------*/


.fejlec-1{
    z-index: 20;
    width: 100%;
    height: 180px;
    background-color: rgb(248, 248, 248);
    border: solid gray 3px;
    border-style: none none solid none;
    transition: transform 0.5s ease;
}

.fejlec-1.hide {
    transform: translateY(-100%);
    transition: transform 0.5s ease;
}

.fejlec-2{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 45px;
    margin-top: -35px;
    text-align: center;
    background-color: rgb(32, 32, 32);
    color: rgb(223, 222, 233);
}


.fejlec-3{
    width: 100%;
    margin-top: 0px;
    flex-wrap: nowrap;
}


.fejlec-3-1{
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}


.fejlec-3-2{
    position: relative;
    width: 20px;
    margin-left: 1%;
    top: 4px;
}



.fejlec-4{
    position: relative;
    display: flex;
    height: 80px;
    align-items: center;
}

.fejlecfeljebb{
    text-align: right;
    top: -30px;
}


.idk{
width: 65%;
position: absolute;
right: 20px;
}


.telefonakkoreltunik{
    pointer-events: none;
}
.telefonakkoreltunik.hide{
    pointer-events: none;
    top: 95px;
}

@media (max-height: 280px) {
    .javit{
        right: 190px;
    }
    .csillag{
        right: 190px;
    }

    .vadasz{
        left: 179px;
        top: -88px;
    }
    .tenger{
        left: 179px;
        top: -88px;
    }
}


.fejlec-valasztasok{
    width: 0;
    height: 300px;
    margin-top: 260px;
    z-index: 999;
    border-radius: 0 0 30px 30px;
    background-color: rgba(231, 231, 231, 0.884);
    left: -11px;
    overflow: hidden;
    position: absolute;
    pointer-events: auto;
    transition: transform 0.5s ease, width 0.2s ease;
}


.fejlec-valasztasok.active{
    width: 101%;
    transform: translateX(10px);
}


.valasztasok-gomb, .valasztasok-gomb-bezar{
    position: absolute;
    visibility: visible;
}

.valasztasok-gomb{
z-index: 20;
width: 100px;
height: 40px;
top: 3.45cm;
background-color: rgb(226, 226, 226);
border:solid gray 1px;
border-radius: 0 0 5px 0;
border-style: solid solid solid none;
}

.valasztasok-gomb-bezar{
    position: absolute;
    width: 40px;
    height: 40px;
    right: 0px;
    background-color: transparent;
    border: unset;
    text-align: center;
    font-size: 25px;
}

.valasztas-li{
    float: left;
    width: 100%;
    height: 44px;
    text-align: center;
    list-style: none;
    overflow: visible;
}



.valasztas-ul {
    width: fit-content;
    flex-direction: column;
    padding: 0;
    margin: 0 auto;
    margin-top: 50px;
}







.fejlec-gomb.aktiv.javit {
    background-color: rgb(250, 209, 161);
    transition: background-color 0.5s ease;
}
.fejlec-gomb.aktiv.csillag {
    background-color: none;
}
.fejlec-gomb.aktiv.vadasz {
    background-color: rgb(163, 238, 163);
    transition: background-color 0.5s ease;
}


.fejlec-gomb.aktiv.tenger {
    background-color: rgb(190, 215, 231);
    transition: background-color 0.5s ease;
}









.nyitvatartas, .email, .telefonszam{
    position: absolute;
}

.nyitvatartas{
    margin-top: 5px;
}

.email{
    left: 65%;
    visibility: hidden;
}

.telefonszam{
    right: 65%;
    visibility: hidden;
}




.kijelentkezes{
    position: absolute;
    right: 10px;
    top: -25px;
    color: rgb(82, 2, 2);
    font-weight: bold;
}




.fejlec-gomb{
    width: 100%;
    height: 100%;
    border: none;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background-color: rgb(170, 170, 170);
    border: solid gray 1px;
}


@keyframes fejlec-gomb-asd {
    from {  }
    to { border-radius: 10px; height: 50px; z-index: 20; transform: translateY(-3.5px); }
}

.fejlec-gomb.aktiv{
    animation: fejlec-gomb-asd 0.5s forwards;
}
.fejlec-gomb.csillag.aktiv{
     border-radius: 10px;
     height: 50px;
     z-index: 20;
     transform: translateY(-3.5px);
     transition: border-radius 0.5s ease, height 0.5s ease, z-index 0s, transform 0.5s ease;
}


.cart-counter {
    padding: 2px;
    font-weight: bold;
    text-align: center;
}


.valasztoful{
    width: 300px;
    height: 100%;
    margin: -15px;
    margin-top: -30px;
}




/*Szűrők----------------------------------------------------------------------------------------*/

        .oldal-menu {
          position: fixed;
          top: 0px;
          background-color: rgb(213, 213, 213);
          width: 100%;
          height: 170px;
          transition: top 0.3s ease;
          display: flex;
          flex-direction: column;
          border-bottom: solid rgb(148, 148, 148) 4px;
          overflow-y: hidden;
          overflow-x: auto;
          transition: transform 0.5s ease;
        }

        .oldal-menu.show {
          top: 180px;
        }

        .oldal-menu.hide{
            transform: translateY(-82%);
            transition: transform 0.5s ease;
        }

        @media (max-width: 730px) {
            .oldal-menu.hide{
            transform: translateY(-180px);
            transition: transform 0.5s ease;
            z-index: 1;
        }

        .tartalom.hide{
            margin-top: -40px;
        }

        .menu-open .tartalom.hide{
            transform: translateY(-180px);
        }
        }


        

        #menuToggle {
            z-index: 23;
            position: absolute;
            top: 95px;
            background: rgb(170, 170, 170);
            cursor: pointer;
            width: 60px;
            height: 35px;
            border-radius: 0 5px 0 0;
            border: solid gray 1px;
            border-style: solid solid none none;
        }


        .szuro{
            position: relative;
            width: 18px;
        }


        #szuroszamlalo{
            position: absolute;
            top: 10px;
            left: 55%;
        }


        #szurotorlo{
            position: absolute;
            width: 200px;
            top: 25px;
            left: 36px;
            z-index: 90;
            color: rgb(82, 2, 2);
            border: none;
            background-color: rgb(235, 235, 235);
            border-radius: 50px;
        }
        #szurotorlo:hover{
            background-color: rgb(213, 213, 213);
            transition: 0.2s ease;
        }
        #szurotorlo:active{
            transform: scale(0.95);
            transition: 0.1s ease;
        }
        

.kocka{
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    margin-top: 50px;
}



.menu-open .tartalom {
    transition: margin-top 0.3s ease, transform 0.5s ease, height 0.5s ease;
    margin-top: 170px;
    transition-delay: 0s;
}


.tartalom {
    transition: margin-top 0.2s linear, transform 0.5s ease, height 0.5s ease;
    margin-top: 0;
    width: 100%;
    height: calc(100vh - 180px);
}

.tartalom.hide{
    height: 100%;
    transform: translateY(-143px);
    transition: transform 0.5s ease, height 0.3s ease;
}


#range-output-min, #range-output-max {
    width: 70px;
    height: 20px;
}


.csuszka-ertekek {
    position: relative;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}


.szurok-allja{
    height: 80px;
}


.valasztoful h1 {
    position: relative;
    font-size: 20px;
    top: 50px;
    right: -50px;
}


.beallit-szoveg{
    margin-top: -10px;
    left: 150px;
}

.beallitasok {
    position: absolute;
    flex-wrap: nowrap;
    width: max-content;
    top: 50px;
    left: 10px;
}

.beallitasok tr {
    display: inline-block;
    margin-right: 40px;
}




@media (min-width: 730px) {

    .fejlec-1{
        height: 140px;
    }
    #menuToggle{
        top: 55px;
    }
    
    #aktivGomb{
        top: 90px;
    }

    .fejlec-valasztasok{
        margin-top: 180px;
    }

    @media (max-height: 440px) {
        .fejlec-valasztasok{
            height: 100vh;
            margin-top: 0;
            top: -115px;
        }
    }

    .oldal-menu {
        top: -40px;
        width: 100%;
    }

    .oldal-menu.show {
        top: 140px;
    }

    .tartalom {
        height: calc(100vh - 140px);
    }

}











/*VÁLASZTÁS~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*főoldal*/



/*javítás*/


/*gomb*/


.anim-wrap {
    position: absolute;
    inset: 0;
    width: 200px;
    height: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none
}


.csavarhuzo{
    opacity: 0;
    z-index: 2;
}

.csavarhuzo,
.fogaskerek, 
.fogaskerekek-szele,
.fogaskerekek-szele-2 {
    position: absolute;
    user-select: none;
    transition: opacity 0.4s ease, transform 0.6s ease;
}
.fogaskerekek-szele,
.fogaskerekek-szele-2{
    z-index: -1;
    opacity: 0;
}

.fejlec-gomb.javit.aktiv .csavarhuzo,
.fejlec-gomb.javit.aktiv .fogaskerek {
    transform: translateY(0);
}

.csavarhuzo.bal,.csavarhuzo.jobb {
    width: 80px;
}


@keyframes becsusz-bal {
    0% {
        transform: translateX(-255px) translateY(-63px) rotate(15deg) scaleX(-1);
    }
    100% {
        transform: translateX(-143px) translateY(10px) rotate(15deg) scaleX(-1);
    }
}
@keyframes fordul-bal {
    0% {
        transform: translateX(-143px) translateY(10px) rotate(15deg) scaleX(-1);
    }
    100% {
        transform: translateX(-142px) translateY(28px) rotate(-15deg) scaleX(-1);
    }
}
@keyframes megjelen-csavarh {
    from { opacity: 0; }
    to { opacity: 1; }
}



.fejlec-gomb.javit.aktiv .csavarhuzo.bal {
    animation:
        becsusz-bal 0.5s ease-out forwards,
        fordul-bal 0.4s ease-out forwards 0.5s,
        megjelen-csavarh 0s linear forwards;
}










@keyframes becsusz-jobb {
    0% {
        transform: translateX(200px) translateY(-65px) rotate(-15deg);
    }
    100% {
        transform: translateX(64px) translateY(10px) rotate(-15deg);
    }
}
@keyframes fordul-jobb {
    0% {
        transform: translateX(64px) translateY(10px) rotate(-15deg);
    }
    100% {
        transform: translateX(62px) translateY(28px) rotate(15deg);
    }
}



.fejlec-gomb.javit.aktiv .csavarhuzo.jobb {
    animation:
        becsusz-jobb 0.5s ease-out forwards,
        fordul-jobb 0.4s ease-out forwards 0.5s,
        megjelen-csavarh 0s linear forwards;
}



@keyframes forgas-jobb {
    from { transform: rotate(0deg); }
    to { transform: rotate(30deg); }
}

@keyframes forgas-bal {
    from { transform: rotate(0deg); }
    to { transform: rotate(-30deg); }
}


.fogaskerek.jobb {
    width: 40px;
    right: 10px;
    top: 9px;
}

.fogaskerek.bal {
    width: 40px;
    right: 150px;
    top: 10px;
}


.fejlec-gomb.javit.aktiv .fogaskerek.jobb {
    animation: forgas-jobb 0.35s ease-out forwards;
    animation-delay: 0.5s;
}

.fejlec-gomb.javit.aktiv .fogaskerek.bal {
    animation: forgas-bal 0.35s ease-out forwards;
    animation-delay: 0.5s;
}



.fkerekek {
    position: absolute;
    margin: auto;
    width: 100%;
    inset: 0;
}

.fejlec-gomb.javit.aktiv .kimegy-jobb {
    position: relative;
    float: right;
    right: 95px;
}

.fejlec-gomb.javit.aktiv .kimegy-bal{
    position: relative;
    float: left;
    left: 285px;
}







@keyframes fogaskerekek-szele {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fkerekek {
    from { opacity: 0; }
    to { opacity: 1; }
}


.fejlec-gomb.javit.aktiv .fogaskerekek-szele {
    animation:
        fkerekek 0.5s forwards,
        fogaskerekek-szele 1.2s ease-in,
        fogaskerekek-szele 1s linear infinite;
    animation-delay: 0s, 0.6s, 1.8s;
}


.fejlec-gomb.javit.aktiv .fogaskerekek-szele-2 {
    animation:
        fkerekek 0.5s forwards,
        fogaskerekek-szele 1.2s ease-out reverse,
        fogaskerekek-szele 1s linear infinite reverse;
    animation-delay: 0s, 0.6s, 1.8s;
}


@keyframes kimegy {
    from { transform: translateX(80px); opacity: 0; }
    to { transform: translateX(0%); opacity: 1; }
}

.fejlec-gomb.javit.aktiv .kimegy-jobb{
    animation: kimegy 0.5s forwards;
}


@keyframes kimegy-2 {
    from { transform: translateX(-80px); opacity: 0; }
    to { transform: translateX(0%); opacity: 1; }
}

.fejlec-gomb.javit.aktiv .kimegy-bal{
    transform: translateX(50%);
    animation: kimegy-2 0.5s forwards;
}






/*oldal*/



.sarok{
    width: 160px;
    margin-top: -17px;
}










/*csillagászat*/


/*gomb*/


@keyframes csillag-hatter-szoveg {
    from {color: #000000;}
    to {color: #ffffff;}
}



.fejlec-gomb.aktiv.csillag {
    animation: csillag-hatter-szoveg 0.5s forwards;
}



.csillag-hatter-csillagkep{
    position: absolute;
    z-index: 1;
    transform: translateY(-51.5%) scale(0.11);
    top: 36px;
}
.csillag-hatter-csillagkep-2{
    position: absolute;
    z-index: 1;
    transform: translateY(-51.5%) scale(0.11);
    top: 36px;
}
@keyframes csillag-hatter-csillagkep {
    from { transform: translateY(-51.5%) scale(0.11);}
    to { transform: translateY(-51.5%) scale(0.15);}
}
@keyframes csillag-hatter-csillagkepasd {
    from { opacity: 1;}
    to { opacity: 0;}
}

.fejlec-gomb.csillag.aktiv .csillag-hatter-csillagkep {
    animation: csillag-hatter-csillagkep 1s ease-in-out forwards,
    csillag-hatter-csillagkepasd 0.7s forwards;
}





.csillag-hatter-csillagkep-2{
    position: absolute;
    z-index: 1;
    transform: translateY(-51.5%) scale(0.11);
    
}

@keyframes csillag-hatter-csillagkep-2 {
    from { transform: translateY(-51.5%) scale(0.11);}
    to { transform: translateY(-51.5%) scale(0.15);}
}


.fejlec-gomb.csillag.aktiv .csillag-hatter-csillagkep-2 {
    animation: csillag-hatter-csillagkep-2 1s ease-in-out forwards;
}






.gomb-szoveg {
    position: relative;
    z-index: 20;
}

.csillag-hatter{
    position: absolute;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%) scale(0.3) rotate(90deg);
    opacity: 0;
}


@keyframes csillag-hatter-1 {
    from { transform: translateX(-50%) translateY(-50%) scale(0.3) rotate(90deg);opacity: 0;}
    to { transform: translateX(-50%) translateY(-50%) scale(0.2) rotate(90deg);opacity: 1;}
}


.fejlec-gomb.csillag.aktiv .csillag-hatter {
    animation: csillag-hatter-1 0.5s ease-in-out forwards;
}




.csillag-hatter-2{
    position: absolute;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%) scale(0.3);
    opacity: 0;
}

@keyframes csillag-hatter-2 {
    from { transform: translateX(-50%) translateY(-50%) scale(0.2); opacity: 1;}
    to { transform: translateX(-50%) translateY(-50%) scale(0.3); opacity: 1;}
}


.fejlec-gomb.csillag.aktiv .csillag-hatter-2 {
    animation: csillag-hatter-2 0.8s ease-in-out forwards;
}


.csillag {
    position: relative;
}

.fejlec-gomb.csillag.aktiv .csillag-pont {
    position: relative;
    width: 6px;
    height: 6px;
    background-image: url('Valasztas_oldalak/Csillagászat/Images/Egy-csillag.png');
    background-size: cover;
    opacity: 0;
    animation: csillag-pislak 2s ease-in-out infinite;
}

@keyframes csillag-pislak {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.3); }
}



.hullocsillag {
    position: absolute;
    width: 10px;
    height: 5px;
    background-image: url('Valasztas_oldalak/Csillagászat/Images/Hullocsillag.png');
    background-size: cover;
    opacity: 0;
    pointer-events: none;
}

@keyframes hullocsillag-ut {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(-1) rotate(var(--angle));
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(-0.5) rotate(var(--angle));
    }
}





/*oldal*/






/*Vadászat*/



/*gomb*/



@keyframes vad-eltunik {
    from { opacity: 1; }

    to { opacity: 0; }
}


.madar{
    right: 157px;
    top: 13px;
}


.fejlec-gomb.vadasz.aktiv .madar{
    animation: vad-eltunik 0s forwards;
}

.fejlec-gomb.vadasz.aktiv .ozike{
    animation: vad-eltunik 0s forwards;
}


.ozike{
    right: 10px;
    top: 7.5px;
}


.ozike-1, .ozike{
    position: absolute;
    width: 40px;
}



.madar-1, .madar{
    position: absolute;
    width: 30px;
}


@keyframes vad-megjelen {
    from { opacity: 0; }

    to { opacity: 1; }
}

.madar-1{
    right: 157px;
    top: 13px;
    opacity: 0;
}

@keyframes madar-anim {
    0% { transform: translateX(0) translateY(0) rotate(0deg); }
    50%{ transform: translateX(25px) translateY(-10px) rotate(-8deg); }
    100% { transform: translateX(30px) translateY(-11px) rotate(0deg); }
}


.fejlec-gomb.vadasz.aktiv .madar-1{
    animation: vad-megjelen 0s forwards,
    madar-anim 0.7s forwards;
}

.fejlec-gomb.vadasz.aktiv .ozike-1{
    animation: vad-megjelen 0s forwards;
}



.ozike-1{
    right: 10px;
    top: 7.5px;
    opacity: 0;
}








.level-bal{
    opacity: 0;
}

.level-jobb{
    opacity: 0;
}



.levelek {
    position: absolute;
    margin: auto;
    width: 100%;
    inset: 0;
    background-color: #000000;
}


.kimegy-jobb-level, .kimegy-bal-level{
    top: -10px;
    user-select: none;
}

.kimegy-jobb-level {
    position: relative;
    float: right;
    right: -10px;
}

.kimegy-bal-level{
    position: relative;
    float: left;
    left: 35px;
}






@keyframes levelek-szele {
    from {
        transform: rotate(90deg) scalex(-1);
        
    }
    to {
        transform: rotate(0) scalex(-1);
        
    }
}


@keyframes level-szel {
    0%   { transform: rotate(0deg) translateX(0%) translateY(0) scalex(-1); }
    25%  { transform: rotate(5deg) translateX(1px) translateY(1px) scalex(-1); }
    50%  { transform: rotate(8deg) translateX(3px) translateY(1px) scalex(-1); }
    75%  { transform: rotate(7deg) translateX(2px) translateY(0px) scalex(-1); }
    100% { transform: rotate(0deg) translateX(0%) translateY(0) scalex(-1); }
}

.fejlec-gomb.vadasz.aktiv .level-jobb{
    position: absolute;
    animation: levelek-szele 0.5s forwards,
    level-szel 5s ease-in-out infinite 0.5s,
    levelek-szele-megjelen 0s forwards;
}



@keyframes levelek-szele-bal {
    from {
        transform: rotate(-90deg) scaley(-1);
        
    }
    to {
        transform: rotate(0) scaley(-1);
        
    }
}


@keyframes level-szel-bal {
    0%   { transform: rotate(0deg) translateX(0%) translateY(0) scaley(-1); }
    25%  { transform: rotate(-5deg) translateX(1px) translateY(1px) scaley(-1); }
    50%  { transform: rotate(-8deg) translateX(3px) translateY(1px) scaley(-1); }
    75%  { transform: rotate(-7deg) translateX(2px) translateY(0px) scaley(-1); }
    100% { transform: rotate(0deg) translateX(0%) translateY(0) scaley(-1); }
}

@keyframes levelek-szele-megjelen {
    from { opacity: 0; }

    to { opacity: 1; }
}


.fejlec-gomb.vadasz.aktiv .level-bal{
    position: absolute;
    animation: levelek-szele-bal 0.5s forwards,
    level-szel-bal 5s ease-in-out infinite 0.5s,
    levelek-szele-megjelen 0s forwards;
}





@keyframes kimegy-jobb-levelek {
    from { transform: translateX(30px) translateY(-100px);}
    to { transform: translateX(0%) translateY(0);}
}


.fejlec-gomb.vadasz.aktiv .kimegy-jobb-level {
    position: absolute;
    width: 0%;
    animation: kimegy-jobb-levelek 0.5s forwards;
}


@keyframes kimegy-bal-levelek {
    from { transform: translateX(-30px) translateY(-100px);}
    to { transform: translateX(0%) translateY(0);}
}


.fejlec-gomb.vadasz.aktiv .kimegy-bal-level {
    position: absolute;
    width: 0%;
    animation: kimegy-bal-levelek 0.5s forwards;
}





/*oldal*/





/*Tengerészet*/



/*gomb*/




.vtorony{
    position: absolute;
    width: 30px;
    right: 15px;
    top: 15px;
}
.hajo{
    position: absolute;
    width: 30px;
    left: 15px;
    top: 15px;
}


@keyframes hajo-rangas {
    0% { transform: rotate(0);}
    25% { transform: rotate(5deg) translatex(2px);}
    50% { transform: rotate(0);}
    75% { transform: rotate(-5deg) translatex(-2px);}
    100% { transform: rotate(0);}
}

.fejlec-gomb.tenger.aktiv .hajo{
    animation: hajo-rangas 3s linear infinite;
}




@keyframes viz-elojon {
    from { }
    to { top: 20px; }
}
@keyframes viz-elojon-2 {
    from { }
    to { top: -3px; }
}


.fejlec-gomb.tenger.aktiv .tenger-1 {
    animation: viz-elojon 0.5s ease-out forwards,
    tenger-rangas 2s linear infinite;
}
.fejlec-gomb.tenger.aktiv .tenger-2 {
    animation: viz-elojon-2 0.5s ease-out forwards,
    tenger-rangas-2 2s linear infinite;
}

@keyframes tenger-rangas {
    0% { transform: translateX(0);}
    50% { transform: translateX(20px) translateY(2px);}
    100% { transform: translateX(0);}
}

.tenger-1{
    position: relative;
    right: 160px;
    top: 50px;
    width: 250%;
    height: 40px;
}

@keyframes tenger-rangas-2 {
    0% { transform: translateX(0);}
    50% { transform: translateX(-10px);}
    100% { transform: translateX(0);}
}

.tenger-2{
    position: relative;
    right: 200px;
    top: 50px;
    width: 300%;
    height: 10px;
}
}


/*oldal*/




/*Fiokbeallitas*/



.settings-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 100vh;
    overflow-y: auto;
}


.settings-content{
    width: 50%;
    background-color: rgba(0, 0, 0, 0.268);
    box-shadow: #000000 0px 0px 10px;
    overflow-y: auto;
}

.gombok{
    height: 100px;
    text-align: center;
    margin-top: 100px;
}

.gomb-a{
width: 200px;
height: 40px;
border: solid rgb(0, 0, 0) 1px;
border-radius: 5px;
}

.gomb-a:hover{
    background-color: rgb(175, 197, 169);
    transition: 0.2s ease;
}

.gomb-a:active{
    transform: scale(0.95);
    background-color: rgb(123, 226, 95);
    transition: 0.1s ease;
}

.gomb-d{
width: 100px;
height: 40px;
background-color: rgb(185, 4, 4);
color: rgb(0, 0, 0);
border: solid rgb(82, 2, 2) 1px;
border-radius: 5px;
}

.gomb-d:hover{
    background-color: rgb(201, 43, 43);
    transition: 0.2s ease;
}

.gomb-d:active{
    transform: scale(0.95);
    transition: 0.1s ease;
}

.page-title{
    text-align: center;
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
}

.setting-title{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 10px;
}

.jelszo-form{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.felhnev-form{
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.settings-content form{
    margin-bottom: 100px;
}


.error-box {
    background-color: rgba(255, 0, 0, 0.2);
    color: red;
    padding: 10px;
    margin: 10px 0;
    border-radius: 6px;
    text-align: center;
}

.success-box {
    background-color: rgba(0, 255, 0, 0.2);
    color: green;
    padding: 10px;
    margin: 10px 0;
    border-radius: 6px;
    text-align: center;
}

@media (max-width: 750px) {
    .settings-content{
        width: 90%;
    }
}

@media (max-width: 400px) {
    .settings-content{
        width: 100%;
    }
}

}


































































/*Sötét mód-------------------------------------------------------------------------------------------------------*/

@media(prefers-color-scheme: dark) {


 @media (min-width: 1090px) {

/*FŐ OLDAL~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #121212;
}


.test{
    display: flex;
    flex-direction: column;
    height: 100vh;
}


div{
    display: block;
    unicode-bidi: isolate;
}


.logodiv{
    margin-top: 0px;
    flex-wrap: nowrap;
    text-align: right;
    width: 500px;
}



.logo{
    width: 100px;
    height: 100px;
    cursor: pointer;
    user-select: none
}



form{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}



.termekek{
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}


.global-modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.global-modal-img {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 10px;
}

.global-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: black;
    cursor: pointer;
    font-weight: bold;
}



/* A teljes scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* A háttér (track) */
::-webkit-scrollbar-track {
    background: #000000;
    border-radius: 5px;
}

/* A csúszka (thumb) */
::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 5px;
}

/* Hover állapot */
::-webkit-scrollbar-thumb:hover {
    background: #323232;
    border-radius: 2px;
}






/*Kereső-----------------------------------------------------------------------------------------------*/

.kereso{
    width: 50%;
    background-color: #f1f1f1;
    border: solid gray 2px;
    border-radius: 10px 0 0 10px;
}

.keresodiv{
    display: flex;
    position: relative;
}


.kereso,
.kereso-gomb {
  height: 36px;
  line-height: 36px;
  box-sizing: border-box;
}



.Kereso_logo{
    width: 45px;
    height: auto;
    margin-top: -8px;
    height: fit-content;
}



.kereso-gomb {
    background-color: rgb(223, 223, 223);
  position: relative;
  width: 10%;
  border: solid gray 2px;
  border-radius: 0 10px 10px 0;
  overflow: hidden;
  cursor: pointer;
}

.kereso-gomb:hover {
    background-color: rgb(255, 255, 255);
    transition: 0.4s ease;
}



.kez-bal, .kez-jobb {
  position: absolute;
  top: 50%;
  width: 65px;
  transform: translateY(100%);
  opacity: 0;
  transition: 0.4s ease;
  pointer-events: none;
}

.tavcso-wrap {
    width: 100%;
    height: auto; 
    display: block;
}

.ikon-wrap {
    position: relative;
    display: inline-block;
    user-select: none
}

.kez-bal {
  left: calc(-46px);
  top: calc(20px);
  transform: translateX(-100%);
}

.kez-jobb {
  right: calc(-35px);
  top: calc(20px);
  transform: translateX(100%);
}


.kereso-gomb:hover .kez-bal,
.kereso-gomb:hover .kez-jobb {
  opacity: 1;
  transform: translateX(6px) translateY(-25px) scale(1.05);
}



/*Fejlécek---------------------------------------------------------------------------------------*/


.fejlec-1{
    width: 100%;
    height: 180px;
    transition: transform 0.5s ease;
    z-index: 999;
}

.fejlec-1.hide {
    transform: translateY(-138px);
    transition: transform 0.5s ease;
    z-index: 999;
}

.fejlec-2{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 45px;
    margin-top: -15px;
    text-align: center;
    background-color: rgb(32, 32, 32);
    color: rgb(223, 222, 233);
}


.fejlec-3{
    width: 100%;
    margin-top: 0px;
    flex-wrap: nowrap;
}


.fejlecfeljebb{
    min-height: 100px;
    margin-top: -20px;
    margin-bottom: -20px;
}


.fejlec-3-1{
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}


.fejlec-3-2{
    position: relative;
    width: 20px;
    margin-left: 1%;
    top: 4px;
    filter: invert(80%);
}



.fejlec-4{
    display: flex;
    height: 60px;
    align-items: center;
}


.idk{
    width: 40%;
    color: rgb(196, 196, 196);
}

.telefonakkoreltunik{
    pointer-events: none;
}

.fejlec-valasztasok{
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.valasztasok-gomb, .valasztasok-gomb-bezar{
    visibility: hidden;
    position: absolute;
}


.valasztas-li{
    float: left;
    width: 25%;
    height: 44px;
    text-align: center;
    list-style: none;
}


.valasztas-ul{
    margin-left: -41px;
}







.fejlec-gomb.aktiv.javit {
    background-color: rgb(250, 209, 161);
    transition: background-color 0.5s ease;
}
.fejlec-gomb.aktiv.csillag {
    background-color: none;
}
.fejlec-gomb.aktiv.vadasz {
    background-color: rgb(163, 238, 163);
    transition: background-color 0.5s ease;
}


.fejlec-gomb.aktiv.tenger {
    background-color: rgb(190, 215, 231);
    transition: background-color 0.5s ease;
}









.nyitvatartas, .email, .telefonszam{
    position: absolute;
}

.nyitvatartas{
    margin-top: 5px;
}

.email{
    left: 65%;
}

.telefonszam{
    right: 65%;
}



.fejlec-gomb{
    width: 100%;
    height: 100%;
    border: none;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background-color: rgb(105, 105, 105);
    border: solid gray 1px;
}


@keyframes fejlec-gomb-asd {
    from {  }
    to { border-radius: 0 0 10px 10px; height: 50px; z-index: 20; }
}

.fejlec-gomb.aktiv{
    animation: fejlec-gomb-asd 0.5s forwards;
}
.fejlec-gomb.csillag.aktiv{
     border-radius: 0 0 10px 10px;
     height: 50px;
     z-index: 20;
     transition: border-radius 0.5s ease, height 0.5s ease, z-index 0s;
}


.cart-counter {
    padding: 2px;
    font-weight: bold;
    text-align: center;
}


.valasztoful{
    width: 300px;
    height: 100%;
    margin: -15px;
    margin-top: -30px;
}







/*Szűrők----------------------------------------------------------------------------------------*/

        .oldal-menu {
          position: fixed;
          top: 180px;
          left: 0;
            background-color: #1c1c1c;
            color: #e5e5e5;
          padding: 2rem 0rem;
          display: flex;
          flex-direction: column;
          border-right: solid rgba(128, 128, 128, 0.484) 3px;
          overflow-y: auto;
          overflow-x: hidden;
          height: calc(100vh - 245px);
          transition: left 0.3s ease, height 0.5s ease, top 0.5s ease;
        }

        .oldal-menu.show {
          left: -450px;
        }

        .oldal-menu.hide{
            top: 0px;
            height: 100vh;
            transition: height 0.5s ease, top 0.5s ease;
        }
        

        #menuToggle {
            z-index: 5;
            position: absolute;
            top: 102px;
            background: rgb(105, 105, 105);
            cursor: pointer;
            width: 60px;
            height: 35px;
            border-radius: 0 5px 0 0;
            border: solid gray 1px;
            border-style: solid solid none none;
        }


        .szuro{
            position: relative;
            width: 18px;
        }


        #szuroszamlalo{
            position: absolute;
            top: 10px;
            left: 55%;
        }


        #szurotorlo{
            position: absolute;
            width: 200px;
            top: 25px;
            left: 36px;
            color: rgb(82, 2, 2);
            border: none;
            background-color: rgb(235, 235, 235);
            border-radius: 50px;
        }
        #szurotorlo:hover{
            background-color: rgb(213, 213, 213);
            transition: 0.2s ease;
        }
        #szurotorlo:active{
            transform: scale(0.95);
            transition: 0.1s ease;
        }
        

.kocka{
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    margin-top: 50px;
}




.menu-open .tartalom {
    transition: margin-left 0.1s ease, transform 0.5s ease, height 0.5s ease;
    margin-left: 0px;
    transition-delay: 0s;
}


.tartalom {
    transition: margin-left 0.21s ease-out, transform 0.5s ease, height 0.5s ease;
    transition-delay: 0.07s;
    margin-left: 274px;
    height: calc(100vh - 180px);
}

.tartalom.hide{
    height: 100%;
    transform: translateY(-140px);
    transition: transform 0.5s ease, height 0.3s ease;
}


#range-output-min, #range-output-max {
    width: 70px;
    height: 20px;
}


.csuszka-ertekek {
    position: relative;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}


.szurok-allja{
    height: 80px;
}


.valasztoful h1 {
    position: relative;
    font-size: 20px;
    top: 50px;
    right: -50px;
}


.valasztoful h1 {
    position: relative;
    font-size: 20px;
    top: 50px;
    right: -50px;
}


.beallitasok{
    position: relative;
    top: 60px;
    left: 35px;
}

.beallitasok-td-1{
    width: 110px;
}

.beallitasok-td-2{
    width: 110px;
    text-align: center;
}


/*VÁLASZTÁS~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*főoldal*/



/*javítás*/


/*gomb*/


.anim-wrap {
    position: absolute;
    inset: 0;
    width: 200px;
    height: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none
}


.csavarhuzo{
    opacity: 0;
    z-index: 2;
}

.csavarhuzo,
.fogaskerek, 
.fogaskerekek-szele,
.fogaskerekek-szele-2 {
    position: absolute;
    user-select: none;
    transition: opacity 0.4s ease, transform 0.6s ease;
}
.fogaskerekek-szele,
.fogaskerekek-szele-2{
    z-index: -1;
    opacity: 0;
}

.fejlec-gomb.javit.aktiv .csavarhuzo,
.fejlec-gomb.javit.aktiv .fogaskerek {
    transform: translateY(0);
}

.csavarhuzo.bal,.csavarhuzo.jobb {
    width: 80px;
}


@keyframes becsusz-bal {
    0% {
        transform: translateX(-255px) translateY(-63px) rotate(15deg) scaleX(-1);
    }
    100% {
        transform: translateX(-143px) translateY(10px) rotate(15deg) scaleX(-1);
    }
}
@keyframes fordul-bal {
    0% {
        transform: translateX(-143px) translateY(10px) rotate(15deg) scaleX(-1);
    }
    100% {
        transform: translateX(-142px) translateY(28px) rotate(-15deg) scaleX(-1);
    }
}
@keyframes megjelen-csavarh {
    from { opacity: 0; }
    to { opacity: 1; }
}



.fejlec-gomb.javit.aktiv .csavarhuzo.bal {
    animation:
        becsusz-bal 0.5s ease-out forwards,
        fordul-bal 0.4s ease-out forwards 0.5s,
        megjelen-csavarh 0s linear forwards;
}










@keyframes becsusz-jobb {
    0% {
        transform: translateX(200px) translateY(-65px) rotate(-15deg);
    }
    100% {
        transform: translateX(64px) translateY(10px) rotate(-15deg);
    }
}
@keyframes fordul-jobb {
    0% {
        transform: translateX(64px) translateY(10px) rotate(-15deg);
    }
    100% {
        transform: translateX(62px) translateY(28px) rotate(15deg);
    }
}



.fejlec-gomb.javit.aktiv .csavarhuzo.jobb {
    animation:
        becsusz-jobb 0.5s ease-out forwards,
        fordul-jobb 0.4s ease-out forwards 0.5s,
        megjelen-csavarh 0s linear forwards;
}



@keyframes forgas-jobb {
    from { transform: rotate(0deg); }
    to { transform: rotate(30deg); }
}

@keyframes forgas-bal {
    from { transform: rotate(0deg); }
    to { transform: rotate(-30deg); }
}


.fogaskerek.jobb {
    width: 40px;
    right: 10px;
    top: 9px;
}

.fogaskerek.bal {
    width: 40px;
    right: 150px;
    top: 10px;
}


.fejlec-gomb.javit.aktiv .fogaskerek.jobb {
    animation: forgas-jobb 0.35s ease-out forwards;
    animation-delay: 0.5s;
}

.fejlec-gomb.javit.aktiv .fogaskerek.bal {
    animation: forgas-bal 0.35s ease-out forwards;
    animation-delay: 0.5s;
}



.fkerekek {
    position: absolute;
    margin: auto;
    width: 100%;
    inset: 0;
}

.fejlec-gomb.javit.aktiv .kimegy-jobb {
    position: relative;
    float: right;
    right: 95px;
}

.fejlec-gomb.javit.aktiv .kimegy-bal{
    position: relative;
    float: left;
    left: 285px;
}







@keyframes fogaskerekek-szele {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fkerekek {
    from { opacity: 0; }
    to { opacity: 1; }
}


.fejlec-gomb.javit.aktiv .fogaskerekek-szele {
    animation:
        fkerekek 0.5s forwards,
        fogaskerekek-szele 1.2s ease-in,
        fogaskerekek-szele 1s linear infinite;
    animation-delay: 0s, 0.6s, 1.8s;
}


.fejlec-gomb.javit.aktiv .fogaskerekek-szele-2 {
    animation:
        fkerekek 0.5s forwards,
        fogaskerekek-szele 1.2s ease-out reverse,
        fogaskerekek-szele 1s linear infinite reverse;
    animation-delay: 0s, 0.6s, 1.8s;
}


@keyframes kimegy {
    from { transform: translateX(80px); opacity: 0; }
    to { transform: translateX(0%); opacity: 1; }
}

.fejlec-gomb.javit.aktiv .kimegy-jobb{
    animation: kimegy 0.5s forwards;
}


@keyframes kimegy-2 {
    from { transform: translateX(-80px); opacity: 0; }
    to { transform: translateX(0%); opacity: 1; }
}

.fejlec-gomb.javit.aktiv .kimegy-bal{
    transform: translateX(50%);
    animation: kimegy-2 0.5s forwards;
}






/*oldal*/



.sarok{
    width: 160px;
    margin-top: -17px;
}










/*csillagászat*/


/*gomb*/


@keyframes csillag-hatter-szoveg {
    from {color: #000000;}
    to {color: #ffffff;}
}



.fejlec-gomb.aktiv.csillag {
    animation: csillag-hatter-szoveg 0.5s forwards;
}



.csillag-hatter-csillagkep{
    position: absolute;
    z-index: 1;
    transform: translateY(-51.5%) scale(0.11);
    top: 36px;
}
.csillag-hatter-csillagkep-2{
    position: absolute;
    z-index: 1;
    transform: translateY(-51.5%) scale(0.11);
    top: 36px;
}
@keyframes csillag-hatter-csillagkep {
    from { transform: translateY(-51.5%) scale(0.11);}
    to { transform: translateY(-51.5%) scale(0.15);}
}
@keyframes csillag-hatter-csillagkepasd {
    from { opacity: 1;}
    to { opacity: 0;}
}

.fejlec-gomb.csillag.aktiv .csillag-hatter-csillagkep {
    animation: csillag-hatter-csillagkep 1s ease-in-out forwards,
    csillag-hatter-csillagkepasd 0.7s forwards;
}





.csillag-hatter-csillagkep-2{
    position: absolute;
    z-index: 1;
    transform: translateY(-51.5%) scale(0.11);
    
}

@keyframes csillag-hatter-csillagkep-2 {
    from { transform: translateY(-51.5%) scale(0.11);}
    to { transform: translateY(-51.5%) scale(0.15);}
}


.fejlec-gomb.csillag.aktiv .csillag-hatter-csillagkep-2 {
    animation: csillag-hatter-csillagkep-2 1s ease-in-out forwards;
}






.gomb-szoveg {
    position: relative;
    z-index: 20;
}

.csillag-hatter{
    position: absolute;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%) scale(0.3) rotate(90deg);
    opacity: 0;
}


@keyframes csillag-hatter-1 {
    from { transform: translateX(-50%) translateY(-50%) scale(0.3) rotate(90deg);opacity: 0;}
    to { transform: translateX(-50%) translateY(-50%) scale(0.2) rotate(90deg);opacity: 1;}
}


.fejlec-gomb.csillag.aktiv .csillag-hatter {
    animation: csillag-hatter-1 0.5s ease-in-out forwards;
}




.csillag-hatter-2{
    position: absolute;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%) scale(0.3);
    opacity: 0;
}

@keyframes csillag-hatter-2 {
    from { transform: translateX(-50%) translateY(-50%) scale(0.2); opacity: 1;}
    to { transform: translateX(-50%) translateY(-50%) scale(0.3); opacity: 1;}
}


.fejlec-gomb.csillag.aktiv .csillag-hatter-2 {
    animation: csillag-hatter-2 0.8s ease-in-out forwards;
}


.csillag {
    position: relative;
}

.fejlec-gomb.csillag.aktiv .csillag-pont {
    position: relative;
    width: 6px;
    height: 6px;
    background-image: url('Valasztas_oldalak/Csillagászat/Images/Egy-csillag.png');
    background-size: cover;
    opacity: 0;
    animation: csillag-pislak 2s ease-in-out infinite;
}

@keyframes csillag-pislak {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.3); }
}



.hullocsillag {
    position: absolute;
    width: 10px;
    height: 5px;
    background-image: url('Valasztas_oldalak/Csillagászat/Images/Hullocsillag.png');
    background-size: cover;
    opacity: 0;
    pointer-events: none;
}

@keyframes hullocsillag-ut {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(-1) rotate(var(--angle));
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(-0.5) rotate(var(--angle));
    }
}





/*oldal*/






/*Vadászat*/



/*gomb*/



@keyframes vad-eltunik {
    from { opacity: 1; }

    to { opacity: 0; }
}


.madar{
    right: 157px;
    top: 13px;
}


.fejlec-gomb.vadasz.aktiv .madar{
    animation: vad-eltunik 0s forwards;
}

.fejlec-gomb.vadasz.aktiv .ozike{
    animation: vad-eltunik 0s forwards;
}


.ozike{
    right: 10px;
    top: 7.5px;
}


.ozike-1, .ozike{
    position: absolute;
    width: 40px;
}



.madar-1, .madar{
    position: absolute;
    width: 30px;
}


@keyframes vad-megjelen {
    from { opacity: 0; }

    to { opacity: 1; }
}

.madar-1{
    right: 157px;
    top: 13px;
    opacity: 0;
}

@keyframes madar-anim {
    0% { transform: translateX(0) translateY(0) rotate(0deg); }
    50%{ transform: translateX(25px) translateY(-10px) rotate(-8deg); }
    100% { transform: translateX(30px) translateY(-11px) rotate(0deg); }
}


.fejlec-gomb.vadasz.aktiv .madar-1{
    animation: vad-megjelen 0s forwards,
    madar-anim 0.7s forwards;
}

.fejlec-gomb.vadasz.aktiv .ozike-1{
    animation: vad-megjelen 0s forwards;
}



.ozike-1{
    right: 10px;
    top: 7.5px;
    opacity: 0;
}








.level-bal{
    opacity: 0;
}

.level-jobb{
    opacity: 0;
}



.levelek {
    position: absolute;
    margin: auto;
    width: 100%;
    inset: 0;
    background-color: #000000;
}


.kimegy-jobb-level, .kimegy-bal-level{
    top: -10px;
    user-select: none;
}

.kimegy-jobb-level {
    position: relative;
    float: right;
    right: -10px;
}

.kimegy-bal-level{
    position: relative;
    float: left;
    left: 35px;
}






@keyframes levelek-szele {
    from {
        transform: rotate(90deg) scalex(-1);
        
    }
    to {
        transform: rotate(0) scalex(-1);
        
    }
}


@keyframes level-szel {
    0%   { transform: rotate(0deg) translateX(0%) translateY(0) scalex(-1); }
    25%  { transform: rotate(5deg) translateX(1px) translateY(1px) scalex(-1); }
    50%  { transform: rotate(8deg) translateX(3px) translateY(1px) scalex(-1); }
    75%  { transform: rotate(7deg) translateX(2px) translateY(0px) scalex(-1); }
    100% { transform: rotate(0deg) translateX(0%) translateY(0) scalex(-1); }
}

.fejlec-gomb.vadasz.aktiv .level-jobb{
    position: absolute;
    animation: levelek-szele 0.5s forwards,
    level-szel 5s ease-in-out infinite 0.5s,
    levelek-szele-megjelen 0s forwards;
}



@keyframes levelek-szele-bal {
    from {
        transform: rotate(-90deg) scaley(-1);
        
    }
    to {
        transform: rotate(0) scaley(-1);
        
    }
}


@keyframes level-szel-bal {
    0%   { transform: rotate(0deg) translateX(0%) translateY(0) scaley(-1); }
    25%  { transform: rotate(-5deg) translateX(1px) translateY(1px) scaley(-1); }
    50%  { transform: rotate(-8deg) translateX(3px) translateY(1px) scaley(-1); }
    75%  { transform: rotate(-7deg) translateX(2px) translateY(0px) scaley(-1); }
    100% { transform: rotate(0deg) translateX(0%) translateY(0) scaley(-1); }
}

@keyframes levelek-szele-megjelen {
    from { opacity: 0; }

    to { opacity: 1; }
}


.fejlec-gomb.vadasz.aktiv .level-bal{
    position: absolute;
    animation: levelek-szele-bal 0.5s forwards,
    level-szel-bal 5s ease-in-out infinite 0.5s,
    levelek-szele-megjelen 0s forwards;
}





@keyframes kimegy-jobb-levelek {
    from { transform: translateX(30px) translateY(-100px);}
    to { transform: translateX(0%) translateY(0);}
}


.fejlec-gomb.vadasz.aktiv .kimegy-jobb-level {
    position: absolute;
    width: 0%;
    animation: kimegy-jobb-levelek 0.5s forwards;
}


@keyframes kimegy-bal-levelek {
    from { transform: translateX(-30px) translateY(-100px);}
    to { transform: translateX(0%) translateY(0);}
}


.fejlec-gomb.vadasz.aktiv .kimegy-bal-level {
    position: absolute;
    width: 0%;
    animation: kimegy-bal-levelek 0.5s forwards;
}





/*oldal*/





/*Tengerészet*/



/*gomb*/




.vtorony{
    position: absolute;
    width: 30px;
    right: 15px;
    top: 15px;
}
.hajo{
    position: absolute;
    width: 30px;
    left: 15px;
    top: 15px;
}


@keyframes hajo-rangas {
    0% { transform: rotate(0);}
    25% { transform: rotate(5deg) translatex(2px);}
    50% { transform: rotate(0);}
    75% { transform: rotate(-5deg) translatex(-2px);}
    100% { transform: rotate(0);}
}

.fejlec-gomb.tenger.aktiv .hajo{
    animation: hajo-rangas 3s linear infinite;
}




@keyframes viz-elojon {
    from { }
    to { top: 20px; }
}
@keyframes viz-elojon-2 {
    from { }
    to { top: -3px; }
}


.fejlec-gomb.tenger.aktiv .tenger-1 {
    animation: viz-elojon 0.5s ease-out forwards,
    tenger-rangas 2s linear infinite;
}
.fejlec-gomb.tenger.aktiv .tenger-2 {
    animation: viz-elojon-2 0.5s ease-out forwards,
    tenger-rangas-2 2s linear infinite;
}

@keyframes tenger-rangas {
    0% { transform: translateX(0);}
    50% { transform: translateX(20px) translateY(2px);}
    100% { transform: translateX(0);}
}

.tenger-1{
    position: relative;
    right: 160px;
    top: 50px;
    width: 250%;
    height: 40px;
}

@keyframes tenger-rangas-2 {
    0% { transform: translateX(0);}
    50% { transform: translateX(-10px);}
    100% { transform: translateX(0);}
}

.tenger-2{
    position: relative;
    right: 200px;
    top: 50px;
    width: 300%;
    height: 10px;
}



/*oldal*/


}
 













 /*Kis méret-------------------------------------------------------------------------------------------------------*/




@media (max-width: 1090px) {


/*FŐ OLDAL~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #121212;
}


.test{
    display: flex;
    flex-direction: column;
    height: 100vh;
}


div{
    unicode-bidi: isolate;
}



.logo{
    width: 80px;
    height: 80px;
    cursor: pointer;
    user-select: none;
}


@media (max-width: 369px) {
    .logo{
        position: relative;
        left: -20px;
    }
}


.logodiv{
margin-top: 0px;
flex-wrap: nowrap;
display: flex;
justify-content: right;
width: 110px;
}

@media (min-width: 730px) {
    .logodiv{
    width: 190px;
}
}

form{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}



.termekek{
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}


.global-modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.global-modal-img {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 10px;
}

.global-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: black;
    cursor: pointer;
    font-weight: bold;
}


/* A teljes scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

@media (max-width: 364px) {

    ::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
}

/* A háttér (track) */
::-webkit-scrollbar-track {
    background: #000000;
    border-radius: 5px;
}

/* A csúszka (thumb) */
::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 5px;
}

/* Hover állapot */
::-webkit-scrollbar-thumb:hover {
    background: #323232;
    border-radius: 2px;
}





/*Kereső-----------------------------------------------------------------------------------------------*/

.kereso{
    width: 55%;
    background-color: #f1f1f1;
    border: solid gray 2px;
    border-radius: 10px 0 0 10px;
}


.keresodiv{
    margin-left: 40px;
    position: absolute;
    top: 85px;
}


.kereso,
.kereso-gomb {
    z-index: 10;
  height: 30px;
  line-height: 36px;
  box-sizing: border-box;
}



.Kereso_logo{
    width: 40px;
    margin-top: -8px;
}



.kereso-gomb {
    background-color: rgb(223, 223, 223);
  position: relative;
  width: 70px;
  border: solid gray 2px;
  border-radius: 0 10px 10px 0;
  overflow: hidden;
  cursor: pointer;
}

.kereso-gomb:hover {
    background-color: rgb(255, 255, 255);
    transition: 0.4s ease;
}



.kez-bal, .kez-jobb {
  position: absolute;
  top: 50%;
  width: 65px;
  transform: translateY(100%);
  opacity: 0;
  transition: 0.4s ease;
  pointer-events: none;
}

.tavcso-wrap {
    width: 100%;
    height: auto; 
    display: block;
}

.ikon-wrap {
    position: relative;
    display: inline-block;
    user-select: none
}

.kez-bal {
  left: calc(-45px);
  top: calc(19px);
  transform: translateX(-100%);
}

.kez-jobb {
  right: calc(-34px);
  top: calc(19px);
  transform: translateX(100%);
}


.kereso-gomb:hover .kez-bal,
.kereso-gomb:hover .kez-jobb {
  opacity: 1;
  transform: translateX(6px) translateY(-25px) scale(0.9);
}



@media (min-width: 730px) {
    
.kereso{
    width: 50%;
    background-color: #f1f1f1;
    border: solid gray 2px;
    border-radius: 10px 0 0 10px;
}

.keresodiv{
    top: 4px;
    left: -140px;
    position: relative;
}


.kereso,
.kereso-gomb {
  height: 36px;
  line-height: 36px;
  box-sizing: border-box;
}


}


/*Fejlécek---------------------------------------------------------------------------------------*/


.fejlec-1{
    z-index: 20;
    width: 100%;
    height: 180px;
    background-color: #121212;
    color: rgb(29, 28, 30);
    border-style: none none solid none;
    transition: transform 0.5s ease;
}

.fejlec-2{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 45px;
    margin-top: -35px;
    text-align: center;
    background-color: rgb(32, 32, 32);
    color: rgb(223, 222, 233);
}


.fejlec-3{
    width: 100%;
    margin-top: 0px;
    flex-wrap: nowrap;
}


.fejlec-3-1{
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}


.fejlec-3-2{
    position: relative;
    width: 20px;
    margin-left: 1%;
    top: 4px;
    filter: invert(80%);
}



.fejlec-4{
    position: relative;
    display: flex;
    height: 80px;
    align-items: center;
}

.fejlecfeljebb{
    text-align: right;
    top: -30px;
}


.idk{
width: 65%;
position: absolute;
right: 20px;
color: rgb(196, 196, 196);
}


.telefonakkoreltunik{
    pointer-events: none;
}

.telefonakkoreltunik.hide{
    pointer-events: none;
    top: 95px;
}

@media (max-height: 280px) {
    .javit{
        right: 190px;
    }
    .csillag{
        right: 190px;
    }

    .vadasz{
        left: 179px;
        top: -88px;
    }
    .tenger{
        left: 179px;
        top: -88px;
    }
}



.fejlec-valasztasok{
    width: 0;
    height: 300px;
    margin-top: 260px;
    z-index: 999;
    border-radius: 0 0 30px 30px;
    background-color: rgba(45, 45, 45, 0.884);
    left: -11px;
    overflow: hidden;
    position: absolute;
    pointer-events: auto;
    transition: transform 0.5s ease, width 0.2s ease;
}


.fejlec-valasztasok.active{
    width: 101%;
    transform: translateX(10px);
}


.valasztasok-gomb, .valasztasok-gomb-bezar{
    position: absolute;
    visibility: visible;
}

.valasztasok-gomb{
z-index: 20;
width: 100px;
height: 40px;
top: 3.45cm;
background: rgb(105, 105, 105);
border:solid gray 1px;
border-radius: 0 0 5px 0;
border-style: solid solid solid none;
}

.valasztasok-gomb-bezar{
    position: absolute;
    width: 40px;
    height: 40px;
    right: 0px;
    background-color: transparent;
    border: unset;
    text-align: center;
    font-size: 25px;
}

.valasztas-li{
    float: left;
    width: 100%;
    height: 44px;
    text-align: center;
    list-style: none;
    overflow: visible;
}



.valasztas-ul {
    width: fit-content;
    flex-direction: column;
    padding: 0;
    margin: 0 auto;
    margin-top: 50px;
}







.fejlec-gomb.aktiv.javit {
    background-color: rgb(250, 209, 161);
    transition: background-color 0.5s ease;
}
.fejlec-gomb.aktiv.csillag {
    background-color: none;
}
.fejlec-gomb.aktiv.vadasz {
    background-color: rgb(163, 238, 163);
    transition: background-color 0.5s ease;
}


.fejlec-gomb.aktiv.tenger {
    background-color: rgb(190, 215, 231);
    transition: background-color 0.5s ease;
}









.nyitvatartas, .email, .telefonszam{
    position: absolute;
}

.nyitvatartas{
    margin-top: 5px;
}

.email{
    left: 65%;
    visibility: hidden;
}

.telefonszam{
    right: 65%;
    visibility: hidden;
}




.kijelentkezes{
    position: absolute;
    right: 10px;
    top: -25px;
    color: rgb(82, 2, 2);
    font-weight: bold;
}




.fejlec-gomb{
    width: 100%;
    height: 100%;
    border: none;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    z-index: 1;
    background-color: rgb(105, 105, 105);
    border: solid gray 1px;
}


@keyframes fejlec-gomb-asd {
    from {  }
    to { border-radius: 10px; height: 50px; z-index: 20; transform: translateY(-3.5px); }
}

.fejlec-gomb.aktiv{
    animation: fejlec-gomb-asd 0.5s forwards;
}
.fejlec-gomb.csillag.aktiv{
     border-radius: 10px;
     height: 50px;
     z-index: 20;
     transform: translateY(-3.5px);
     transition: border-radius 0.5s ease, height 0.5s ease, z-index 0s, transform 0.5s ease;
}


.cart-counter {
    padding: 2px;
    font-weight: bold;
    text-align: center;
}


.valasztoful{
    width: 300px;
    height: 100%;
    margin: -15px;
    margin-top: -30px;
}



.fejlec-1.hide {
    transform: translateY(-100%);
    transition: transform 0.5s ease;
}


/*Szűrők----------------------------------------------------------------------------------------*/

        .oldal-menu {
          position: fixed;
          top: 0px;
            background-color: #1c1c1c;
            color: #e5e5e5;
          width: 100%;
          height: 170px;
          transition: top 0.3s ease;
          display: flex;
          flex-direction: column;
          border-bottom: solid rgb(148, 148, 148) 4px;
          overflow-y: hidden;
          overflow-x: auto;
          transition: transform 0.5s ease;
        }

        .oldal-menu.show {
          top: 180px;
        }


        .oldal-menu.hide{
            transform: translateY(-82%);
            transition: transform 0.5s ease;
        }

        @media (max-width: 730px) {
            .oldal-menu.hide{
            transform: translateY(-180px);
            transition: transform 0.5s ease;
            z-index: 1;
        }

        .tartalom.hide{
            margin-top: -40px;
        }

        .menu-open .tartalom.hide{
            transform: translateY(-180px);
        }
        }

        

        #menuToggle {
            z-index: 23;
            position: absolute;
            top: 95px;
            background: rgb(105, 105, 105);
            cursor: pointer;
            width: 60px;
            height: 35px;
            border-radius: 0 5px 0 0;
            border: solid gray 1px;
            border-style: solid solid none none;
        }


        .szuro{
            position: relative;
            width: 18px;
        }


        #szuroszamlalo{
            position: absolute;
            top: 10px;
            left: 55%;
        }


        #szurotorlo{
            position: absolute;
            width: 200px;
            top: 25px;
            left: 36px;
            z-index: 90;
            color: rgb(82, 2, 2);
            border: none;
            background-color: rgb(235, 235, 235);
            border-radius: 50px;
        }
        #szurotorlo:hover{
            background-color: rgb(213, 213, 213);
            transition: 0.2s ease;
        }
        #szurotorlo:active{
            transform: scale(0.95);
            transition: 0.1s ease;
        }
        

.kocka{
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    margin-top: 50px;
}


.menu-open .tartalom {
    transition: margin-top 0.3s ease, transform 0.5s ease, height 0.5s ease;
    margin-top: 170px;
    transition-delay: 0s;
}


.tartalom {
    transition: margin-top 0.2s linear, transform 0.5s ease, height 0.5s ease;
    margin-top: 0;
    width: 100%;
    height: calc(100vh - 180px);
}

.tartalom.hide{
    height: 100%;
    transform: translateY(-143px);
    transition: transform 0.5s ease, height 0.3s ease;
}


#range-output-min, #range-output-max {
    width: 70px;
    height: 20px;
}


.csuszka-ertekek {
    position: relative;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}


.szurok-allja{
    height: 80px;
}


.valasztoful h1 {
    position: relative;
    font-size: 20px;
    top: 50px;
    right: -50px;
}



.beallit-szoveg{
    margin-top: -10px;
    left: 150px;
}

.beallitasok {
    position: absolute;
    flex-wrap: nowrap;
    width: max-content;
    top: 50px;
    left: 10px;
}

.beallitasok tr {
    display: inline-block;
    margin-right: 40px;
}





@media (min-width: 730px) {

    .fejlec-1{
        height: 140px;
    }
    #menuToggle{
        top: 55px;
    }
    
    #aktivGomb{
        top: 90px;
    }

    .fejlec-valasztasok{
        margin-top: 180px;
    }

    @media (max-height: 440px) {
        .fejlec-valasztasok{
            height: 100vh;
            margin-top: 0;
            top: -115px;
        }
    }

    .oldal-menu {
        top: -40px;
        width: 100%;
    }

    .oldal-menu.show {
        top: 140px;
    }

    .tartalom {
        height: calc(100vh - 140px);
    }

}









/*VÁLASZTÁS~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*főoldal*/



/*javítás*/


/*gomb*/


.anim-wrap {
    position: absolute;
    inset: 0;
    width: 200px;
    height: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none
}


.csavarhuzo{
    opacity: 0;
    z-index: 2;
}

.csavarhuzo,
.fogaskerek, 
.fogaskerekek-szele,
.fogaskerekek-szele-2 {
    position: absolute;
    user-select: none;
    transition: opacity 0.4s ease, transform 0.6s ease;
}
.fogaskerekek-szele,
.fogaskerekek-szele-2{
    z-index: -1;
    opacity: 0;
}

.fejlec-gomb.javit.aktiv .csavarhuzo,
.fejlec-gomb.javit.aktiv .fogaskerek {
    transform: translateY(0);
}

.csavarhuzo.bal,.csavarhuzo.jobb {
    width: 80px;
}


@keyframes becsusz-bal {
    0% {
        transform: translateX(-255px) translateY(-63px) rotate(15deg) scaleX(-1);
    }
    100% {
        transform: translateX(-143px) translateY(10px) rotate(15deg) scaleX(-1);
    }
}
@keyframes fordul-bal {
    0% {
        transform: translateX(-143px) translateY(10px) rotate(15deg) scaleX(-1);
    }
    100% {
        transform: translateX(-142px) translateY(28px) rotate(-15deg) scaleX(-1);
    }
}
@keyframes megjelen-csavarh {
    from { opacity: 0; }
    to { opacity: 1; }
}



.fejlec-gomb.javit.aktiv .csavarhuzo.bal {
    animation:
        becsusz-bal 0.5s ease-out forwards,
        fordul-bal 0.4s ease-out forwards 0.5s,
        megjelen-csavarh 0s linear forwards;
}










@keyframes becsusz-jobb {
    0% {
        transform: translateX(200px) translateY(-65px) rotate(-15deg);
    }
    100% {
        transform: translateX(64px) translateY(10px) rotate(-15deg);
    }
}
@keyframes fordul-jobb {
    0% {
        transform: translateX(64px) translateY(10px) rotate(-15deg);
    }
    100% {
        transform: translateX(62px) translateY(28px) rotate(15deg);
    }
}



.fejlec-gomb.javit.aktiv .csavarhuzo.jobb {
    animation:
        becsusz-jobb 0.5s ease-out forwards,
        fordul-jobb 0.4s ease-out forwards 0.5s,
        megjelen-csavarh 0s linear forwards;
}



@keyframes forgas-jobb {
    from { transform: rotate(0deg); }
    to { transform: rotate(30deg); }
}

@keyframes forgas-bal {
    from { transform: rotate(0deg); }
    to { transform: rotate(-30deg); }
}


.fogaskerek.jobb {
    width: 40px;
    right: 10px;
    top: 9px;
}

.fogaskerek.bal {
    width: 40px;
    right: 150px;
    top: 10px;
}


.fejlec-gomb.javit.aktiv .fogaskerek.jobb {
    animation: forgas-jobb 0.35s ease-out forwards;
    animation-delay: 0.5s;
}

.fejlec-gomb.javit.aktiv .fogaskerek.bal {
    animation: forgas-bal 0.35s ease-out forwards;
    animation-delay: 0.5s;
}



.fkerekek {
    position: absolute;
    margin: auto;
    width: 100%;
    inset: 0;
}

.fejlec-gomb.javit.aktiv .kimegy-jobb {
    position: relative;
    float: right;
    right: 95px;
}

.fejlec-gomb.javit.aktiv .kimegy-bal{
    position: relative;
    float: left;
    left: 285px;
}







@keyframes fogaskerekek-szele {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fkerekek {
    from { opacity: 0; }
    to { opacity: 1; }
}


.fejlec-gomb.javit.aktiv .fogaskerekek-szele {
    animation:
        fkerekek 0.5s forwards,
        fogaskerekek-szele 1.2s ease-in,
        fogaskerekek-szele 1s linear infinite;
    animation-delay: 0s, 0.6s, 1.8s;
}


.fejlec-gomb.javit.aktiv .fogaskerekek-szele-2 {
    animation:
        fkerekek 0.5s forwards,
        fogaskerekek-szele 1.2s ease-out reverse,
        fogaskerekek-szele 1s linear infinite reverse;
    animation-delay: 0s, 0.6s, 1.8s;
}


@keyframes kimegy {
    from { transform: translateX(80px); opacity: 0; }
    to { transform: translateX(0%); opacity: 1; }
}

.fejlec-gomb.javit.aktiv .kimegy-jobb{
    animation: kimegy 0.5s forwards;
}


@keyframes kimegy-2 {
    from { transform: translateX(-80px); opacity: 0; }
    to { transform: translateX(0%); opacity: 1; }
}

.fejlec-gomb.javit.aktiv .kimegy-bal{
    transform: translateX(50%);
    animation: kimegy-2 0.5s forwards;
}






/*oldal*/



.sarok{
    width: 160px;
    margin-top: -17px;
}










/*csillagászat*/


/*gomb*/


@keyframes csillag-hatter-szoveg {
    from {color: #000000;}
    to {color: #ffffff;}
}



.fejlec-gomb.aktiv.csillag {
    animation: csillag-hatter-szoveg 0.5s forwards;
}



.csillag-hatter-csillagkep{
    position: absolute;
    z-index: 1;
    transform: translateY(-51.5%) scale(0.11);
    top: 36px;
}
.csillag-hatter-csillagkep-2{
    position: absolute;
    z-index: 1;
    transform: translateY(-51.5%) scale(0.11);
    top: 36px;
}
@keyframes csillag-hatter-csillagkep {
    from { transform: translateY(-51.5%) scale(0.11);}
    to { transform: translateY(-51.5%) scale(0.15);}
}
@keyframes csillag-hatter-csillagkepasd {
    from { opacity: 1;}
    to { opacity: 0;}
}

.fejlec-gomb.csillag.aktiv .csillag-hatter-csillagkep {
    animation: csillag-hatter-csillagkep 1s ease-in-out forwards,
    csillag-hatter-csillagkepasd 0.7s forwards;
}





.csillag-hatter-csillagkep-2{
    position: absolute;
    z-index: 1;
    transform: translateY(-51.5%) scale(0.11);
    
}

@keyframes csillag-hatter-csillagkep-2 {
    from { transform: translateY(-51.5%) scale(0.11);}
    to { transform: translateY(-51.5%) scale(0.15);}
}


.fejlec-gomb.csillag.aktiv .csillag-hatter-csillagkep-2 {
    animation: csillag-hatter-csillagkep-2 1s ease-in-out forwards;
}






.gomb-szoveg {
    position: relative;
    z-index: 20;
}

.csillag-hatter{
    position: absolute;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%) scale(0.3) rotate(90deg);
    opacity: 0;
}


@keyframes csillag-hatter-1 {
    from { transform: translateX(-50%) translateY(-50%) scale(0.3) rotate(90deg);opacity: 0;}
    to { transform: translateX(-50%) translateY(-50%) scale(0.2) rotate(90deg);opacity: 1;}
}


.fejlec-gomb.csillag.aktiv .csillag-hatter {
    animation: csillag-hatter-1 0.5s ease-in-out forwards;
}




.csillag-hatter-2{
    position: absolute;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%) scale(0.3);
    opacity: 0;
}

@keyframes csillag-hatter-2 {
    from { transform: translateX(-50%) translateY(-50%) scale(0.2); opacity: 1;}
    to { transform: translateX(-50%) translateY(-50%) scale(0.3); opacity: 1;}
}


.fejlec-gomb.csillag.aktiv .csillag-hatter-2 {
    animation: csillag-hatter-2 0.8s ease-in-out forwards;
}


.csillag {
    position: relative;
}

.fejlec-gomb.csillag.aktiv .csillag-pont {
    position: relative;
    width: 6px;
    height: 6px;
    background-image: url('Valasztas_oldalak/Csillagászat/Images/Egy-csillag.png');
    background-size: cover;
    opacity: 0;
    animation: csillag-pislak 2s ease-in-out infinite;
}

@keyframes csillag-pislak {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.3); }
}



.hullocsillag {
    position: absolute;
    width: 10px;
    height: 5px;
    background-image: url('Valasztas_oldalak/Csillagászat/Images/Hullocsillag.png');
    background-size: cover;
    opacity: 0;
    pointer-events: none;
}

@keyframes hullocsillag-ut {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(-1) rotate(var(--angle));
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(-0.5) rotate(var(--angle));
    }
}





/*oldal*/






/*Vadászat*/



/*gomb*/



@keyframes vad-eltunik {
    from { opacity: 1; }

    to { opacity: 0; }
}


.madar{
    right: 157px;
    top: 13px;
}


.fejlec-gomb.vadasz.aktiv .madar{
    animation: vad-eltunik 0s forwards;
}

.fejlec-gomb.vadasz.aktiv .ozike{
    animation: vad-eltunik 0s forwards;
}


.ozike{
    right: 10px;
    top: 7.5px;
}


.ozike-1, .ozike{
    position: absolute;
    width: 40px;
}



.madar-1, .madar{
    position: absolute;
    width: 30px;
}


@keyframes vad-megjelen {
    from { opacity: 0; }

    to { opacity: 1; }
}

.madar-1{
    right: 157px;
    top: 13px;
    opacity: 0;
}

@keyframes madar-anim {
    0% { transform: translateX(0) translateY(0) rotate(0deg); }
    50%{ transform: translateX(25px) translateY(-10px) rotate(-8deg); }
    100% { transform: translateX(30px) translateY(-11px) rotate(0deg); }
}


.fejlec-gomb.vadasz.aktiv .madar-1{
    animation: vad-megjelen 0s forwards,
    madar-anim 0.7s forwards;
}

.fejlec-gomb.vadasz.aktiv .ozike-1{
    animation: vad-megjelen 0s forwards;
}



.ozike-1{
    right: 10px;
    top: 7.5px;
    opacity: 0;
}








.level-bal{
    opacity: 0;
}

.level-jobb{
    opacity: 0;
}



.levelek {
    position: absolute;
    margin: auto;
    width: 100%;
    inset: 0;
    background-color: #000000;
}


.kimegy-jobb-level, .kimegy-bal-level{
    top: -10px;
    user-select: none;
}

.kimegy-jobb-level {
    position: relative;
    float: right;
    right: -10px;
}

.kimegy-bal-level{
    position: relative;
    float: left;
    left: 35px;
}






@keyframes levelek-szele {
    from {
        transform: rotate(90deg) scalex(-1);
        
    }
    to {
        transform: rotate(0) scalex(-1);
        
    }
}


@keyframes level-szel {
    0%   { transform: rotate(0deg) translateX(0%) translateY(0) scalex(-1); }
    25%  { transform: rotate(5deg) translateX(1px) translateY(1px) scalex(-1); }
    50%  { transform: rotate(8deg) translateX(3px) translateY(1px) scalex(-1); }
    75%  { transform: rotate(7deg) translateX(2px) translateY(0px) scalex(-1); }
    100% { transform: rotate(0deg) translateX(0%) translateY(0) scalex(-1); }
}

.fejlec-gomb.vadasz.aktiv .level-jobb{
    position: absolute;
    animation: levelek-szele 0.5s forwards,
    level-szel 5s ease-in-out infinite 0.5s,
    levelek-szele-megjelen 0s forwards;
}



@keyframes levelek-szele-bal {
    from {
        transform: rotate(-90deg) scaley(-1);
        
    }
    to {
        transform: rotate(0) scaley(-1);
        
    }
}


@keyframes level-szel-bal {
    0%   { transform: rotate(0deg) translateX(0%) translateY(0) scaley(-1); }
    25%  { transform: rotate(-5deg) translateX(1px) translateY(1px) scaley(-1); }
    50%  { transform: rotate(-8deg) translateX(3px) translateY(1px) scaley(-1); }
    75%  { transform: rotate(-7deg) translateX(2px) translateY(0px) scaley(-1); }
    100% { transform: rotate(0deg) translateX(0%) translateY(0) scaley(-1); }
}

@keyframes levelek-szele-megjelen {
    from { opacity: 0; }

    to { opacity: 1; }
}


.fejlec-gomb.vadasz.aktiv .level-bal{
    position: absolute;
    animation: levelek-szele-bal 0.5s forwards,
    level-szel-bal 5s ease-in-out infinite 0.5s,
    levelek-szele-megjelen 0s forwards;
}





@keyframes kimegy-jobb-levelek {
    from { transform: translateX(30px) translateY(-100px);}
    to { transform: translateX(0%) translateY(0);}
}


.fejlec-gomb.vadasz.aktiv .kimegy-jobb-level {
    position: absolute;
    width: 0%;
    animation: kimegy-jobb-levelek 0.5s forwards;
}


@keyframes kimegy-bal-levelek {
    from { transform: translateX(-30px) translateY(-100px);}
    to { transform: translateX(0%) translateY(0);}
}


.fejlec-gomb.vadasz.aktiv .kimegy-bal-level {
    position: absolute;
    width: 0%;
    animation: kimegy-bal-levelek 0.5s forwards;
}





/*oldal*/





/*Tengerészet*/



/*gomb*/




.vtorony{
    position: absolute;
    width: 30px;
    right: 15px;
    top: 15px;
}
.hajo{
    position: absolute;
    width: 30px;
    left: 15px;
    top: 15px;
}


@keyframes hajo-rangas {
    0% { transform: rotate(0);}
    25% { transform: rotate(5deg) translatex(2px);}
    50% { transform: rotate(0);}
    75% { transform: rotate(-5deg) translatex(-2px);}
    100% { transform: rotate(0);}
}

.fejlec-gomb.tenger.aktiv .hajo{
    animation: hajo-rangas 3s linear infinite;
}




@keyframes viz-elojon {
    from { }
    to { top: 20px; }
}
@keyframes viz-elojon-2 {
    from { }
    to { top: -3px; }
}


.fejlec-gomb.tenger.aktiv .tenger-1 {
    animation: viz-elojon 0.5s ease-out forwards,
    tenger-rangas 2s linear infinite;
}
.fejlec-gomb.tenger.aktiv .tenger-2 {
    animation: viz-elojon-2 0.5s ease-out forwards,
    tenger-rangas-2 2s linear infinite;
}

@keyframes tenger-rangas {
    0% { transform: translateX(0);}
    50% { transform: translateX(20px) translateY(2px);}
    100% { transform: translateX(0);}
}

.tenger-1{
    position: relative;
    right: 160px;
    top: 50px;
    width: 250%;
    height: 40px;
}

@keyframes tenger-rangas-2 {
    0% { transform: translateX(0);}
    50% { transform: translateX(-10px);}
    100% { transform: translateX(0);}
}

.tenger-2{
    position: relative;
    right: 200px;
    top: 50px;
    width: 300%;
    height: 10px;
}
}


/*oldal*/




/*Fiokbeallitas*/



.settings-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 100vh;
    overflow-y: auto;
    color: white;
}


.settings-content{
    width: 50%;
    background-color: rgba(255, 255, 255, 0.105);
    box-shadow: #858585 0px 0px 10px;
    overflow-y: auto;
}

.gombok{
    height: 100px;
    text-align: center;
    margin-top: 100px;
}

.gomb-a{
width: 200px;
height: 40px;
border: solid rgb(0, 0, 0) 1px;
border-radius: 5px;
}

.gomb-a:hover{
    background-color: rgb(175, 197, 169);
    transition: 0.2s ease;
}

.gomb-a:active{
    transform: scale(0.95);
    background-color: rgb(123, 226, 95);
    transition: 0.1s ease;
}

.gomb-d{
width: 100px;
height: 40px;
background-color: rgb(185, 4, 4);
color: rgb(0, 0, 0);
border: solid rgb(82, 2, 2) 1px;
border-radius: 5px;
}

.gomb-d:hover{
    background-color: rgb(201, 43, 43);
    transition: 0.2s ease;
}

.gomb-d:active{
    transform: scale(0.95);
    transition: 0.1s ease;
}

.page-title{
    text-align: center;
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
}

.setting-title{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 10px;
}

.jelszo-form{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.felhnev-form{
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.settings-content form{
    margin-bottom: 100px;
}


.error-box {
    background-color: rgba(255, 0, 0, 0.2);
    color: red;
    padding: 10px;
    margin: 10px 0;
    border-radius: 6px;
    text-align: center;
}

.success-box {
    background-color: rgba(0, 255, 0, 0.2);
    color: green;
    padding: 10px;
    margin: 10px 0;
    border-radius: 6px;
    text-align: center;
}

@media (max-width: 750px) {
    .settings-content{
        width: 90%;
    }
}

@media (max-width: 400px) {
    .settings-content{
        width: 100%;
    }
}

}