/* Alap stílusok */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6;
    color: #333;
}

/* Fejléc */
header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
    font-size: 28px;
}

/* Navigációs menü */
nav {
    background-color: #444;
    display: flex;
    justify-content: center;
    padding: 10px;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-size: 20px;
}

nav a:hover {
    color: #28a745;
}

/* Fő tartalom */
.main-content {
    padding: 20px;
    max-width: 1200px;
    margin: 20px auto;
}

.match {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.match p {
    margin: 5px 0;
    font-size: 20px;
}

button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 15px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #218838;
}

/* Üzenet a bejelentkezéshez */
.login-message {
    font-size: 20px;
    color: #218838;
    font-weight: bold;
}

/* Szavazás gombok */
button[type="submit"] {
    background-color: #28a745;
}

button[type="submit"]:hover {
    background-color: #218838;
}

/* Hiba üzenet */
.error-message {
    color: red;
    font-size: 20px;
}

/* Admin panel */
.admin-panel {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Formák */
form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="datetime-local"] {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 20px;
}

input[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
}

button{
    font-size: 20px;
}

input[type="submit"]:hover {
    background-color: #218838;
}

/* Table for Matches */
table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 12px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

td {
    background-color: white;
}

/* Footer */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 18px;
    margin-top: 20px;
    border-top: 1px solid #ddd;
}

footer a{
    color:#28a745;
}

p{
    font-size: 18px;
}
p a{
    color:#28a745;
}

.footer-container {
    display: flex;
    justify-content: space-between; /* Bal és jobb oldal széthúzása */
    align-items: center; /* Függőleges középre igazítás */
    max-width: 1200px; /* Középre helyezéshez max. szélesség */
    margin: 0 auto; /* Középre igazítja a tartalmat */
    min-height: 150px; /* Minimális magasság, hogy elég hely legyen a középre igazításhoz */
}

.footer-left, .footer-right {
    width: 45%; /* Bal és jobb oszlop szélessége */
}

.footer-left {
    display: flex;
    flex-direction: column; /* Tartalom egymás alatt */
    justify-content: center; /* Függőleges középre igazítás */
}

.footer-left p, .footer-left ul {
    margin: 0 0 10px; /* Térköz a bekezdések és a lista között */
}

.footer-left ul {
    list-style: none; /* Lista pontok eltávolítása */
    padding: 0;
}

.footer-left ul li {
    margin-bottom: 5px;
}

.footer-left ul li a {
    color: #28a745; /* Link színe */
    text-decoration: none; /* Aláhúzás eltávolítása */
}

.footer-left ul li a:hover {
    text-decoration: underline; /* Link kiemelése hover állapotban */
}

.footer-right h4 {
    margin-bottom: 10px; /* Térköz a cím alatt */
}

.footer-right form {
    display: flex;
    flex-direction: column; /* Form elemek egymás alatt */
}

.footer-right form label {
    margin-bottom: 5px; /* Térköz a címkék alatt */
}

.footer-right form input, .footer-right form button {
    margin-bottom: 10px; /* Térköz az elemek között */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px; /* Lekerekített sarkok */
    font-size: 14px;
}
.footer-right form input, .footer-right form button {
    margin-bottom: 10px; /* Térköz az elemek között */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px; /* Lekerekített sarkok */
}

.footer-right form button {
    color: #fff;
    cursor: pointer;
    border: none;
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Egymás alá helyezi az oszlopokat */
        align-items: center; /* Középre igazítja a tartalmat */
    }

    .footer-left, .footer-right {
        width: 100%; /* Teljes szélesség */
        text-align: center; /* Szöveg középre igazítása */
        margin-bottom: 20px; /* Térköz az oszlopok között */
    }
}


/* Wrapper az elrendezéshez */
.container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 0;
}

/* Leaderboard stílus */
.leaderboard, .matchhistory {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    background: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    overflow: hidden; /* Alapértelmezett görgetés tiltása */
}

/* Match history görgethető tartalom */
.matchhistory {
    display: flex;
    flex-direction: column; /* Függőleges elrendezés */
    max-height: 600px; /* Beállított maximális magasság */
}

.matchhistorylist {
    flex: 1; /* A lista töltse ki a konténert */
    overflow-y: auto; /* Csak a lista görgethető */
    margin-top: 10px; /* Hely a cím és lista között */
}

/* Címek középre igazítása */
#leaderboardtitle,
#matchhistorytitle {
    text-align: center;
    margin-bottom: 0; /* Csökkentett margó */
    font-size: 24px;
    border-bottom: 2px solid #ddd; /* Elválasztó vonal */
    padding-bottom: 10px; /* Hely az alsó margón */
}

/* Elemenkénti stílus */
.matchhistoryitem,
.leaderborditem {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.matchhistoryitem:hover,
.leaderborditem:hover {
    background-color: #00d43250;
}

/* Szöveg stílusok */
.matchhistoryitem p,
.leaderborditem p {
    margin: 5px 0;
    color: #2b2b2b;
    font-size: 20px;
    text-align: center;
}
/*Mobil nézet*/
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack egymás alá */
        gap: 10px; /* Csökkentett távolság */
    }

    .leaderboard, .matchhistory {
        max-width: 100%; /* Töltse ki a rendelkezésre álló szélességet */
    }
}



/* Select stílusok */
select {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 20px;
    background-color: white;
    color: #333;
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: #28a745;
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

select option {
    background-color: white;
    color: #333;
}

/* Hover effect for select options */
select:hover {
    border-color: #218838;
}