.elementor-3175 .elementor-element.elementor-element-221b087{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-3175 .elementor-element.elementor-element-f23660a .elementor-button{background-color:#6EC1E4;}.elementor-3175 .elementor-element.elementor-element-f23660a .elementor-button-content-wrapper{flex-direction:row;}.elementor-3175 .elementor-element.elementor-element-172f171{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-3175 .elementor-element.elementor-element-01c76cc{text-align:center;}.elementor-3175 .elementor-element.elementor-element-01c76cc .elementor-heading-title{color:#6EC1E4;}.elementor-3175 .elementor-element.elementor-element-77e5cca{--display:flex;}.elementor-3175 .elementor-element.elementor-element-dbd5456{--display:flex;}.elementor-3175 .elementor-element.elementor-element-720e88b .elementor-button{background-color:#61CE70;}.elementor-3175 .elementor-element.elementor-element-720e88b{width:100%;max-width:100%;}.elementor-3175 .elementor-element.elementor-element-720e88b.elementor-element{--align-self:center;}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}}/* Start custom CSS for html, class: .elementor-element-be94b44 *//* הגדרות כלליות של הדף */
body {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
}

/* הגדרות של הכותרת והשאלה */
h1 {
    margin-bottom: 20px;
}

h2 {
    margin-top: 30px;
}

#code-container {
    margin-top: 20px;
    font-size: 24px;
}

/* הגדרות של הקונטיינר */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* הגדרות של הכרטיסים */
.cards {
    display: flex;
    justify-content: space-around;
    width: 80%;
    max-width: 800px;
}

.card {
    background-color: #add8e6; /* כחול בהיר */
    width: 150px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    border-radius: 10px;
    transition: transform 0.6s;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 10px;
}

/* כפתור הבא */
#next-button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 18px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.6;
}

#next-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#next-button:not(:disabled) {
    opacity: 1;
}

/* אנימציה של כרטיס מתהפך */
.card.flipped {
    background-color: #4CAF50; /* ירוק כשנבחר */
    color: white;
    transform: rotateY(180deg);
}

/* כרטיס שגוי */
.card.incorrect {
    background-color: #f44336; /* אדום */
    color: white;
}

/* הגדרות של הכרטיס שנבחר */
.card.flipped, .card.incorrect {
    pointer-events: none; /* אי אפשר ללחוץ שוב על הכרטיס */
}/* End custom CSS */