/* Жалпы стилдер */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
/*    background-color: #f4f7f6;*/
    color: #333;
    line-height: 1.6;
}

.main-header {
    position: relative;
    background-image: url("logo.png");
    background-color: #009688eb;
    color: white;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    background-position-y: 0px;
    overflow: hidden;
}

/* Баш тема */
.main-header h1 {
    margin: 0;
    font-size: 3em;
   
}

.main-header p {
    font-size: 1.2em;
}

/* Линк */
.players-link {
    color: yellow;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
}

/* === КАР ЭФФЕКТИ === */
#snow-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.snowflake {
    position: absolute;
    辞 font-size: 14px;
    color: white;
    opacity: 0.8;
    animation: fall linear infinite;
}

@keyframes fall {
    from {
        transform: translateY(-50px);
    }
    to {
        transform: translateY(100vh);
    }
}

/* === ГИРЛЯНДА === */
.garland {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    z-index: 2;
}

.garland span {
    width: 14px;
    height: 14px;
    background: red;
    border-radius: 50%;
    animation: blink 1.5s infinite alternate;
}

.garland span:nth-child(2) { background: yellow; animation-delay: .2s; }
.garland span:nth-child(3) { background: lime; animation-delay: .4s; }
.garland span:nth-child(4) { background: cyan; animation-delay: .6s; }
.garland span:nth-child(5) { background: orange; animation-delay: .8s; }
.garland span:nth-child(6) { background: pink; animation-delay: 1s; }

@keyframes blink {
    from { opacity: 0.4; }
    to { opacity: 1; }
}


.container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

h2 {
    text-align: center;
    color: #007bff;
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 2em;
    border-bottom: 2px solid #007bff33;
    padding-bottom: 10px;
}

/* Маалымат бөлүмү (Info Section) */
.info-section {
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.info-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.info-box {
    background-color: #e9f5ff;
    padding: 20px;
    border-radius: 8px;
    flex: 1 1 300px; /* Ийкемдүүлүк */
    border-left: 5px solid #007bff;
}

.info-box h3 {
    color: #007bff;
    margin-top: 0;
    font-size: 1.3em;
}

.info-box ul {
    list-style: none;
    padding-left: 0;
}

.info-box ul li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.info-box ul li i {
    position: absolute;
    left: 0;
    color: #28a745; /* Иконалардын түсү */
}

/* Предметтерди тандоо бөлүмү */
.subject-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin-top: 30px;
}

.subject-list li {
    flex: 1 1 300px;
    max-width: 350px;
}

.subject-card {
    display: block;
    text-decoration: none;
    color: white;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.subject-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.subject-card i {
    font-size: 3em;
    margin-bottom: 15px;
    display: block;
}

.subject-card h3 {
    margin-top: 0;
    font-size: 1.5em;
}

/* Предметтердин түстөрү */
.kyrgyz-bg {
    background-color: #4CAF50; /* Жашыл */
}
.english-bg {
    background-color: #FFC107; /* Сары/Алтын */
}
.math-bg {
    background-color: #E91E63; /* Кызыл/Кызгылт */
}


/* Футер */
.main-footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: #ccc;
    margin-top: 40px;
}

/* Медиа суроолор (Мобилдик түзмөктөр үчүн) */
@media (max-width: 768px) {
    .main-header h1 {
        font-size: 2em;
    }
    
    .info-content {
        flex-direction: column;
    }
    
    .subject-list {
        flex-direction: column;
        align-items: center;
    }

    .subject-list li {
        max-width: 90%;
    }
}

/* --- Сиздин Учурдагы Стилдериңиз (Үлгү үчүн) --- */
/* .math-bg { background-color: #e53935; color: white; } */
/* .kyrgyz-bg { background-color: #43a047; color: white; } */
/* .english-bg { background-color: #ffb300; color: black; } */

/* --- ЖАҢЫ КОШУЛГАН ПРЕДМЕТТЕР ҮЧҮН СТИЛДЕР --- */

/* 1. Химия (Himiya) - Көк-жашыл */
.himiya-bg { 
    background-color: #00897b; /* Teal */
    color: white; 
}

/* 2. Биология (Biologiya) - Күңүрт жашыл */
.biologiya-bg { 
    background-color: #6a9c14; /* Darker Green/Lime */
    color: white; 
}

/* 3. Тарых (Taryh) - Күрөң-кызгылт сары */
.taryh-bg { 
    background-color: #d84315; /* Deep Orange */
    color: white; 
}

/* 4. География (Geografiya) - Ачык көк */
.geografiya-bg { 
    background-color: #03a9f4; /* Light Blue */
    color: white; 
}

/* 5. Орус Тили (Russian) - Күлгүн көк */
.russian-bg {
    background-color: #3f51b5; /* Indigo */
    color: white;
}

/* ЭСКЕРТҮҮ:
   Сиздин .subject-card стилиңизде иконалар жана тексттер ак түстө болушу үчүн 
   (color: white) коюлган болушу керек. Эгер тексттер көрүнбөй жатса,
   алардын стилин текшериңиз. 
*/
.subject-card i, .subject-card h3, .subject-card p {
    color: inherit; /* же color: white; */
}
/* --- 5. Предметтик Карталар Үчүн Жаңы Стилдер --- */

/* Информатика */
.informatika-bg {
    background-color: #2196f3; /* Ачык көк */
    color: white;
}
.informatika-bg:hover {
    background-color: #0b7dda; /* Коюу көк */
    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.4);
    transform: translateY(-3px);
}
.informatika-bg i {
    color: #b3e5fc; /* Ачык иконка түсү */
}

/* Кыргыз Адабияты */
.adabiyat-bg {
    background-color: #4caf50; /* Жашыл */
    color: white;
}
.adabiyat-bg:hover {
    background-color: #388e3c; /* Коюу жашыл */
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
    transform: translateY(-3px);
}
.adabiyat-bg i {
    color: #c8e6c9; /* Ачык иконка түсү */
}
.bilim-bg {
    background-color: orange; /* Кызыл/Кызгылт */
}