.ppquestion{
    /*background-color: #f0f8ff !important;
    border: 2px solid #2196F3 !important;*/
    color:black !important;
    padding: 10px !important;
    margin-top:2rem !important;
    margin-bottom:2rem !important;
    border-radius: 5px !important;
    font-family:Nunito,sans-serif !important;  
    font-size:1.4rem !important;
    box-shadow:
        0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}
    
.ppanswer{
    /*background-color: lightgreen !important;
    border: 2px solid #4CAF50 !important;*/
    padding: 10px !important;
    margin-top:1rem !important;
    margin-bottom:1rem !important;
    border-radius: 5px !important;
    font-family:Nunito,sans-serif !important;  
    font-size:1.2rem !important;
    box-shadow:
        0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}
.ppinput{
    background-color: lightgrey !important;
    border: 2px solid darkgrey !important;
    padding: 10px !important;
    margin-top:1rem !important;
    margin-bottom:1rem !important;
    border-radius: 5px !important;
    font-family:Nunito,sans-serif !important;  
    font-size:1.2rem !important;
    box-shadow:
        0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}

.ppeval{
    /*background-color: white !important;
    border: 2px solid darkgrey !important;*/
    padding: 10px !important;
    margin-top:1rem !important;
    margin-bottom:1rem !important;
    border-radius: 5px !important;
    font-family:Nunito,sans-serif !important;  
    font-size:1.2rem !important;
    box-shadow:
        0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}


.pppassage {
  background-color: #f8f8f8;
  border-left: 5px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  white-space: pre-wrap;
}

.ppright:hover {
  background-color: lightgreen !important;
  cursor: pointer;
}

.ppwrong:hover {
  background-color: lightcoral !important;
  cursor: pointer;
}

.ppright, .ppwrong {
  background-color:mintcream;
  transition: background-color 0.3s ease;
}

.ppvideo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.ppvideo a:hover {
  background: #bbdefb;
}