@charset "UTF-8";@font-face {
    font-family: Bukra;
    src: url(../fonts/29LTBukra_51beab1f.woff2) format("woff2"),url(../fonts/29LTBukra_ae2d6d28.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Bukra;
    src: url(../fonts/29LTBukra-Bold_a337f092.woff2) format("woff2"),url(../fonts/29LTBukra-Bold_cf7cae79.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Bukra;
    src: url(../fonts/29LTBukra-Light_d5278025.woff2) format("woff2"),url(../fonts/29LTBukra-Light_6aed01de.woff) format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Bukra;
    src: url(../fonts/29LTBukra-BoldItalic_19c38061.woff2) format("woff2"),url(../fonts/29LTBukra-BoldItalic_0a123853.woff) format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: Bukra;
    src: url(../fonts/29LTBukra-Medium_woff2) format("woff2"),url(../fonts/29LTBukra-Medium_47cea708.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Bukra;
    src: url(../fonts/29LTBukra-Regular_8b4ad718.woff2) format("woff2"),url(../fonts/29LTBukra-Regular_3dc043a0.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}
@font-face{
    font-family:HelveticaNeueLTArabic-Roman;
    src:url(../fonts/HelveticaNeueLTArabic-Roman.ttf);
    font-weight:bold
}

body {
    font-family: Bukra,Arial,sans-seri;
    color: white;
    background-image: url('../background/smo_newest.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}
.font-div{
    font-family: HelveticaNeueLTArabic-Roman !important;
}
.big-box {
    width: 250px;
    min-height: 150px;
    height: auto; /* Adjust height automatically */
    padding: 20px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin: 10px;
    border-radius: 20px;
    position: relative;
    display: grid;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
.small-box {
    touch-action: none;
    -ms-touch-action: none;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 5px;
    border-radius: 15px;
    cursor: grab;
}
.main { background-color: #3c3a5e; color: white; }
.blue { background-color: #ebeeef; color: #393939; }
.orange { background-color: #ebeeef; color: #393939; }
.red { background-color: #ebeeef; color: #393939; }
.indicator {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 10px; /* Rounded corners */
    line-height: 30px;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    border: 2px solid transparent;
}
.correct_blue { background-color: transparent; color: green; }
.incorrect_blue { background-color: transparent; color: red;  }
.correct_orange { background-color: transparent; color: green;  }
.incorrect_orange { background-color: transparent; color: red;  }
.correct_red { background-color: transparent; color: green;  }
.incorrect_red { background-color: transparent; color: red; }
.big-box .indicators {
    display: ruby;
    gap: 5px;
    margin-top: 10px;
}
.blink_me {
    animation: blinker 2s linear infinite;
    color: red;
    font-weight: bolder;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}