html, body {    
    margin: 0;
    padding: 0;    
    overflow-x: hidden; /* A vízszintes görgetést eltávolítjuk */
    overflow-y: auto;       
      padding-right: 0px; /* Itt a görgetősáv szélességét adjuk meg, hogy ne takarja el a háttér */
      box-sizing: border-box; /* A padding hozzáadódik a teljes szélességhez */
      caret-color: transparent; 
      cursor: default; 
  }


 
  .keret {
    height: 100vh;
    overflow-y: auto;   
    background-image: url('pict/river10.jpg'); 
            background-size: cover; 
            background-position: center; 
            background-repeat: no-repeat; 
            z-index:3;
            position:relative;
  }
  
  .keret::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
    z-index:-1;
    pointer-events: none; /* Ne akadályozza a görgetést */
}
.headercontainer { 
    height: 15vh;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-weight: 600;  
    font-family: 'Times New Roman', Times, serif;    
    color: #17082b;
    align-items: center;
    width: 100%; 
    position: relative; /* Ensure the container is positioned relative */
}

.dfsg {
    position: absolute;
    left: 50vw;          /* Position it at the center horizontally */
    transform: translateX(-50%); /* Move it back by half of its width to fully center it */
    white-space: nowrap; 
    font-weight: 600;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #e3deeb;

    z-index: 999;          /* Ensure the text is above other elements */
 /* Adding style enhancements */
 font-size: 3.6vw; /* Make the text a bit larger */
 
 letter-spacing: 2px; /* Space out the letters slightly */ 
 background: 
 /* Felső border - gyorsabban halványul */
 linear-gradient(to right, #8dd2f1 0%, transparent 5%, transparent 95%, #8dd2f1 100%) 0 0,  
 /* Alsó border - gyorsabban halványul */
 linear-gradient(to right, #8dd2f1 0%, transparent 5%, transparent 95%, #8dd2f1 100%) 0 100%, 
 /* Bal oldali border - gyorsabban halványul */

 linear-gradient(to bottom, #8dd2f1 0%, transparent 30%, transparent 70%, #8dd2f1 100%) 0 0, 
 
 linear-gradient(to bottom, #8dd2f1 0%, transparent 30%, transparent 70%, #8dd2f1 100%) 100% 0;

background-repeat: no-repeat;
background-size: 100% 4px, 100% 4px, 4px 100%, 4px 100%; /* Adjust the size of the borders */

 padding-left: 2%;
 padding-right: 2%;
 padding-bottom: 1%;
 padding-top: 1%;
}

.header {
    height: 15vh;
    width: 90%;
    background: rgba(159, 131, 131, 0); /* Fully transparent background */
       font-size: 4em;   /* Increased font size for header text */
    padding-left: 3em;  
    display: flex;
    justify-content: center;  /* Center the text horizontally inside the header */
    align-items: center;     /* Vertically center the text inside the header */
    font-weight: 600;  
    font-family: 'Times New Roman', Times, serif;    
    color: #17082b;
    position: relative;
    caret-color: transparent;
}


  .stat {   
    display:flex;
    width:10%;
    color: #e3deeb;
    font-weight: 10;      
   margin-right: 1%;
   
    padding: 1px; 
    z-index: 999;
  
    background: rgba(101, 218, 234, 0.24);
    border-radius: 5px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.3px);
    -webkit-backdrop-filter: blur(9.3px);
    border: 1px solid rgba(101, 218, 234, 0.71);
    caret-color: transparent;
  }
  .stattable tr td:first-child {
    text-align: right !important;
  }
  table {
    height: auto;
    width: auto;
    border-collapse: collapse;
    align-self: center;    
}
th, td {
    padding-left: 4px;
    padding-right: 4px;
    text-align :left;
}


.pan {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38%;   
  flex-direction: column; 
  
  padding-top: 1%;   
  padding-bottom: 1%;
  position: relative; /* Positioning context for absolute positioning of .pan_style_reteg */  
  background: rgba(159, 131, 131, 0); /* Fully transparent background */
}

.pan img {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 200px;  /* Adjust width of the image */
  height: 100px;  /* Maintain aspect ratio */  
  z-index: 0; 
  /*mix-blend-mode: multiply;*/
}


.pan_style_reteg {
  background: rgba(159, 131, 131, 0); /* Fully transparent background */
  width: 90%;
  height: 223%;
  top: 0;
  left: 0; 
  border-radius: 0% 0% 3% 0% / 61% 0% 87% 89% ;
  position: absolute; /* Positioned absolutely inside the pan div */
  top: 0;  
  z-index: -2; /* Positioned behind the content */
}
.pan > * {
  /*position: relative; /* Make sure child elements are positioned above the overlay */
  z-index: 1; /* Ensure they are above the overlay */
}



.hintbox {
  
  position: relative;
  display: flex;
  flex-direction: row;
  height :  18%;
  width : 43%;
  background-color: #ecf3e3;
  font-size: 3.3vh;    
  border-radius: 10px;  
  align-items: center;
  justify-content: space-between;
  text-align: center;
  margin-bottom: 1vh;
  caret-color: transparent;
  padding: 0; 
  /*box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.05);*/
  box-shadow: 
  inset -10px -10px 20px rgba(255, 255, 255, 0.7),   /* világosabb árnyék */
  inset 10px 10px 20px rgba(0, 0, 0, 0.15);           /* erősebb sötét árnyék */
  overflow: visible; 
  z-index:30;  
} 

.hint1{
  background-color:#c6f741;
  
  justify-content: center;
  height: 50%;
}
.hint2{
  justify-content: center;
  
 text-align: center;
}
.hint3{
  justify-content: center;


}


.hintcase {
  margin: 0; /* Reset margin */
  width: 100%; /* Take up full width of parent */
  text-align: center; /* Center align content */
}
/*
.panbox::before {
  content: attr(data-text);
  font-size: 2vh;
  color: white; 
  position: absolute;
  left: -30%; 
  top: 50%; 
  transform: translateY(-50%); 
  white-space: normal; 

  word-wrap: normal;
  max-width: calc(15% + 9%); 
}*/
.panbox {
  height :  68%;
  width : 43%;
  display: flex;
  background-color:  white;
  font-size: 3.5vh;    
  border-radius: 10px;    
  /*box-shadow: 0px 0px 0px 5px rgba(135, 182, 235, 0.25);
  box-shadow: 0px 0px 0px 5px rgba(30, 221, 248, 2.15);
  box-shadow: 0 1px 1px rgba(30, 221, 248, 2.25), 0 2px 8px rgba(30, 221, 248, 2.25), inset 0px 0px 0px 1px rgba(30, 221, 248, 2.25);*/
 /* padding-right: 1em;
  padding-left: 1em;*/
  z-index:30;
  opacity:1;
  position:relative;
  justify-content: center;  
  align-items: center;  
  white-space: nowrap;
}
input[type="radio"] {
  display: inline-block;
  margin: 10px;
}

.translationbox {
  position:relative;
  height :  18%;
  width : 43%;
  display: flex;
  background-color: #ecf3e3;
  font-size: 3.3vh;    
  border-radius: 10px;  
  align-items: center;
  margin-top: 1vh;
  caret-color: transparent; 
   justify-content:center; 
  /*box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.05);*/
  box-shadow: 
    inset -10px -10px 20px rgba(255, 255, 255, 0.7),   /* világosabb árnyék */
    inset 10px 10px 20px rgba(0, 0, 0, 0.15);           /* erősebb sötét árnyék */
    z-index:30;
}

.t-bal {
 

  background-color:#c6f741;
  border: 1px solid black;
  justify-content: center;
  height: 50%;
}
.t-kozep {
  justify-content: center;
  border: 1px solid black;
 text-align: center;

}
.t-jobb {
 
  border: 1px solid black;
  
}
.centerdiv{
  display: flex;
  justify-content: center;    
}

#elsoszo {
  flex : 1 ;
  white-space: nowrap;
  align-content: center;
  justify-content : right;
  text-align: right;
  /*padding-right: 1em;*/
  width:fit-content; 
}
.harmadikszo{
  flex : 1 ;  
  align-content: center;
  justify-content : left;
 
  text-align:left;
  padding-left: 0;
  margin-left: 0;
  width:fit-content;
}
.masodikszo {
  flex : 1 ;
  cursor: none;
  display: flex;
  flex-direction: column; 
  align-items: center;
  align-content: center;
  text-align: center;
 
}

.felso{
  background:
  linear-gradient(to right, black 1px, transparent 1px) 0 0,
  linear-gradient(to left, black 1px, transparent 1px) 100% 0,
  linear-gradient(to bottom, black 1px, transparent 1px) 0 0,
  linear-gradient(to bottom, black 1px, transparent 1px) 100% 0;
background-repeat: no-repeat;
background-size: 10px 10px;
transition-duration: 0.1s;
}

.also{  
  background:  
  linear-gradient(to right, black 1px, transparent 1px) 0 100%,
  linear-gradient(to left, black 1px, transparent 1px) 100% 100%, 
  linear-gradient(to top, black 1px, transparent 1px) 0 100%,
  linear-gradient(to top, black 1px, transparent 1px) 100% 100%;  
  background-repeat: no-repeat;
  background-size: 10px 10px;  
  transition-duration: 0.1s;
}
.middleword{
  flex: 1;
  color:rgb(29, 75, 61);
  padding-right : 1vw;
  padding-left : 1vw;    
  caret-color: transparent;
  transition-duration: 0.1s;
}

.middleword:hover {
  background-color: #63e5ee; 
  border-radius: 5px; 
  
}
.middleword.also {
  position: relative; /* szükséges a háttér elhelyezéséhez */
}

.middleword.also:hover {    
  background:   
    linear-gradient(to right, black 1px, transparent 1px) 0 100%, 
    linear-gradient(to left, black 1px, transparent 1px) 100% 100%,  
    linear-gradient(to top, black 1px, transparent 1px) 0 100%,
    linear-gradient(to top, black 1px, transparent 1px) 100% 100%;   
  background-repeat: no-repeat;
  background-size: 10px 10px;   
  background-color: #63e5ee;
  border-radius: 5px; /* Csak a háttér sarkai kerekednek */
 
}

.middleword.also::before {
  content: ''; 
  position: absolute; 
  top: 0; left: 0; right: 0; bottom: 0; 
  border-radius: 0px;  /* a szegély kerekítése */
  background:   
  linear-gradient(to right, black 1px, transparent 1px) 0 100%, 
  linear-gradient(to left, black 1px, transparent 1px) 100% 100%,  
  linear-gradient(to top, black 1px, transparent 1px) 0 100%,
  linear-gradient(to top, black 1px, transparent 1px) 100% 100%;   
background-repeat: no-repeat;
background-size: 10px 10px;   
  
  pointer-events: none; /* Ne zavarja a kattintásokat */
}
.middleword.felso {
  position: relative; /* szükséges a háttér elhelyezéséhez */
}

.middleword.felso:hover {    
  background:
  linear-gradient(to right, black 1px, transparent 1px) 0 0,

  linear-gradient(to left, black 1px, transparent 1px) 100% 0,

  linear-gradient(to bottom, black 1px, transparent 1px) 0 0,
  linear-gradient(to bottom, black 1px, transparent 1px) 100% 0;
background-repeat: no-repeat;
background-size: 10px 10px;
background-color: #63e5ee;
border-radius: 5px; /* Csak a háttér sarkai kerekednek */
}

.middleword.felso::before {
  content: ''; 
  position: absolute; 
  top: 0; left: 0; right: 0; bottom: 0; 
  border-radius: 0px;  /* a szegély kerekítése */
  background:
  linear-gradient(to right, black 1px, transparent 1px) 0 0,
  linear-gradient(to left, black 1px, transparent 1px) 100% 0,
  linear-gradient(to bottom, black 1px, transparent 1px) 0 0,
  linear-gradient(to bottom, black 1px, transparent 1px) 100% 0; 
background-repeat: no-repeat;
background-size: 10px 10px;     
  pointer-events: none; /* Ne zavarja a kattintásokat */
}

.helyesszodiv {
  height : 100%;
  display: flex;
  flex: 1;
  align-content: center;
  text-align: center;

}
.helyesszodiv > div {
    flex-shrink: 0; /* Ne zsugorodjon a div */
}
/*
#harmadikszo {
  flex : 1 ;
  padding-left: 1em;
  align-content: left;
}*/
 /* 
  .panbox {    
    
    justify-self: stretch;
    align-self: stretch;
    border : 1px solid black;
    background-color: #d3d1bb;  
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 5;
    display: flex;
    justify-content: center;

  }
*/

.nextbuttondiv {
  width: 70%; /* A kívánt div szélessége 70% */
  margin: 5px auto; /* 5px a felső és az alsó margó, auto a vízszintes középre igazítás */  
  background: rgba(159, 131, 131, 0); /* Fully transparent background */
  text-align: center; /* Tartalom középre igazítása */
  padding-top: 1em;
  justify-content: center;
  z-index: 21;
 
}
.next-button {
  display: inline-block;
  position: relative;
  background-color: #82939e;
  background-image: linear-gradient( /* chrome */
    hsla(204, 13%, 71%, 0.6), hsla(0, 0%, 100%, 0) 50%,
    hsla(0, 0%, 0%, 0.3) 50%, hsla(0, 0%, 100%, 0.2)
  );
  font-size: 25px;
  font-family: sans-serif;
  font-weight: bold;
  color: white;
  padding: 10px 20px;
  text-shadow:
    0 0 15px hsla(0, 0%, 100%, 1), /* bloom */
    0 2px 4px hsla(0, 0%, 0%, 0.7); /* drop shadow */
  border: none;
  border-radius: 50px;
  margin: 10px;
  box-shadow:
    inset 0 -5px 20px hsla(0, 0%, 0%, 0.4), /* top light */
    inset 0 5px 20px hsla(0, 0%, 100%, 0.4), /* bottom shadow */
    /* multiple light sources yall */
    -8px 8px 5px hsla(0, 0%, 0%, 0.15), /* drop shadow 1 */
    5px 18px 10px hsla(0, 0%, 0%, 0.2); /* drop shadow 2 */
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  z-index: 21;
  width: 30%;
}


.next-button:before {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  right: 20px;
  top: 5px;
  height: 40%;
  border-radius: 50px;
  background: linear-gradient(
    hsla(199, 59%, 72%, 0.8), hsla(0, 0%, 100%, 0) );
    z-index: 21; 
   
}

#next-button.clicked {
  color: rgb(102, 188, 245); /* Change to any color you like */
}


.glossy-button--blue { 
  background-color: rgb(36, 12, 168); 
  z-index: 21;    
}



  .button-31:hover,
  .button-31:focus {
    opacity: .75;
  }


.fix-button{
  opacity: 0;
}
  .pref {
    margin : 0;
    /*display: grid;   /*korábbi megjelenés
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;  */
    display : flex;
    justify-content: center;
    /*height: 30vh;*/
    height: fit-content;
    gap : 2px;
    padding-top: 1em;
    color: #87f8f2
  }
  .pref-elements {
    background: rgba(101, 218, 234, 0.24);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(9.3px);
-webkit-backdrop-filter: blur(9.3px);
border: 1px solid rgba(101, 218, 234, 0.71);
color: #87f8f2;
    border-radius: 5px;
    margin-right: 7px; /* Adjust margin as needed */
    padding: 2px; /* Adjust padding as needed */
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 2em;
    padding-top: 1px;
    height: 70%;
    width : fit-content;
    
    z-index: 20;   
    position: relative;
    align-self: flex-end; 
    margin-top: auto;   
  }
  #allalldiv {
  
    border-radius: 100% 0% 0% 0% / 24% 0% 0% 0% ;
    background: rgba(101, 218, 234, 0.24);
   
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.3px);
    -webkit-backdrop-filter: blur(9.3px);
    border: 1px solid rgba(101, 218, 234, 0.71);
    
    height: 18%;
    width : fit-content;
    
    color: #87f8f2;
    z-index: 25;   
    padding-left: 1%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-right: 1%;    
    display: flex;    
    justify-content: left; 
    align-items: center;    
    align-self: flex-end; 
    margin-top: auto;     
     }



  @supports (-ms-ime-align:auto) {
    .pref-elements {
      display: table;
    }
  }
 #pos {
  background: rgba(101, 218, 234, 0.24);
  border-radius: 5px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(101, 218, 234, 0.71);

  color: #87f8f2
  
  }
  
  #serverdiv {
  border-radius: 5px;
  color: #87f8f2
 
}
 
  .elements_title {    
    font-size: larger;
    font-weight: bold;
  }


.serv4{
  border: 1px solid black;
}

.one {
  transition-timing-function: ease-out;
}
  .tother{
    width :1px;  
    transition-duration: 100ms;
    transition-property: width;
    display: flex;
    justify-content: center;
    align-items: center;
    
    }

  
   

    .bottom-div1 {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 15%; /* Adjust width to cover one quarter of the screen */
      height: 49%; /* Adjust height for the quarter overlap */
      /*background-color: rgba(113, 163, 67, 0.685);*/
      background: linear-gradient(to bottom, #BAD8B6 0.9, #708f4d, 0.1); /* Gradient from dark to light */
      opacity: 1; /* Adds slight transparency */
      z-index: 11; /* Makes sure it overlaps other content */
      border-radius: 0% 100% 10% 0% / 11% 10% 35% 66%  ;
      /*background-image: 
      linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), /* Gradient overlay 
      url('pict/rupic1.webp'); /* Replace with the path to your .webp image 
    background-size: cover; /* Ensure the image covers the entire div 
    background-position: center; /* Keeps the image centered */
      
    }
   
    .bottom-div2 {
      position: absolute;
      bottom: 0;
      left: 50%; /* Centers the div horizontally */
      transform: translateX(-50%); /* Offsets the div by half of its width to truly center it */
      width: 100%; /* Adjust width to cover part of the screen */
      height: 10%; /* Adjust height for the bottom overlap */
      opacity: 0.2; /* Adds slight transparency */
      z-index: 11; /* Makes sure it overlaps other content */
      border-radius: 13% 11% 18% 0% / 10% 80% 0% 19% ;
      background: linear-gradient(to bottom, #c9eca8af, #f8ec7e); 
    }
    .right-side-div {
      position: absolute;
      bottom: 0;
      /*top: 50%; /* Centers the div vertically */
      right: 0; /* Aligns the div to the right side of the screen */
      /*transform: translateY(-50%); /* Offsets the div by half of its height to truly center it */
      width: 10%; /* Adjust width as needed */
      height: 85%; /* Adjust height as needed */
      /*background-color: rgba(35, 54, 18, 0.685);*/
      background: linear-gradient(to bottom, rgba(35, 54, 18, 0.9), rgba(35, 54, 18, 0.1)); /* Gradient from dark to light */
      opacity: 0.1; /* Adds slight transparency */
      z-index: 11; /* Makes sure it overlaps other content */
      border-radius: 0% 0% 18% 14% / 0% 80% 0% 66% ;
    }
    
/*
    .footer {
      text-align: center;
      background-color: rgba(168, 238, 88, 0.2); /* Add opacity to the background
      display: block; /* Change flex to block 
      justify-content: center;
      align-items: flex-start; /* Align items to the top 
      z-index: 21;
      margin-top: 1%;
      height: 6%;
      user-select: text; /* Allow text selection 
      position: relative; /* Ensure footer is not hidden 
      border-radius: 45% 39% 10% 10% / 13% 100% 0% 0% ;      
      color: #000000;
    }
*/
/* Container for the slider */
.slider-container {
  position: relative;
  height: 100%;
}

/* The button to toggle the slider */
.toggle-btn {
  position: fixed;
  left: 10px;
  bottom: 10%;
  padding: 10px 20px;
  font-size: 18px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  z-index: 10;
}

.toggle-btn:hover {
  background-color: #45a049;
}

/* The actual slider */
.slider {
  position: fixed;
  left: -300px; /* Initially, the slider is off-screen */
  bottom: 0;
  width: 300px;
  height: 60%;
  background-color: #333;
  color: white;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: none; /* Hidden by default */
  flex-direction: column;
  overflow-y: auto;
  transition: left 0.5s ease-out; /* Smooth transition for sliding */
}
/* Table inside the slider */

/* Add transition for the slider */
.slider.open {
  display: flex;
  left: 0; /* When opened, slide the slider to the left side */
}
    .footer {
      display:none
    }
  
    .footerspan {
      z-index: 999;
      color: #acdaec;
      opacity: 1;
      min-height: 100%; 
      display: flex;
      flex-direction: column; 
      padding-top: 3.1vh;   
  }
 
    .footer2 {
      display:none
      }
      .footer3{
        display: flex; /* Use flexbox */
        justify-content: center; /* Horizontally center the content */
        align-items :center;
        text-align: center;
        background-color: rgba(33, 14, 48, 0.1); /* Csak a háttér színe lesz áttetsző */
        z-index: 21;
        height: 6%;
        left: 50%; /* A bal oldal 50%-án kezdődik */
       transform: translateX(-50%); /* Eltolja a bal oldalt, hogy pontosan a középén legyen */
        user-select: text;
        position: relative; /* Fix the footer at the bottom */
        bottom: 0; /* Position it at the bottom of the viewport */   
        width: 30%; /* Ensure it spans the full width */
        border-radius: 45% 39% 10% 10% / 23% 100% 0% 0%;    
      }
   
  @media screen and (max-width: 800px)  and (orientation: portrait){
    /*.header {
      height : max-content;
      font-size: 1em;  
      width: 90%;
      border: 1px solid #5c8829;;
      background-color: #5c8829;;
      padding-left: 1em;      
      align-content: center;       
    } */

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow-x: hidden; /* Eltünteti a horizontális görgetést */
      overflow-y: auto;   /* Engedélyezi a vertikális görgetést */
      outline:0;
      outline-color: transparent;
    }
    .headercontainer { 
      height: 0.5vh;
      display: flex;
      flex-direction: row;
      justify-content: space-between;                   
      width: 100%; 
      position: relative; /* Ensure the container is positioned relative */
  }
 
    .keret {
      background-image: none; /* Kikapcsolja a háttérképet */
      background-color: #09122b; /* Alap szín, amit szeretnél */
      overflow-x: hidden; /* Eltünteti a horizontális görgetést */
      outline:0;
      outline-color: transparent;
    }
    .keret::after {
      display:none;
    }
     .header{
      display : none;
     }
    .stat {   
      display : none;
    }
    .pan_style_reteg{
      display: none;
      }
    .pan{   
      display: flex;
      /*justify-content: center;
      align-items : center;*/
      background-color: #09122b;     
      flex-direction: column; 
      padding-top: 1%;   
      height: 70%; 
      outline: 0;   
      font-weight:600;
          
    }
   
    /*
    .panbox {
      position: relative;  
      display: flex;
      justify-content: center;  /* Horizontálisan középre igazítás 
      align-items: center;  /* Vertikálisan középre igazítás 
      
    }*/
    .panbox{
      width : 100%;     
      height: 70%;  
      font-size: 2.1vh;
      position: relative;  
      display: flex;
      background-color: white;
      justify-content: center;  /* Horizontálisan középre igazítás */
      align-items: center;  /* Vertikálisan középre igazítás */
      white-space: nowrap;
      font-weight:600;
    }
 
    
    /* A középső szavak (middleword) közötti távolságok */
    .middleword {
      margin: 0; 
      padding-left:1.1vh ;
      padding-right:1.1vh ;
      padding-top:1vh;
      padding-bottom:2vh ;     
      font-weight:600; 
    }
    .centerdiv{
      display: flex;
      justify-content: center; /* Vízszintesen középre */
      align-items: center; /* Függőlegesen középre */
      font-weight:600;
    }

    .elsoszo, .harmadikszo {
      /*display: inline-block; /* Blokk elemként viselkedik, de ugyanabban a sorban marad */
      margin: 0; /* Kisebb margó, hogy ne legyenek szorosan */
      white-space: nowrap;
      padding:1px;
      justify-self: center;
      justify-content: center;
      align-self: center;
      align-content: center;
      font-weight:600;
    }

    /* Az elsoszo és harmadikszo div-ek */

    /*.elsoszo{
      padding-right: 0.1vw;
      margin-right: 0.1vw;
    }
    .harmadikszo{
      display: flex;     
      padding-left: 0;
      margin-left: 0;
      justify-items: left;
    }*/
        

    
    #allalldiv {  
      border-radius: 2px;
      height: fit-content;
      width : fit-content;
      background: rgba(101, 218, 234, 0.24);
      box-shadow: rgba(12,107,12,1) 0px 2px 5px -1px, rgba(12,107,12,1) 0px 1px 3px -1px; 
      z-index: 25;         
      display: flex;    
      justify-content: left; /* Centers horizontally */
      align-items: center;     /* Centers vertically */
      margin-top: auto; /* This pushes it to the bottom */
      
       }
  
 
  
    .translationbox::before{
      display: none;
    }
   
    .nextbuttondiv {
      
      width: 100%; 
      /*margin: 5px auto;*/
      background-color: rgba(9, 18, 43, 0.0); 
      text-align: center;       
      justify-content: center;      
     ;
    
     padding-top: 0;
     padding-bottom: 0;
     margin-top: 0;
     margin-bottom: 0;
     border-radius: 50px;

     outline: 0; 
     outline-color: transparent;
   
    }
    .next-button {
      display: inline-block;
      position: relative;
      background-color: #82939e;
      background-image: linear-gradient( /* chrome */
        hsla(204, 13%, 71%, 0.6), hsla(0, 0%, 100%, 0) 50%,
        hsla(0, 0%, 0%, 0.3) 50%, hsla(0, 0%, 100%, 0.2)
      );
      font-size: 25px;
      font-family: sans-serif;
      font-weight: bold;
      color: white;
      padding: 10px 20px;
      text-shadow:
        0 0 15px hsla(0, 0%, 100%, 1), /* bloom */
        0 2px 4px hsla(0, 0%, 0%, 0.7); /* drop shadow */
      border: none;
      border-radius: 50px;
      box-shadow: none; 
     /*
      box-shadow:
        inset 0 -5px 20px hsla(0, 0%, 0%, 0.4),
        inset 0 5px 20px hsla(0, 0%, 100%, 0.4), 
      
        -8px 8px 5px hsla(0, 0%, 0%, 0.15), 
        5px 18px 10px hsla(0, 0%, 0%, 0.2);*/
      cursor: none;
      /*transition: none;   */     
      z-index: 21; 
       width: 50%;
       margin-top: 0;
       margin-bottom: 0;   
       border-radius: 50px;
       outline: 0; 
       outline-color: transparent; 
    }    
      
    .next-button:focus, .next-button:active {
      outline: 0;
      border-radius: 50px;
      box-shadow: none; 
      outline: 0; 
      outline-color: transparent;    
    
    }
    .next-button:hover{
        outline: 0;
        border-radius: 50px;
      box-shadow: none; /* Eltávolítja a box-shadow-t kattintáskor */
      outline: 0;      
    }
    .next-button:before {
        content: '';
      display: block;
      position: absolute;
      left: 20px;
      right: 20px;
      top: 5px;
      height: 40%;
      border-radius: 50px;
     
      z-index: 21; 
      outline: 0;
      outline-color: transparent;
    box-shadow: none;       
    }
  
.glossy-button--blue { 
  background-color: rgb(36, 12, 168); 
  z-index: 22;    
}


    .hintbox::before{
      display: none;
    }
    .hintbox{
      width: 100%;
      font-size: 15px; 
      height: 10%;
    }
    .translationbox{
      width: 100%;
      font-size: 15px;   
      height: 10%;
    }

 
    .pref {       
      display: grid;    
      grid-template-columns: minmax(100px,1fr);   
      height :max-content;
      
    } 

    .pref-elements {       
      padding-bottom: 3em;
      width: auto;
    } 
    #pos {
      border-radius: 0% 0% 0% 0% /  0% 0% 0% 0%  ;
    }
    
    #serverdiv {
    border-radius:  0% 0% 0% 0% /  0% 0% 0% 0% ;
  }
   
   
    #gender {
      width : auto;
    }
  
    .fix-button{
      opacity: 1;
    }
    .bottom-div1 {
      display: none;
    }
    .bottom-div2 {
      display: none;
    }
    .right-side-div {
      display: none;
    }
    .footer2 {      
      padding-right: 1%;
      padding-left: 1%;
      padding-top: 2%;
      display:block;
      clear:both;
      position: absolute;
      bottom: 0;
      background-color: rgba(168, 238, 88, 0.1); /* Add opacity to the background */      
      height: fit-content;
      user-select: text;      
      width: fit-content;      
      border-radius: 10% 10% 0% 0% / 100% 100% 0% 0% ;
      color: #699abb;
    }
    .footer {
    display:none
    }
    .footer3 {
      display:none
      }
    
  }

  @media screen and (max-width: 800px) and (orientation:landscape) {
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow-x: hidden; /* Eltünteti a horizontális görgetést */
      overflow-y: auto;   /* Engedélyezi a vertikális görgetést */
    }
    .headercontainer { 
      height: 1vh;
      display: flex;
      flex-direction: row;
      justify-content: space-between;                   
      width: 100%; 
      position: relative; /* Ensure the container is positioned relative */
  }
 
    .keret {
      background-image: none; /* Kikapcsolja a háttérképet */
      background-color: #09122b; /* Alap szín, amit szeretnél */
      overflow-x: hidden; /* Eltünteti a horizontális görgetést */
      
    }
     .header{
      display : none;
     }
    .stat {   
      display : none;
    }
    .pan{      
      height: 70%; 
      margin: 0;
      font-size: 22px;
      font-weight:600;
      display: flex;   
      flex-direction: column; 
      text-align: left;
    }
    .translationbox::before{
      display: none;
    }
  
    .hintbox::before{
      display: none;
    }
    .hintbox{
      width: 100%;
      font-size: 22px;
    }
    .translationbox{
      width: 100%;
      font-size: 22px; 
    }

    .panbox{
      width : 100%;
      font-size: 22px;
      height: 60%; 
      margin: 0;
      display: flex;
      position: relative;  
      /*flex-direction: column;*/
      align-items: center;
      justify-content: center;
      justify-items: center;
      justify-self: center;  
      font-weight:600;
      text-align: left;
    }
    .kozep{
      background-color:  white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      justify-items: center;
      justify-self: center;
      font-weight:600;
      text-align: left;
    }
    
    .middleword{
      justify-content: left;
      justify-items: left;
      justify-self: left;
      text-align: left;
    }
    #allalldiv {  
      border-radius: 2px;
      height: fit-content;
      width : fit-content;
      background: rgba(101, 218, 234, 0.24);
      box-shadow: rgba(12,107,12,1) 0px 2px 5px -1px, rgba(12,107,12,1) 0px 1px 3px -1px; 
      z-index: 25;   
      
      display: flex;    
      justify-content: left; /* Centers horizontally */
      align-items: center;     /* Centers vertically */
      
      
       }
    .pref {       
      display: grid;    
      grid-template-columns: minmax(100px,1fr);   
      height :max-content;
      
    } 

    .pref-elements {       
      padding-bottom: 3em;
      width: auto;
    } 
    #gender {
      width : auto;
    
    }
    .centerdiv{
      display: flex;
      flex-direction: row;
      justify-content: center; 
      align-items: center;
    }
    .middleword {      
      line-height: 130%;
    }
    
    .nextbuttondiv{
      margin-top: 0;  
      padding-bottom: 0;
      padding-top: 0;
    }
    .next-button{
      margin: 0;
      width: 50%;        
    }
     .fix-button{
      opacity: 1;
    }
    .footer {
      display:none
      }
        .footer2 {      
      padding-right: 1%;
      padding-left: 1%;
      padding-top: 2%;
      display:block;
      clear:both;
      position: absolute;
      bottom: 0;
      margin-left: auto;   /* Jobbra igazítja az elemet */
      background-color: rgba(168, 238, 88, 0.1); /* Add opacity to the background */      
      height: fit-content;
      user-select: text;      
      width: fit-content;      
      border-radius: 10% 10% 0% 0% / 100% 100% 0% 0% ;
      color: #699abb;
    }
    .footer3 {
      display:none
      }
  }


  @media screen and (max-width: 1200px) and (min-width: 800px) and (orientation:portrait) {
   
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow-x: hidden; /* Eltünteti a horizontális görgetést */
      overflow-y: auto;   /* Engedélyezi a vertikális görgetést */
    }
    .headercontainer { 
      height: 1vh;
      display: flex;
      flex-direction: row;
      justify-content: space-between;                   
      width: 100%; 
      position: relative; /* Ensure the container is positioned relative */
  }
 
    .keret {
      background-image: none; /* Kikapcsolja a háttérképet */
      background-color: #09122b; /* Alap szín, amit szeretnél */
      overflow-x: hidden; /* Eltünteti a horizontális görgetést */
    
    }
     .header{
      display : none;
     }
    .stat {   
      display : none;
    }   
   
 
    .stat {   
      display : none;
    }
    .translationbox::before{
      display: none;
    }
 
    .hintbox::before{
      display: none;
    }
    .hintbox{
      width: 100%;
      font-size: 22px; 
   
    }
    .translationbox{
      width: 100%;
      font-size: 22px; 
      height: 10%;    }

    .pan{
      display: flex;
      justify-content: center;
      align-items : center;
      height: 60%; /* Ensure the pan div takes up the full height */
      background-color: #09122b; /* Alap szín, amit szeretnél */  
      flex-direction: column; 
      padding-top: 1%;
      margin: 0;
    }
    .centerdiv{
    flex-direction: row; 
    }
    .kozep {
      font-size: 30px; 
    }
    .middleword {
      font-size: 30px; 
    }
    #harmadikszo {
      font-size: 30px; 
    }
    #elsoszo {
      font-size: 30px; 
    }


    .panbox{
      width : 100%;
      font-size: 22px;     
    }
    .nextbuttondiv{
      padding-top: 0;
      padding-bottom: 0;
    }
    .next-button{
      margin: 0;
      width: 50%;
    }
    #allalldiv {  
      border-radius: 2px;
      height: fit-content;
      width : fit-content;
      background: rgba(101, 218, 234, 0.24);
      box-shadow: rgba(12,107,12,1) 0px 2px 5px -1px, rgba(12,107,12,1) 0px 1px 3px -1px; 
      z-index: 25;   
      
      display: flex;    
      justify-content: left; /* Centers horizontally */
      align-items: center;     /* Centers vertically */     
      
       }
    .pref {       
      display: grid;    
      grid-template-columns: minmax(100px,1fr);   
      height :max-content;
      
    } 

    .pref-elements {       
      padding-bottom: 3em;
      width: auto;    
      background: rgba(101, 218, 234, 0.24);
      border-radius: 5px;
      margin-right: 7px; /* Adjust margin as needed */
      padding: 2px; /* Adjust padding as needed */
      padding-left: 2em;
      padding-right: 2em;
      padding-bottom: 2em;
      padding-top: 1px;
      height: 70%;
      width: auto;
      z-index: 20;   
      position: relative;    
      margin-top: auto;  
    } 

    #gender {
      width : auto;
    }
   
    .footer {
      display:none
      }
        .footer2 {      
      padding-right: 1%;
      padding-left: 1%;
      padding-top: 2%;
      display:block;
      clear:both;
      position: absolute;
      bottom: 0;
      margin-left: auto;   /* Jobbra igazítja az elemet */
      background-color: rgba(168, 238, 88, 0.1); /* Add opacity to the background */      
      height: fit-content;
      user-select: text;      
      width: fit-content;      
      border-radius: 10% 10% 0% 0% / 100% 100% 0% 0% ;
      color: #699abb;
    }
    .fix-button{
      opacity: 1;
    }
    .footer3 {
      display:none
      }
  }

  @media screen and (max-width: 1200px) and (min-width: 800px) and (orientation:landscape) {
   
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow-x: hidden; /* Eltünteti a horizontális görgetést */
      overflow-y: auto;   /* Engedélyezi a vertikális görgetést */
    }
    .headercontainer { 
      height: 1vh;
      display: flex;
      flex-direction: row;
      justify-content: space-between;                   
      width: 100%; 
      position: relative; /* Ensure the container is positioned relative */
  }
 
    .keret {
      background-image: none; /* Kikapcsolja a háttérképet */
      background-color: #09122b; /* Alap szín, amit szeretnél */
      overflow-x: hidden; /* Eltünteti a horizontális görgetést */
      
    }
     .header{
      display : none;
     }
    .stat {   
      display : none;
    }   
   
 
    .stat {   
      display : none;
    }
    .translationbox::before{
      display: none;
    }
 
    .hintbox::before{
      display: none;
    }
    .hintbox{
      width: 100%;
      font-size: 22px; 
    }
    .translationbox{
      width: 100%;
      font-size: 22px; 
    }

    .pan{
      display: flex;
      justify-content: center;
      align-items : center;
      height: 60%; /* Ensure the pan div takes up the full height */
      background-color: #09122b; /* Alap szín, amit szeretnél */  
      flex-direction: column; 
      padding-top: 1%;
      margin: 0;
    }
    .kozep {
      font-size: 30px; 
    }
    .middleword {
      font-size: 30px; 
    }
    #harmadikszo {
      font-size: 30px; 
    }
    #elsoszo {
      font-size: 30px; 
    }


    .panbox{
      width : 100%;
      font-size: 22px;     
    }
    .nextbuttondiv{
      padding-top: 0;
      padding-bottom: 0;
    }
    .next-button{
      margin: 0;
      width: 50%;
    }
    #allalldiv {  
      border-radius: 2px;
      height: fit-content;
      width : fit-content;
      background: rgba(101, 218, 234, 0.24);
      box-shadow: rgba(12,107,12,1) 0px 2px 5px -1px, rgba(12,107,12,1) 0px 1px 3px -1px; 
      z-index: 25;   
      
      display: flex;    
      justify-content: left; /* Centers horizontally */
      align-items: center;     /* Centers vertically */     
      
       }
    .pref {       
      display: grid;    
      grid-template-columns: minmax(100px,1fr);   
      height :max-content;
      
    } 

    .pref-elements {       
      padding-bottom: 3em;
      width: auto;    
      background: rgba(101, 218, 234, 0.24);
      border-radius: 5px;
      margin-right: 7px; /* Adjust margin as needed */
      padding: 2px; /* Adjust padding as needed */
      padding-left: 2em;
      padding-right: 2em;
      padding-bottom: 2em;
      padding-top: 1px;
      height: 70%;
      width: auto;
      z-index: 20;   
      position: relative;    
      margin-top: auto;  
    } 

    #gender {
      width : auto;
    }
   
    .footer {
      display:none
      }
        .footer2 {      
      padding-right: 1%;
      padding-left: 1%;
      padding-top: 2%;
      display:block;
      clear:both;
      position: absolute;
      bottom: 0;
      margin-left: auto;   /* Jobbra igazítja az elemet */
      background-color: rgba(168, 238, 88, 0.1); /* Add opacity to the background */      
      height: fit-content;
      user-select: text;      
      width: fit-content;      
      border-radius: 10% 10% 0% 0% / 100% 100% 0% 0% ;
      color: #699abb;
    }
    .fix-button{
      opacity: 1;      
    }
    .footer3 {
      display:none
      }
  }

  @media screen and (max-width: 1440px) and (min-width: 1200px) {     /*LAPTOP*/
    html, body {
      width: 100%;
      height: 100%; /* Állítsd be a teljes magasságot */
      margin: 0;
      overflow-x: hidden;
      overflow-y: auto;
    }
    
    .keret {
      height: 100%; /* Állítsd be, hogy a teljes rendelkezésre álló magasságot kitöltse */
      overflow-x: hidden;
      overflow-y: auto;
    }
    .headercontainer { 
      height: 15vh;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-weight: 600;  
      font-family: 'Times New Roman', Times, serif;    
      color: #17082b;
      align-items: center;
      width: 100%; 
      position: relative; /* Ensure the container is positioned relative */
  }

  
  .dfsg {
     
      left: 50vw;          
      transform: translateX(-50%); 
      font-weight: 600;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      color: #e3deeb;
  
      z-index: 999;          
   
   font-size: 2rem; 
   
   letter-spacing: 2px; 
   background: 
   
   linear-gradient(to right, #8dd2f1 0%, transparent 5%, transparent 95%, #8dd2f1 100%) 0 0,  

   linear-gradient(to right, #8dd2f1 0%, transparent 5%, transparent 95%, #8dd2f1 100%) 0 100%, 

  
   linear-gradient(to bottom, #8dd2f1 0%, transparent 30%, transparent 70%, #8dd2f1 100%) 0 0, 
   
   linear-gradient(to bottom, #8dd2f1 0%, transparent 30%, transparent 70%, #8dd2f1 100%) 100% 0;
  
  background-repeat: no-repeat;
  background-size: 100% 4px, 100% 4px, 4px 100%, 4px 100%; 
  
   padding-left: 2%;
   padding-right: 2%;
   padding-bottom: 1%;
   padding-top: 1%;
  }
  
  .header {
      height: 15vh;
      width: 85%;
      background: rgba(159, 131, 131, 0); /* Fully transparent background */
         font-size: 4em;   /* Increased font size for header text */
      padding-left: 3em;  
      display: flex;
      justify-content: center;  /* Center the text horizontally inside the header */
      align-items: center;     /* Vertically center the text inside the header */
      font-weight: 600;  
      font-family: 'Times New Roman', Times, serif;    
      color: #17082b;
      position: relative;
  }
  .stat {   
    display:flex;
    width:15%;
    color: #e3deeb;
    font-weight: 10;      
   margin-right: 1%;
   
    padding: 1px; 
    z-index: 999;
  
    background: rgba(101, 218, 234, 0.24);
    border-radius: 5px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.3px);
    -webkit-backdrop-filter: blur(9.3px);
    border: 1px solid rgba(101, 218, 234, 0.71);
  
  }
  .pan{
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    height: 50vh;
  }
  .hintbox{
    width: 75%;
    font-size: 4vh;
  }
  .panbox{
    width: 75%;
    font-size: 4vh;
  }
  .translationbox{
    width: 75%;
    margin-bottom: 0;
  }
  .nextbuttondiv{
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .next-button{
    width: 50%;
  }
  #allalldiv {  
    border-radius: 2px;
    height: fit-content;
    width : fit-content;
    background: rgba(101, 218, 234, 0.24);
    box-shadow: rgba(12,107,12,1) 0px 2px 5px -1px, rgba(12,107,12,1) 0px 1px 3px -1px; 
    z-index: 25;   
    
    display: flex;    
    justify-content: left; /* Centers horizontally */
    align-items: top;     /* Centers vertically */       
    align-self: start;
    margin-top: 0;
 
     }
  .pref{
    /*height: fit-content;*/
    height :max-content;   
  }
  .footer {
    display: none;
  }
  .footer3{
    display: flex; /* Use flexbox */
    justify-content: center; /* Horizontally center the content */
    align-items :center;
    text-align: center;
    background-color: rgba(33, 14, 48, 0.1); /* Csak a háttér színe lesz áttetsző */
    z-index: 21;
    height: 6%;
    left: 50%; /* A bal oldal 50%-án kezdődik */
   transform: translateX(-50%); /* Eltolja a bal oldalt, hogy pontosan a középén legyen */
    user-select: text;
    position: relative; /* Fix the footer at the bottom */
    bottom: 0; /* Position it at the bottom of the viewport */   
    width: 30%; /* Ensure it spans the full width */
    border-radius: 45% 39% 10% 10% / 23% 100% 0% 0%;    
  }
  .footer2{
    display: none;
  }
  }

  .custom-checkbox{
    font-family: arial;
    max-width: 500px;
    margin: 0 auto;
  }
  
  * {
    box-sizing: border-box;
  }

 
 
  [type="checkbox"]:checked,
  [type="checkbox"]:not(:checked), 
  [type="radio"]:checked,
  [type="radio"]:not(:checked) {
      position: absolute;
      left: -9999px;
  }
  [type="checkbox"]:checked + label,
  [type="checkbox"]:not(:checked) + label,
  [type="radio"]:checked + label,
  [type="radio"]:not(:checked) + label
  {
      position: relative;
      padding-left: 35px;      
      cursor: pointer;
      line-height: 20px;
      display: inline-block;
      color: #def0ea;
  }
  [type="checkbox"]:checked + label:before,
  [type="checkbox"]:not(:checked) + label:before,
  [type="radio"]:checked + label:before,
  [type="radio"]:not(:checked) + label:before
  {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 20px;
      height: 20px;
      border: 1px solid #224950;
      background: #cdecdb;
      -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
  [type="checkbox"]:checked + label:after,
  [type="checkbox"]:not(:checked) + label:after,
  [type="radio"]:checked + label:after,
  [type="radio"]:not(:checked) + label:after
  {
      content: '';
      background: #2d378a;
      height: 14px;
      width: 14px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 0;
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
  }
  [type="checkbox"]:not(:checked) + label:after,
  [type="radio"]:not(:checked) + label:after
  {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
  }
  [type="checkbox"]:checked + label:after,
  [type="radio"]:checked + label:after
  {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  
  [type="radio"]:checked + label:before,
  [type="radio"]:not(:checked) + label:before{
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
  }
  
  [type="radio"]:checked + label:after,
  [type="radio"]:not(:checked) + label:after
  {
      -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
  }