/* Genel stiller */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    line-height: 1.6;
  }
  
  .container {
    background-color: #fff;
    padding: 0px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 90%;
    max-width: 600px;
     margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  
  /* Başlık Stilleri */
  h1 {
    margin-bottom: 20px;
    color: #333;
    font-size: 2.2rem;
    font-weight: 600;
  }
  
  /* Progress Bar Stilleri */
  #progress-container {
    width: 100%;
    height: 10px; /* Yükseklik */
    background-color: #e0e0e0; /* Arkaplan rengi */
    border-radius: 5px; /* Yuvarlak köşeler */
     margin-bottom: 10px; /* Progress bar ve soru arasında boşluk */
    overflow: hidden;
  }
  
  #progress-bar {
    height: 100%;
    background-color: #4caf50; /* İlerleme rengi */
    width: 0; /* Başlangıçta 0 genişlik */
    transition: width 0.3s ease-in-out; /* Geçiş animasyonu */
  }
  
  /* Quiz ve Soru Stilleri */
  #quiz-container {
    margin-bottom: 20px;
  }
  
  #question {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #555;
    font-weight: 500;
  }
  
  /* Seçenek Stilleri */
  #options button {
    display: block;
    width: calc(100% - 20px);
    margin: 10px auto;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #f9f9f9;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.3s;
    font-size: 1.1rem;
    font-weight: 400;
  }
  
  #options button:hover {
    background-color: #e9e9e9;
  }
  
  /* Seçilen şıkkın belirginleştirilmesi */
  #options button.selected {
    font-weight: 800;
    font-size: 1.2rem;
    background-color: #e0f7fa;
    color: darkslateblue;
  }
  
  
  /* Buton Stilleri */
  #next-btn {
    display: none;
    padding: 12px 24px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 1.1rem;
  }
  
  #restart-btn {
    padding: 12px 24px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 1.1rem;
  }
  
  #next-btn:hover {
    background-color: #0056b3;
  }
  
  #restart-btn {
        background-color: #28a745;
    }
    
  #restart-btn:hover {
    background-color: #218838;
  }
  
  /* Sonuç Bölümü Stilleri */
  #result-container {
    margin-top: 20px;
    text-align: center;
  }
  
  #result-container h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 15px;
  }
  
  #result-container p {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 10px;
  }
  
  /* Açıklama Stilleri */
  #explanation {
    margin-top: 20px;
    padding: 15px;
    background-color: #f0f8ff;
    border: 2px solid #bdd8e5;
    border-radius: 8px;
    color: #333;
    text-align: left;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.5;
  }
  #success-rate {
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .quiz-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.quiz-link {
    display: block;
    padding: 20px;
    background-color: #4caf50;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.quiz-link:hover {
    background-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.quiz-link2 {
  display: block;
  padding: 20px;
  background-color: #4c81af;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 1.1rem;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.quiz-link2:hover {
  background-color: #455ca0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

  
  /* Responsive Design (Mobile) */
  @media (max-width: 480px) {
    .container {
        width: 95%;
    }
    h1 {
        font-size: 2rem;
    }
      #question {
        font-size: 1.3rem;
    }
      #options button {
        font-size: 1rem;
   }
  
     #next-btn, #restart-btn {
        font-size: 1rem;
    }
  
   #result-container h2 {
      font-size: 1.6rem;
  }
  
  #result-container p {
       font-size: 1.1rem;
  }
    #explanation {
       font-size: 1.3rem;
    }
     #success-rate {
      font-size: 1.1rem;
   }
  }


 
  
   h1 {
      margin-bottom: 20px;
  
   }
   .list-group-item {
        transition: background-color 0.3s ease;
   }
      .container{
         width:80% !important;
  
   }
  
  /* Hover Effect */
    .list-group-item-action:hover {
          background-color:#c8dbf7!important;
           transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(0,0,0,0.1)!important;
       }
  
  
    .custom-link {
        display: flex;
       align-items: center;
         padding:10px 20px;
            justify-content: space-between;
     }
   .histoloji-link-01 {
  
          background-color: rgba(244, 204, 244, 0.6) !important; /* Renklendirilmiş bir background */
         color:#741182!important;
   }
  
   .histoloji-link-02 {
  
      background-color:  rgba(215, 247, 196, 0.6)!important;  /* Renklendirilmiş bir background */
       color:#4b6626 !important;
  
   }
   .histoloji-link-03 {
        background-color:rgba(249, 211, 152, 0.5)!important;
             color: #7b4c11!important;
  
  }
      .histoloji-link-04{
  
           background-color:  rgba(195, 228, 252, 0.5)!important;
             color:#1d5a8d!important;
  
    }
      .histoloji-link-05 {
         background-color:   rgba(254, 186, 178, 0.5)!important;
            color: #b1190a !important;
  
       }
  
   .histoloji-link-06{
            background-color:   rgba(199, 222, 213, 0.6)!important;
              color:#1b5038 !important;
  
  }
     .histoloji-link-07 {
  
       background-color:  rgba(226, 235, 234, 0.4)  !important;
  
      color:#332821!important;
  
  
   }
  
  .histoloji-link-08 {
     background-color:  rgba(218, 170, 170, 0.5)!important;
         color:#5b1a1a!important;
   }
  .histoloji-link-09 {
  
           background-color:   rgba(220, 236, 169, 0.5) !important;
            color:#7c6a21!important;
  
     }
  .histoloji-link-10{
  
      background-color:   rgba(170, 236, 180, 0.6)!important;
         color:#267d33!important;
  
      }
  
  .histoloji-link-11{
  
      background-color:   rgba(176, 223, 239, 0.4) !important;
        color:#296e8e !important;
  
  
  }
  .histoloji-link-12{
     background-color:   rgba(244, 183, 183, 0.5)!important;
  
        color:#8a2929!important;
  
  
   }
  .histoloji-link-13{
    background-color:   rgba(228, 237, 205, 0.5)  !important;
           color:#727731 !important;
  
  }
  .biyoloji-link-01{

    background-color: rgba(168, 234, 240, 0.6)!important;
   color:#055371 !important;

}
.biyoloji-link-02{
   background-color:  rgba(240, 216, 147, 0.4)!important;
     color: #6b5504!important;
}

.biyoloji-link-03 {
     background-color:   rgba(225, 216, 215, 0.3)!important;
        color:#085e73!important;

}
  .biyoloji-link-04{
       background-color:  rgba(213, 153, 211, 0.6)!important;
       color:#8c315b !important;
 }
.biyoloji-link-05{

     background-color:   rgba(225, 184, 148, 0.3)!important;

       color:#7a5d35 !important;
  }
 .biyoloji-link-06 {
      background-color:  rgba(194, 168, 233, 0.6) !important;
    color:#590a73 !important;


}
.biyoloji-link-07 {

 background-color:  rgba(165, 211, 172, 0.6)!important;
   color: #024f29 !important;


 }
.biyoloji-link-08{
background-color:    rgba(232, 224, 158, 0.5)!important;

color:#615a1a !important;


  }
  .biyoloji-link-09{
    background-color:   rgba(166, 219, 171, 0.4)!important;
  color:#425d12!important;

}
.biyoloji-link-10{

   background-color: rgba(139, 234, 164, 0.6) !important;
   color:#08781c !important;

}
.biyokimya-link-01 {
  background-color:  rgba(244, 234, 180, 0.6) !important; /* Renklendirilmiş bir background */
      color:#948234!important;
}

.biyokimya-link-02{
   background-color: rgba(154, 242, 181, 0.6)  !important;  /* Renklendirilmiş bir background */

      color: #295c42 !important;
}


.biyokimya-link-03{

background-color: rgba(147, 217, 235, 0.5)!important;
color: #024a6e !important;

}
.biyokimya-link-04 {

background-color: rgba(158, 200, 225, 0.6) !important;
 color: #0b418a !important;

}
.biyokimya-link-05 {
  background-color:  rgba(146, 236, 214, 0.5)!important;
       color:  #097666 !important;

}
.biyokimya-link-06 {
background-color: rgba(192, 199, 249, 0.6) !important;
      color:#442377!important;


}
.biyokimya-link-07{
background-color: rgba(250, 237, 172, 0.4) !important;

color:  #784e2b !important;


}
.home-link{
  background-color:  rgba(125, 139, 155, 0.695) !important;
        color:#eceff5!important;

  }
   .col-md-8 {
 background-color: hsla(249, 40%, 10%, 0.704);
     border-radius: 10px;
      padding: 20px;
    }