@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Inter:wght@300;400;600&display=swap');

.menustlye {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
}

/* Rádiógombok */
.difficulty-options {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 1px;
    width: 250px;
    font-family: 'Comic Sans MS', sans-serif;
}

.difficulty-options label {
    flex: 1;
    text-align: center;
    background: #f4f4f4;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    font-size: 15px;
    font-weight:600;
}

/* Az input eltüntetése, de kattintható marad */
.difficulty-options input[type="radio"] {
    display: none;
}

/* Hover effekt */
.difficulty-options label:hover {
    background: #ddd;
}

/* Kiválasztott állapot */
.difficulty-options input[type="radio"]:checked + span {
    background: #007bff;
    color: white;
    border-radius: 5px;
    display: block;
}

/* Gomb design */
.startt {
    background: linear-gradient(135deg, #b3d4fc, #6fa3f7);
    border: none;
    color: white;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    width: 250px;
}

.startt:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    background: #0a4b91;
}


.difficulty {
    border-radius: 10px;
    padding: 20px 20px;
    width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    text-align: center;
    align-items: center;
    align-self: center;

}


.difficultyDiv{
    display: flex;
    justify-content: center;
    flex-direction: column;

}



.difficulty ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.difficulty li {
    display: flex;
    align-items: center;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #ddd;
}

.difficulty li:last-child {
    border-bottom: none;
}

/* Színek és ikonok a nehézségi szinthez */
.difficulty li::before {
    content: "✔"; /* Alapértelmezett ikon */
    font-size: 18px;
    font-weight: bold;
    margin-right: 8px;
    color: #007bff;
}

.difficulty li:nth-child(2)::before {
    content: "⚡"; /* Közepes ikon */
    color: #ff9800;
}

.difficulty li:nth-child(3)::before {
    content: "🔥"; /* Nehéz ikon */
    color: #dc3545;
}

#paddingforLi{
    padding-left:6px;
}


@media (max-width: 768px) {
    /* A menü (menustlye) esetén csökkentjük a padding értéket, ha kell */
    .menustlye {
      padding-top: 20px;
    }
    
    /* A rádiógombos opciók konténere most kitölti a rendelkezésre álló szélességet, de legfeljebb 300px */
    .difficulty-options {
      width: 90%;
      max-width: 300px;
      margin: 0 auto;
    }
    
    /* A rádiógombos opciók feliratai esetén esetleg kisebb betűméret */
    .difficulty-options label {
      font-size: 14px; /* ha szükséges */
    }
    
    /* A start gomb (startt) mobilon középre igazítva, kitölti a rendelkezésre álló szélességet */
    .startt {
      width: 90%;
      max-width: 300px;
      margin: 0 auto;
    }
    
    /* A difficulty box mobilon szélességét is 90%-ra állítjuk, hogy kitöltse a képernyőt, és középre kerüljön */
    .difficulty {
      width: 90%;
      max-width: 320px;
      margin: 0 auto;
      padding: 15px;  /* csökkentett padding mobilra */
    }
    
    /* Az ul és li elemeknél csökkenthetünk egy kicsit a paddingen, hogy a lista jobban illeszkedjen */
    .difficulty ul {
      padding: 0 10px;
    }
    
    .difficulty li {
      padding: 8px 0;
      font-size: 14px; /* javítja az olvashatóságot mobilon */
    }
    
    /* Ha szükséges, egyéb elemeknél is középre igazítás */
    #paddingforLi {
      padding-left: 4px;
    }
  }